FitSecret
UI UX design / logo & brand development / concept
The Problem:
The existing 'FatSectret' app lacks goal setting and motivation while primarily concentrating on calorie tracking alone.
The old FatSecret's clunky design did not provide a clear user path and left the user feeling overwhelmed with little guidance. Many of these users stop using the app altogether instead of focusing on small lasting changes.
Often times users loose motivation with traditional apps, which means loosing ad revenue or subscriptions. Changing your lifestyle is no small feat and it takes numerous small changes that add up to big ones. This brand evolution and app redesign provides a holistic solution that keeps users working on all their goals, health and otherwise.
.
The Solution:
This re-imagined design of the popular Fatsecret app, is now referred to as FitSecret. The name has more clear and positive intention while suggesting a secret to share. The new user interface now concentrates on user flow, creates an emphasis on daily goal writing and visualization along with small group accountability. The app records when you hit or miss your selected goal events, and visualizes your stats in real time for your and your group.
The written measurable goals, short daily mindfulness training and user accountability help keep you motivated in your lifestyle and habit changes while not feeling overwhelmed.
The app concentrates on facilitating these daily tasks, which are backed with research to help the you achieve your short and long term goals, heath and otherwise.
The Research:
When starting the project, I researched and created a survey of common issues that people run into when starting and staying with a life style change. Using Reddit, Facebook and friends and family, I solicited a survey using both multiple choice questions and open ended questions. After gathering the responses, I digested the results and discovered some key points.
User Flow:
Below you can find a User Flow that will guide the Wireframing and structure of the app. Creating the User flow makes it easy to see the scope of the project, about how many designed screens will be needed as well as sharing preliminary work with collaborators. At this stage, one can see how the architecture will begin to fit together while leaving the freedom of quick changes based on feedback.
Wire Frames:
User Testing:
The next steps were to test a wireframed, prototyped version of the app among users in the targeted age range (29-39). By using heat tracking plugins, and observations, I was able to test the design remotely and in person. I asked the testers to talk as much as possible when using the prototype and compiled their pain points and things that did not quite make sense to them. Using their feedback, I incorporated the revisions into the next iteration of the app.
Visual Identity:
The new brand identity of the app concentrates on energy. From the bright colors to the organic lines inspired by action and thumbprints, the new FitSecret uses an electric green to shock the user's senses. An incredibly legible typeface brings practicality to the design while the illustrations create an inclusive atmosphere that has the freedom to be animated. The visual look was inspired by the user personas, generated by the research stage and current design trends toward minimalism and life-giving colors.
Key Moments: Login & Sign-up
Designing in Key Moments is the idea of designing around the key steps a user would repeat. This gives the interface a more modular system that easily relates to the menu and user flow seen above. In the design, how the user is moving through the flow is communicated visually by how the screens slide either up or down, right or left.
Key Moments: Visualize and Affirm Goals
Key Moments: View and Edit Goals
Key Moments: View Group & Join Group Challenge
Key Moments: Search and Add to Food Diary
Outcome: Deliverables & Summary
Deliverables:
Designed, tested and fully conceptualized animated screens illustrating the user moving through key moments of the app. A logo, graphic system and illustrations flesh out the concept. The simple, vibrant colors add to the excitement conveyed by the design.
Designed, tested and fully conceptualized animated screens illustrating the user moving through key moments of the app. A logo, graphic system and illustrations flesh out the concept. The simple, vibrant colors add to the excitement conveyed by the design.