CALSMART
ROLE: UX/UI Designer
CLIENT: Calsmart
TOOLS: Google Forms, Figma, Keynote
METHODOLOGIES: Market Research, Competitor/Comparator Analysis, Surveys, Contextual Inquiry, Low to High Fidelity Wireframing, Style Guide, User Persona, Client Deck Presentation
OVERVIEW: A case study covering the redesign of Calsmart, a health tracking app developed for the FitBit ecosystem. The app targets intermediate, fitness-minded users who regularly track activity and nutrition via smartwatch. The initial app design had little UX consideration involved, so the developer leveraged our team to get the app ready for market. This case study explores the process of research, analysis, and rounds of design work involved in updating the primary screens and user experience of the application.
RESEARCH
The idea for Calsmart came from the developer’s own need for a health app that accurately calculates his fitness metrics, as well as keeps him on track with both his activity and nutrition goals. While apps on the market tracked the likes of calories and steps, Nathan realized incorporating BMI and more personal data was the only way to further the accuracy of his health tracking. His unique algorithm lies at the heart of Calsmart, but in order to take the app out of beta, Nathan needed to apply UX best practices to identify and appeal to the app’s target audience for broader understandability and usability.
Myself and two other UX designers worked closely with Nathan to address the three main screens of the app, working within the constraints of FitBit’s 348x250 px dimensions. Because the app was built with no prior UX considerations, we started from the beginning, researching a variety of existing health apps to gain a sense of what was already in the market, common functionalities, and understanding the gap in the market that Calsmart aimed to fill. We built upon this preliminary research through surveys in order to identify exactly what pain points needed to be addressed in the existing app, as well as honing in on the particular target audience and how they approached the app’s current usability. From there we set up contextual inquiries for real-time feedback on the current design and information present on the app screens.
Weekly check-ins were scheduled throughout the project to ensure stakeholder alignment at each stage of research and development, mitigating any surprises and accounting for all perspectives and ideas. Upon identifying trends and noteworthy insights from our collective research, the analysis brought us to a handful of key takeaways and observations that identified the major pain points and areas of improvement within the app, which I presented via deck to Nathan for sign off.
KEY TAKEAWAYS
PERSONA
UPDATE THIS SECTION
We used these insights to develop a persona, which focused our design decisions as well as provided a digestible understanding of the target user that WayScript founders were looking for. Our persona, Chris, embodied common sentiments from our user interviews and laid out the framework for the problems we ultimately solved for.
IDEATE
We took these takeaways and used them to guide our ideation and design, translating the most poignant feedback into actionable design considerations:
KEY INSIGHTS & RECOMMENDATIONS
The app consists of three main screens: The simple view, detailed view, and weekly view. The simple view shows date & time, the user’s heart rate, and four main health stats. The detailed view provides a much more detailed breakdown of all stats and the progress of each (steps, calories, etc.). The weekly view shows weight loss and calorie intake, current and weekly.
DESIGN
With full stakeholder approval, our team workshopped our redesigns, collaborating through brainstorming sessions and taking our lo-fidelity ideas into high-fidelity mockups via Figma. We established a stoplight color code, relied on recognizable iconography, and elevated the overall layout and design of the screens for better readability and also adding a bit of visual identity to the brand. Our biggest consideration was the fine balance of maintaining a minimalist and clean UI within the small screen size while still conveying enough information for the user to quickly identify their important health and fitness stats.
STYLE GUIDE
Original Sign Up/Onboarding Screen
Updated Onbaording Screen After Sign Up is Complete
Explanations of before and after screens here — put header on each of these
Original Profile Page
Updated Profile Page to “My Dashboard”
Explanations of before and after
Original Script Overview Page
Updated Script Overview Page
explanations of before and after
DELIVER
Our high-fidelity designs went through a few rounds of iterations, where I hosted live feedback sessions with Nate so that he could share thoughts, considerations, and further perspective. We ultimately reached a stage where he was pleasantly excited with the new screens that delivered a refreshed, cleaner, and more usable version 2.0 of the Calsmart app.