Hērakles
Hērakles is a social health & fitness tracking app hoping to create a better experience for their users. My goal was to integrate a messaging feature, allowing users to connect with each other by sharing health, fitness goals, and achievements that will drive user engagement and repeat app usage.
Overview:
For this capstone, i worked as a designer for a hypothetical company (Hērakles) that launched a successful social fitness & health tracking app. My goal is to help create sustained user engagement by implementing a new messaging feature within the app.
Role:
As a frequent fitness app user (specifically Nike Run Club), i decided to explore this space due to my personal interest in fitness & my frustrations with existing platforms.
My roles included:
UI/UX designer
Strategist
Researcher
Wire-framing & Prototyping
Team:
Individual capstone project
Scope:
UI/UX Design, Sketching, User Flows, Wire-framing, Prototyping, Moderated Usability Testing
Tools:
Figma, Adobe Photoshop, InVision, Mock-up (iPad)
Duration:
90 hours
The Challenge
3 years ago, Hērakles was launched as a successful family & friends health tracking app. Hērakles has ways to set individual goals, monitor them and then once achieved displays them on the user’s home screen. However, there is no mechanism to alert other members (including members in a group that the user has joined) or message others as progress or goals are met. On average user engagement is heavy for the first 3 weeks then it drops off and soon after users delete the app.
Currently Hērakles has no messaging feature within the product; therefore, company would like to integrate messaging into the app.
My Goal is to…
Roadmap
After understanding the scope of the project, I created a roadmap for myself to complete the project within a month’s timeline. It was a conscious decision to give a lot of time for doing research on the app, its competitors as well as understanding the user's motivation so far to start a fitness routine.
Discover
The first step i embarked on is understanding user behavior and habits through utilizing data and research. To better understand user behavior, i researched all related data and methodology for user retention. Due to the time constraints of the sprint, i prioritized creating a synthesized report on my research findings and then applying the research to my sketches and user flows in addition to analyzing industry leaders.
Secondary Research Summary
“25% of Users Abandon Apps After One Use - Increased abandonment is normally an unfortunate side effect of not leading users to value quickly enough after they open an app”
(Localytics, 2019)
What are the key methods in effectively increasing user retention rates? According to Localytics, much of what keeps users coming back for more is their initial interest, which relies on onboarding, in-app messaging, and encouraging push opt-in.
The most common way to measure retention marketing success is your app’s retention rate. It is recommend to track retention at these 3 stages:
Final Thoughts - Shifting Focus To In-App Behaviors
The goal is not simply an app download but retaining users to build brand loyalty. App engagement and user retention are equally, if not more important than user acquisition. Converting users to loyal, long-term customers will help increase average lifetime value (LTV) and generate more revenue for your app.
The methods above can significantly improve user engagement and retention to ensure that your application has an impact in the highly competitive app landscape.
Industry Leaders
The second stage of my research was to study and run a competitor analysis to understand the key successful features within each app (and specifically to see if they integrated a messaging feature). It was also really important to identify potential gaps among these fitness apps to see if i could incorporate features users wished they could add onto these platforms.
Key Findings:
Target Demographic
Based on the information i was given, the target user/persona for Herakles hopes to create & be apart of an inclusive and supportive community that is not only centered around achievements but the overall fitness journey of her friends and family.
But at the same time, the user feels that some of the fitness apps with the messaging feature does not seem to add any difference as compared to the popular messaging apps. So she hopes to find some value addition here.
Initial Design
At the start of this project, I was presented with the business goals, a few extra tasks and the names of a few competitors. Along with all of this, I was also shared rough wireframes of the app screens where the feature could play a potential role.
Before I dove into wire-framing & sketching, I thought that a list of user stories would help with the overall planning and structuring of the user stories. It not only helped in formulating my ideas into buckets but it gave a lot of clarity into what seemed like a good idea with potential of increasing the engagement. Before embarking onto preliminary user testing and high fidelity mockups, I brainstormed on potential UI designs, illustrating wireframes to get a feel for the app and its core features.
After a lot of iterations and sketching, these were the wireframes on which I ran a usability test.
User Flow
Utilizing the digital wireframes i sketched out on my iPad, i mapped out two key user flow scenarios which my usability testing would be based on:
You’re using this app as a first time user
You’re already registered as a user and are somewhat familiar with the features (returning to app from post-notification)
Validate
Usability Testing
The goal of conducting this test was:
To understand if onboarding process was straightforward
To identify methods of drawing the user back to the app (via notifications, fun features, etc.)
To understand if the user can easily message other users and feel a sense of community through the different features.
To identify if there are any gaps in the overall user experience around creating a close community within the app.
Interaction Decisions
After prototyping my digital wireframe sketches, I reviewed necessary features and focused on screens that needed improvement. I designed 3 sets of mid-fi wireframes that are essential to the concept: onboarding, messaging, and push notification opt-ins.
Polishing the underlying UX, I A/B tested the wireframes to uncover user preferences for usability, visual appeal, and functionality.
Messaging
4/5 of users preferred option 2. By having each message split with a line enables users to more easily select the message.
Onboarding
I found that by “shortening” the onboarding process will ensure less app abandonment. Adding a progress bar, showing which step the user is on, and providing the option to skip supplementary steps are all viable methods to increase user retention.
Through feedback from my A/B test, 5/5 users preferred signing up with google, facebook, apple login, or email instead of phone number. Instead of having the additional onboarding step of mobile # verification, users are automatically registered through google, apple, etc.
According to iOS Human Interface Guidelines & Apple Developer guidelines, Apple requires the sign up with apple method if other social authentication providers are present (which is why sign up with apple is an option).
Onto the next step! Creating the my high fidelity interfaces & prototyping!
Design in High-Fidelity
Style Guide
Pairing bright blue tones with a colorful cheerful secondary color scheme, creates a vivid and energetic visual interface for Herakles.
The Solution
#2 - Quick Access to Notifications
The onboarding interfaces introduce the branding, social aspect, and personalization features to the user.
Users have the option to create a new account via personal email or integrate their social profiles (Facebook, Gmail, Apple, etc). By integrating social platforms, this simplifies & shortens the sign up process and as a result, creates an efficient onboarding that ensures less app abandonment.
Localytics reports that users who experience some degree of personalized brand interaction are more likely to return to an app for 11 or more sessions.
Therefore, i integrated personalized notifications. Automatically when a goal or target is reached, the user will be notified (everything can be adjusted in settings)
Users can access notifications on the top right corner of every page, while also being able to quickly reach other functions on the screen.
Dashboard Interface - Profile Page
Dashboard Interface - Explore Page
Push Notification Opt-ins
Originally on the bottom navigation bar i included a notification page but after testing, i realized that instead of having a separate full screen/tab for notifications, i added an overlay pop-up on Figma. Users can access notifications on the top right corner of every page, while also being able to quickly reach other functions on the screen.
The simpler the flow the better!
Compact is key.
#1 - Onboarding
#3 - Integrated Messaging Feature
The client specifically asked to create an integrated messaging experience throughout the product that drives engagement & repeat usage. This is the interface i came up with!
Through the bottom navigation bar, users can quickly access and send messages to their friends & family.
Users get notified based on their custom settings (lock screen, notification center, banners)
Interactive Pop-up Interfaces
Users can easily access other features on the page without having to leave the main profile page.
Minimal scrolling
Users can quickly identify their steps, calories, water intake, and weight in one glance — more data & information is provided with a quick tap
Clear & organized feed (through the bottom navigation bar - less scrolling & more compact
By reducing the number of screens, multiple overlays were implemented to distribute the amount of information per interface
More horizontal scrolling instead of vertical scrolling to reduce the amount of vertical movement for the user & more info is shown on the page
User can customize their feed based on topics that interest them (during onboarding & on this screen)
Validate (again) & Iterate Hi-Fi Interfaces
Using my hi-fi designs, i generated another usability test to identify potential errors. The main goal of this test was to understand if the users were able to fluidly go through all the features without hesitation, and determine the likelihood & frequency of them opening the app on a regular basis (understanding if implementing these features added any value).
Findings:
From user test results, thematically and visually stayed mostly consistent throughout the app
Small text inconsistencies that need to fixed
Some clarification needed in the bottom navigation bar
Follow more precisely with my style guide
Time to go back and iterate!
Interactive Prototype
Here’s the full interactive prototype!
Retrospective
Overall as a health & fitness enthusiast, designing Herakles was extremely informative and fun! I played with a lot of Figma micro-interactions (lots of overlays!) & i constructed a more interactive and intuitive user experience. This project was about understanding user behavior and implementing effective methods to achieve the metrics that demonstrate better engagement & repeat usage throughout the entire product.
It was a challenge in itself that i was given a preset framework, architecture, and function that i had to work around. I learned to be more aware of preset user behavior and not make assumptions based on my personal experience. It’s also OK to completely come up with a new feature, the guidelines are not set in stone and through exploration & research it’s possible to end up pitching completely new ideas.
Takeaways:
Don’t dismiss preset user behavior
The design stages for creating an additional feature is completely different from the design stage for designing a new app or flow. Both have a unique set of challenges & structures which one has to work around; however, you cannot dismiss the previous user behavior which is already set in stone for that specific app (for an existing app or flow).
Implementing new technology
Quite a few users proposed a feature for connecting their apple watch, Fitbit, or any fitness tracking device so all the data could be automatically integrated into the app.
Iterate & iterate & Iterate!
Due to time constraints on this project, I wasn’t able to fully test the 2nd iterated prototype. Next steps forward, I would like to reach out to different demographics and seek to understand their frustrations & validate the hypothesis with more A/B testing, usability testing, and iterations.