Beyond Habits Redesign
Beyond Habits Redesign
Embedded Files
Beyond Habits's concept of connecting habit tracking to supporting organizations that do good is excellent, but the app needed a visual reboot to increase user retention. This case study shows how powerful intentional visual hierarchy and thoughtful data visualization can be.
Beyond Habits (previously Cycler) original screens
The Challenge
The Challenge
Cycler is a healthy habit tracking app that holds users accountable by making them donate to a charity of their choice when they don't complete their daily habit challenge. The developer of Cycler sought a redesign after receiving feedback from users that they couldn't make sense of their data and that the app lacked a modern visual aesthetic. Additionally, the developer wanted to incorporate a social, gamified element to the app in which users could connect with friends, view each other's habit streaks, and give kudos.
The sheer amount of data on the habit tracking screen, and a lack of clear visual hierarchy, obscured the primary action (checking off a habit as completed or not). The first order of business was to label all the data, understand it's purpose, and determine the clearest way to display the information to the user.
There were four main data-related elements:
Daily tracking (primary action)
Challenge card (taking up most of the real estate and not doing much but housing a settings menu that is easily missed)
Weekly completion metric (used a checkbox carousel element)
Long-term stats (completion in days and overall success rate, both in circle charts and text-cluttered)
There was also a challenge settings menu floating on the card that seemed to both get lost and compete with the user profile/menu in the top right.
Solution
Solution
I prioritized the user's primary action (track their habit on the current day), used streamlined progress indicators and achievement badges to visualize previously cluttered data, and used all that freshly polished whitespace to add in stats from friends. The team and I developed a sleek, slightly whimsical color palette using the original primary color and font that kept the interface clean while supporting the new gamified feel.
Researching and Iterating
Researching and Iterating
After looking at a few popular habit-tracking apps (Habitica, Rabit, and Fabulous), I saw that common practice was to put more recent stats in front of the user (daily, weekly) and to leave longer-term stats either in a profile or visualized in a simple way. This aligned with my instinct to give the success rate and progress stats less presence on the challenge screen and bring the weekly tracker and main action to the forefront.
I went through a few iterations in low and mid-fis, puzzling through the simplest way to give users the most important information at a glance and a clear, prominent action to take.
Where I Landed
Where I Landed
The Challenge Screen
The primary action button is larger and a different shape from the weekly tracker while having the primary button and completed days of the week share the same color to show their relationship.
Created a challenge card and gave it the job of keeping track of the overall progress and success rate of the habit, as well as displaying achievement badges that would be part of the future social/gamification elements.
Moved challenge settings to a dropdown menu below the weekly tracking so it was both easier to access and not cluttering the screen.
Challenge Confirmation
The success screen provides a clear confirmation via the checkmark overlay on the challenge card and the updated weekly tracker. The new simplified screen provided ample room to show a table with friends' stats.
Donation Screen
The penalty for a user not meeting their daily challenge was to donate to a charity of their choice. Elements on the original donation screen were spaced far apart, leaving the action of donating hanging in a meaningless void.
I took inspiration from the success screen and modeled the charity's card on the same dimensions. Even though the act of donating was the result of failure, I wanted to communicate the feeling of success for the user by their support of an organization doing good.
I changed the donation action from buttons to a slider to provide a substantial, meaningful action for the user to take.
I removed the cancel button now that I had provided a back navigation on screen. I also included the option to change the donation amount in the Challenge Options menu on the main habit tracking screen, so I removed them from the donation screen.
Results
Results
These designs tested well; users reported a clearer sense of continuity with the primary action (challenge completion/donation) from the Dashboard through confirmation screens.
This redesign is an excellent example of how intentional visual hierarchy can transform an interface. Clear and consistent visuals across flows provided meaningful insights and a more pleasing experience with less confusion and friction.
Page updated
Google Sites
Report abuse