User-Flow, Style Guide, Wireframes, High Fidelity Mockups, Interactive Prototype, Interactions, Redlines, Production Assets, User Testing
This project is a visualization of a conceptual health & fitness app that would act to compile data from diet, weight loss, heart rate, exercise and sleep data generated using other apps and peripheral devices. Such an app could provide users a way to set and manage that information, enabling them to meet their personal goals.
The criteria for this was to create a ‘health tracker app’that provides information on your level of exercise, diet, and other data about your body, such as: weight, size, measurements, sleep, etc. These metrics take the form of line charts, bar charts, pie-charts, donut charts, or gauges.
To demonstrate some of the apps functionality I created some animated interactions to demonstrate it's potential uses.
Using InVision, I created an interactive prototype to test the usability of the initial setup experience for the app.
Try the prototype
For inspiration I gathered visual reference on Pinterest and Google, and looked into apps similar to what I was aiming for; like Strava - a cycling app, and Gyroscope - an information compiling app.
I began roughly designing and sketching my ideas for potential interactions & layouts, as well as creating some initial wireframes. Additionally, I designed some animations to demonstrate interactions within the app.
Using what information I gathered, I designed high-fidelity mockups that would aid me in the creation of the final digital assets. This experience was primarily focused on mobile as the platform, though I also explored what a tablet or web version could be like.
Using the mockups, I created templates for all the necessary components to construct the interactions and screens that I had designed.
.png)
For easy assembly & iteration, I created asset sheets to assemble each page of the interactive prototype.
This set of modular assets was created to aid in the creation of the animated interactions.
Were this a full project, each screen would similarly be redlined for consistency in my work and to assist developers using my assets.
After having a discussion about color contrast with another UX designer, the idea of accessibility was brought up relating to people with color blindness – I looked into it. I discovered a contrast ratio of at least 5 between overlapping colors would allow those with color blindness to differentiate between neighboring colors.
Wanting to see how my design held up against these standards I checked it – unfortunately it didn’t fare well. Knowing my color choices didn’t hold up gave me a chance to reexamine my choices to see if I could achieve a better contrast.
While working on the changes I had an idea the background of the data visual could shift hue to correspond to the time of day; lighter during the day and darker by night. Liking the idea, I decided to incorporate it while doing the redesigning.
If you need something designed with a creative solution in mind, please reach out. Let’s see if we can’t help you out!
Say hello
