Case study: Empowering friends to cultivate healthy habits with WhatsApp
Introduction
Starting the third challenge at Ironhack we received a challenge focused on developing UI skills using the APP WhatsApp, one of the most widely used messaging applications in the world. This project involved identifying the design elements and replicating key screens within the app, with the added task of introducing a new feature.
WhatsApp is a popular messaging app known for its user-friendly interface and secure, end-to-end encrypted communication. With over a billion users worldwide, it has transformed how people connect through text, voice, and video messages.
New feature: step counting
As part of the challenge, I introduced a new feature to WhatsApp called “Step Counting.” This feature allows users to track their daily steps and compare them with friends without leaving the app.
In today’s health-conscious world, monitoring physical activity is important. Integrating step counting directly into WhatsApp enhances the user experience by making it easier for people to stay on track with their fitness goals.
Moodboard
The first step I followed was to find content and create a moodboard where I could understand how WhatsApp communicates and its design principles.
Analyzing the application…
To create my style guide and components, and to better understand the application’s flows, I took screenshots of some important screens.
Style Guide
Collecting information from the app, I created a style guide following the color palette and typography that WhatsApp uses. An important consideration during this process was the selection of fonts. While the actual WhatsApp application employs Helvetica, a paid font, I opted for the Inter font for this challenge. Not only is Inter available for free, but it also closely mirrors the aesthetics of the WhatsApp font, making it a practical and accessible choice for this project.
User flow
The next step was to consider the user flow for the new feature. Since WhatsApp already includes an ‘Updates’ tab, I chose to integrate this new feature there. After users accept the terms, they will gain access to a dedicated status section where they can track their and friends’ steps.
Low-Fi…
…Time for the drawing.
Mid-Fi
After thinking about the visual appearance of the new feature, I created wireframes to conduct usability testing.
Usability test
The usability test was carried out with 10 people and everyone managed to complete the task. The insights I gained from the test were that some people looked for the functionality in the “more” icon. This is a point that I will study for improvements as soon as I complete the case. However, the overall evaluation was good in relation to how easy it was to find the feature.
On a scale of 0 to 5 being 0 very difficult to find the new Feature and 5 being very easy, these were the results:
60% of people rated 5;
30% of people rated 4;
10% of people rated 3.
Design system
Then it was time to start working on Figma. First, I created the design system that I would use for this challenge.
Library Icons
I created an icon library with size variations between 16x16px, 24x24px, 32x32px, and 40x40px.
Components
I created variations of buttons and components that I could use to replicate the WhatsApp screens and implement the new feature.
High-Fi
Next steps
After delivering the project’s MVP, I will continue to enhance this feature. My next steps include:
- Implementing a user-friendly flow to invite others to join the challenge;
- Make the day, month, and year filter button functional;
- Developing a personal page that allows users to set goals and track their performance;
- Continue improving the feature through usability testing.
Conclusion
Due to the short development time, I haven’t been able to refine and include all the features I would like in this project, but I am happy to see the evolution. This project has provided valuable lessons in UI design and user-centric solutions and also makes it possible to evolve my skills by creating design system.
