I began the design process by reading up on my proto-persona, Rebecca. She is a busy professional with a family who is new to fitness and wants to squeeze in activity throughout her day. Based on this information, I created a user flow with all of the screens she would need to complete her goals.
With the user flow in mind, I drew sketches of each screen to brainstorm possible solutions for Fitted.
Then, I took these sketches and created mid-fidelity mobile wireframes, as well as wireframes for tablet and desktop breakpoints.
With the basic layout complete, I curated two distinct mood boards to hone in on Fitted's visual direction.
The first board takes inspiration from nature and the outdoors and heavily features the color green. The other board is brighter, lighter and more playful. I ultimately decided on the second board because the bright colors convey a positive and friendly vibe for the app, which is crucial for an app designed for beginners.
Using my chosen mood board and the project brief, I developed a few potential color schemes for my app but ultimately decided on the third color scheme as it was the brightest and most closely resembled the feel of my chosen mood board.
I then finalized my style guide and ensured all screens adhered to the color and type hierarchy outlined below.
With my style choices and layout in mind, I created the following screens.
.png)
