Case study: wireframes for health and wellness application
Wireframe is a critical part of the interaction design process helping designers effectively communicate the structure of the software. Wireframes, unlike mockups, typically do not contain any styling, color or graphics.
I prepared wireframes for a health and wellness application, which drives its users to take a holistic approach towards health. The tool I used for preparing these wireframes is Whimsical. Some other tools such as Balsamiq, Wireframe.cc, Photoshop, Figma etc. can also be used to create wireframes.
To begin with, I have considered some basic features in the application. The same can be extended to include many other capabilities as per the need. Rest of the article contains the wireframes for the below pages:
- Login/Signup Page
- Personal Details Page
- Fitness Goals Page
- Homepage
- Profiles Page and Goals Progress
- Workout Page with Personalisation
- Tracking page
- Meals Intake Page with Personalisation
- Friends Leaderboard Page
Once we are done with wireframes, we can create mockups. Mockups are generally used to add visual details to wireframes. Some of the tools which help in creating a mockup are Photoshop, Sketch, Illustrator, Figma and InVision.
Once we have the sketches/wireframes, mockups ready, we can move to the interaction stage of an application. In the interaction stage, we check the ease of using features and how the pages link with each other. Output of the interaction stage is a prototype.
