​
The project:

Designing a fitness responsive web app (mobile first approach) to motivate people into an exercise routine. This App has to be easy to use, effective and fun.

My role:

UI/UX Designer

Duration:
​
6 weeks
​

​The story of the project:

DailyFit is a unique Fitness App, that suits any level, schedule, needs and interests. Our goal was to integrate daily & healthy habits / exercises / routines, regardless how busy our users are. 

The problem to solve:
​
How can we easily engage people, in an entertaining way, to exercise everyday and help them to achieve an healthy lifestyle? Also, we needed to integrate the following features: search, filter, calendar, personalized profile, progression, daily challenges, social sharing and of course.....fun! These features should be easy to access.

​How the solution solved the problem:

After getting test results and user feedback, we can easily say that we found an enjoyable, efficient way to motivate people to exercise on a daily base. The simplicity and the effectiveness to access very quickly categories like "workouts", "daily motivation" or "calendar" seduced our users. 

The impact of the project for the business and the users:
​
We will know this to be true when we will collect informations about downloads, user feedback and future conversions.

The challenges I faced:

Designing for breakpoints and focusing on essential informations for each device wasn't easy. Also, exporting the content of the original files from Sketch to other softwares without problems, like Principle, was very complicated.

What I learned:
​
To use new softwares like Principle, to work effectively with colors and to make a detailed Style guide.
​

Style Guide (complete version here):

Strategy to find a solution:

- Research -
 
1. Business Requirements
2. Competitive Analysis 
3. User Flow / Sitemap

- Composition & Visual Design -

4. Low-Fidelity Wireframes
(Mobile-first approach)
5. Mid-Fidelity Wireframes
6. Mood board
7. Hand-drawn illustrations & Icons
8. A / B / n Testing with multiple variations
9. High-Fidelity Wireframes

- Prototype & Design Handoff -
​
10. Interactions, animations & Gestures
11. High-Fidelity Prototype
12. Style Guide
13. Responsive breakpoints for Tablet and desktop (low-, mid- high-fidelity wireframes)
14. Final Mockups for presentation
15. Handoff to developpers


Tools used:
​
- Pen & Paper
- ProCreate
- Axure
- Sketch
- Invision
- Principle
- Adobe CC
- Zeplin
- Balsamiq
​...