Figma Application Prototype Design

Health and Fitness App Mock-up

Project Overview

For this Project, my main goal was to create a prototype for a simple health and fitness tracking application. There is a sign up process that takes the user through a series of screens so that they can input their information. I also added a drop down function for one of the main features, the steps tracker.

Brain Storming

I initially looked into other healthcare and fitness applications to see what kind of functions and features they use. Using them as references, I created my a mood board and style guide. I tried gathering assets such as photos, but in the end I used graphics mostly.


lifestrat-mockup lifestrat-mockup lifestrat-mockup

I listed out the screens that I was going to create to give myself a good idea of what my application would look like. I quickly created low-fidelity wireframes, figuring out what UI components are needed for each screen. Contiously asking myself what would make the user experience better.

Mock-Up and Prototype


After finishing my low-fi wireframes, I continued on to make hi-fidelity wireframes. Before I started desiging each screen, I designed a few core components first. Using my style guide that I created in the beginning to make my process more efficient. Completing my design, I linked all the screens in a logical sense and used motion of the screen transitions to match the user's attention from one screen to another.