PORTFOLIO > ACTIV.
activ.
YOUR GET FIT PARTNER
PROJECT CareerFoundry UI Student
MY ROLE Information architecture, interaction design, UX & UI design
DURATION 2 months
TOOLS Sketch InVision Photoshop
PROBLEM
People’s lives are getting forever busier. Work, friends, family, chores, repeat… I wanted to create an app that anyone can pick up, whatever their fitness, and plan an exercise routine easily that suits them, knowing that they’re exercising safely and efficiently.
The Persona
To ensure there was a clear idea of a target market it was key to set out a persona early on in the process. This way I could refer back to this throughout the project to ensure I was on the right track.
Rebecca – Working Mom
Age – 26
Gender – Female
Education – Masters – Software Development
Marital Status – In a relationship
Goals
– Rebecca wants to lose weight and get in shape, as her sedentary job doesn’t allow a lot of time for exercising.
– To help with this goal, Rebecca wants to find a tool that will help her fit exercise routines into her busy schedule.
– As a beginner to working out, Rebecca also wants something that will help her learn how to properly exercise.
– Rebecca wants help finding routines she can enjoy.
Tasks
– Rebecca wants to be able to find exercises that match her goals of losing weight and getting in shape.
– In addition, she wants to find short exercises that she can do multiple times per day in between other activities.
– She wants the tool to keep her motivated as well, as her schedule can often be distracting.
Environment
– Physical: Rebecca lives in an apartment with her boyfriend and 3-year old daughter.
– Social: She has several friends from her software development job, and one of them recommended this tool as something she should check out to help her reach her goals.
– Technological: Rebecca is very tech-savvy, as she works on computers every day.
User Flow
The first step in the process was to plan a user flow through activ. to visualise what screens I would have to create and what options Rebecca would need to interact with on each screen.
Low Fidelity Wireframes
I then moved onto the screens themselves and started to draft out some low fidelity wireframes for the mobile version of activ.
Landing page with a workout planned
Workout results
Workout details
Exercise details
Schedule
Do workout
Moodboards
The next step was to explore the feel of the app by creating two moodboards. I wanted to create two differing feels that could both be viable options to move forward with to then decide upon the one I felt was the best fit for what I was trying to achieve.
Moodboard 1
For this board, I wanted to create a peaceful, friendly feeling with elements of nature and being able to workout whenever and wherever you want/can. To do this I’ve used subtle colours, handwriting font styles, images of people exercising outdoors and coloured icons.
Moodboard 2
For the second board I wanted to achieve a more motivational, serious approach to exercising. To do this the colours are more vibrant, fonts are a display style, images are more professional-looking and the icons are minimal and defined.
I decided to move forward with Moodboard 2.
I felt the professional feel paired with the instructional videos and training tips would inspire and motivate people in the way I set out to.
I also felt that the styles outlined would create a modern look for the app that will stand up next to similar apps on the market.
Final Mockups
From there I took my low-fidelity wireframes and the theme from my moodboard and created mockups of each mobile screen.
I wanted to stick to mobile-first design as I felt it was the best way to approach the app.
Once I was happy with the mobile mockups I designed 3 of the main screens at tablet and desktop breakpoints.
Style Guide
Logos
Main logo
(on orange)
Slide-in Menu logo
(on light colour)
Footer logo
(on dark colour)
Colour
#FF8966
R255 G137 B102
#66FFD6
R87 G216 B182
#FFFFFF
R255 G255 B255
#EBEBEE
R248 G248 B250
#39393A
R57 G57 B58
Typography
UNICA ONE – ALLCAPS
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789H1 45 HEADLINE
H2 35 HEADING
H3 24 SUBHEADING
Poppins
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789Tagline Medium/Bold 28
CTA LIGHT 22 ALLCAPS
CTA (SML) LIGHT 14 ALLCAPS
Link Medium 18 Underlined
Link (sml) Medium 14 Underlined
P (lrg) Light 18
P Light 16
Iconography
Menu
Close/cancel
Add
Edit
Save
Analysis
Exercises
Duration
Avatar placeholder
Field correct
Field incorrect
Sign in
Menu socials
You can view the full style guide here. The button will open a pdf in a new tab.
activ. Prototype
Please feel free to explore the activ. prototype here.
The app is still a work in progress so there are some aspects, pages and features that aren’t clickable.
