Click On The Screen Below To Experience Hello Health's Prototype

Clickable Walk Through Invision Protoytype

Case Study:
The creative brief given was to create a prototype of an app to solve any everyday problem. My partner and I decided on the problem of wanting to eat healthy, but not knowing where to start. Once we decide on the everyday problem as a team, we researched who our target audience would be. After researching who was most in need of this app we narrowed down our target audience to college students, busy moms, and fast paced environment employees.
Research:
Once establishing the target audience, we researched different companies who would be our main competitors to  create a brand matrixs. This would establish the differences between their apps, and ours, and what makes ours so worthy of downloading. The next step was creating a flowchart in which we drew over and over on a white board till all the pages flowed well together and made the most sense in terms of usability.

Different Personas App Was Based On

Brand Matrix On The Left, Flow Chart On The Right


Icon Design:
Once we figured out these initial important steps we split the tasks as to what we would be working on to make our time most efficient, and consistently checked in on each other to get feedback. I began designing the icon for our app and sketching out a variety of ideas, while my partner created and established the brand guidelines using our chosen color palette and fonts. 

Wire Frames:
After the brand guidelines and icon were established, we sketched the low fidelity wireframes of what our app was going to look like. Throughout this process we were implementing in feedback from outside sources, as well as what we learned through research of our competitor's apps.​​​​​​​
The next step, after the low fidelity wireframes, was to digitize them through illustrator. We created the high fidelity wireframes based off the low fidelity wireframes we had previously sketched.

Low Fidelity Wire Frame Sketches Created For Hello Health

High Fidelity Wire Frames Digitalized Through Illustrator

Digitalizing The Screens:
My partner and I began to implement the established brand guidelines we had agreed upon making the pages more digitized and realistic.
Once the pages were all created, we uploaded them to Invision which is a prototype app that shows what the app would look and how it would work.

Finalized Digital Screens Digitalized Through Illustrator

Back to Top