FitFox

Tina Goode contacted HatchingLab to help build & launch a brand and mobile iOS app targeting the health & fitness industry.

This is my story about how I helped Tina design the FitFox iOS app to motivate people to be more active and live healthier lives.

Tina was frustrated with current health & fitness apps because they are primarily focused on users achieving quicker times or longer distances, and for a lot of users this alone isn’t an ideal motivator.

Tina’s idea was to offer users amazing rewards from their favourite brands to motivate them to stay active and improve their health and wellbeing.

Team, Timeline & Deliverables

The team for this project was Leo Liu (iOS Developer), Christie Whitehill (CEO / Project Manager) and myself as UX/Product Designer.

During the 3 week project timeline I produced the following deliverables;

  • wireframes
  • high fidelity visual assets ready for implementation
  • app store icon & screenshots
  • single page website design & assets
  • brand system & assets

Brand Development

The first stage of the project was brand development which started with a client interview to gain a better understanding of Tina’s vision of FitFox regarding;

  • business values/mission
  • project objectives
  • product/service description
  • target audience
  • competitors
  • usage
  • creative considerations

The next step was to start sketching rough ideas to explore interesting concepts that aligned with the information gathered. These concepts were then presented to Tina to confirm her preferred style and creative direction.

The selected sketches were then revised and refined into vector artwork and then combined with suitable typefaces to finalise each concept. 

Mutiple variations of the logo and logotype were explored in both black/white and colour to consider the balance of each combination mark.

Tina then selected her favourite concept which was then further refined and finalised, ready for use within the app and online. 

The response that Tina received from friends and colleagues was overwhelmingly positive. Tina was extremely happy with the final design and was excited about the direction FitFox was taking.

Discovery

While I was busy working on the branding, Christie started workshopping the app concept with Tina to gain a better understanding of her overall vision and goals which resulted in the following key objectives;

  1. The app must motivate users to be more active
     
  2. The app should create a strong sense of competition amongst users

Wireframing

The user stories and task flows generated from the workshop were then sketched into rough wireframes to explore other possible task flows and user interface requirements for each screen.

The revised sketches were then recreated in Photoshop to refine the task flows and UI elements. These wireframes were iterated several times to find the best possible solutions for each task.

Visual Design

To ensure brand consistency throughout the app experience, the visual aesthetic of the FitFox combination mark was reflected in the icon system by using a simple line style combined with the brand colour palette.

By combining a modern sans-serif typeface with effective use of whitespace, the readability and usability of each screen was enhanced considering the large amount of information to be displayed.

Feedback

After FitFox launched on the App Store we received lots of positive feedback from users, they loved winning prizes just for being active. 

"I loved this app!!! It really motivated me to exercise every day and I was rewarded with an awesome prize at the end of the month…"
Madsta05

By using leaderboards and countdown timers, the app created a feeling of competition and urgency amongst users.

"This app is so addictive - but in the best way possible! Improve your health and fitness, enjoy great competition with friends and win awesome prizes…"
Jaijaibeats123456789

Lessons Learned

Some users complained that there weren’t enough active competitions, and if they missed out on entering a competition then the app wasn’t very useful until another competition opened up.

This issue seems obvious in hindsight but it wasn't during the design phase. To minimise these situations with future projects, I now explore edge cases in greater detail and also insist on more time dedicated to testing the user experience lifecycle.  

The Activity screen was redesigned to focus on the users daily activity rather than a users competition activity. By also featuring daily step goals and points rewards, the new Activity screen helps users keep active when they’re not competing.

The Rewards dashboard was also revised to keep users informed of the total points earned for daily and competition activity. Users can now also browse and select rewards that are earned with their points.

View More Case Studies