Redesigning Habit List

I regularly use Habit List, a tracker that helps me build and maintain habits. Over time, I discovered that a lot of functionality was obscured in favor of aesthetic minimalism, regularly frustrating me. Hence, I decided to completely redesign the app from the ground up.

Generative Research

I defined the problem by better understanding what I think about the app and doing some basic testing. I’d hand my phone to a friend and quickly explain what the app does, asking them to perform a specific task. For example “Can you create a habit called ‘walk the dog’ and put it before ‘meditate’?” I observed them and took notes, continuing to ask followup questions like “What did you expect to happen?” and “Did you face any difficulty?”.

Adding to generative research, I wanted to find out what other users of the app think, so I read all app store reviews. I noted top feedback, paying close attention to reviews along the lines of “I love the app, but this one thing annoys me…” I then broadened my research to Habit List’s competitors, installing 15 similar apps. This gave me a range of insights from a high level architecture of the different ways the problem can be approached all the way down to specific microinteractions.

From this research, I created list of things the app does well and things that need improvement. For example, I thought that the app is very good at focusing on the habits that need to be completed today and making it easy to complete them. However, something like missing a habit (used when you want to remove it from the list because you already know you won’t finish it) is performed using a difficult to discover feature.

Storyboarding & UX

I storyboarded 9 different flows based on my research and experience before deciding to focus on 5 core screens: Habit List, Habit Details, Settings, Stats, Lock screen. I followed these steps in my process.

• Pen & Paper: I used pen, paper and some home made cardboard templates to quickly sketch ideas, keeping the fidelity as low as possible. I would use other apps and mobile pattern websites as reference at this stage.
• Prototype: Critique and select the best sketches to transform into static mockups in Sketch. I imported those mockups into Invision to create clickable prototypes and used Framer for more complicated interactions.
• Test: I would test the prototypes with friends as I’d done earlier. I handed them my phone and asked them to perform a task, followed by a few questions to understand what they felt and thought.
• Decide: I chose the best option among the many ideas, showing my work to friends for critique.

Visual Design

My general visual design process followed pretty similarly to the UX process, I’d reference Dribbble, and other designer’s portfolios for ideas and inspiration. I’d then diverge and quickly mocked up different visual treatments while keeping a copy of each iteration. Alt+drag and ⌘+d in Sketch were my friends in this stage. Some of these visual designs actually required small changes to the layout and control schemes that were decided earlier.

One key consideration when working on visual design was color blind friendliness. One of the issues I have with the original app is that the green and orange-red used are difficult to discern between. Having a color blind roommate was an asset at this stage. I could easily find out if things didn’t work.

I chose the top few visual treatments and mocked up the core screens to see how they worked across the product. I was also lucky to have my work reviewed on video twice via spec.fm’s inspect series.

The Finished Product

Revealing Hidden Views

In the old app, the date picker (used to view older dates), list editing, stats and settings were all hidden behind a single hamburger-esque menu rendered as a back button. In my redesign, I placed them on the main screen and added a tabbar

Revealing Skip & Miss

In the old app, Skipping and Missing habits was only possible through a modal that is accessed by long pressing a habit. In my redesign, I put skip and miss functionality in a swipe menu and also in the habit details screen.

Calendar View

In the old app, viewing older dates required repeatedly switching between the history and today views. Also, accessing dates older than a few days old was tedious. In my redesign, I integrated a calendar view inspired by Sunrise Calendar that switches the currently viewed date. It’s accessed by clicking the calendar icon on the top left of the main screen.

Try out my framer prototype.

Settings Screen

I removed extraneous features and items from the settings screen and created a new set of icons to fit my overall visual style.

Lock Screen

I made a redesigned lock screen to look more like the iOS default and included touchID (a feature requested by many people in iTunes reviews).

Try out my framer prototype with the code 1234.

Vacation Mode

Many people requested a way to temporarily pause the app while on vacation, effectively removing penalties for not finishing tasks. I tried many different ways of indicating it including using banners, different colors and alerts. I finally came up with this idea of showing a vacation themed pattern in the navigation and status bar.

Try out my Framer prototype.

Stats

I created a set of screens to show stats. This was a lengthy process that required understanding the type of analysis that could be provided given the data collected and then narrowing it down to the most important. Then I had to visualize that data.

App Icon

I finished the process by redesigning the app icon. I cleaned up the curves of the infinity and changed the color of the circle to match the gradient used elsewhere in the app.

Final Thoughts

Learnings

• A seemingly simple app actually can have a large number of screens. I didn’t do a good job of estimating how much work was involved and spent much more time that I originally planned on this.
• I learned how to create prototypes in Framer and Invision and to do basic testing with them.
• I learned the benefits of keeping files, symbols and shared styles organized from the beginning instead of cleaning them up later.
• I learned about creating a cohesive set of icons by creating 6 icons for the settings screen and 3 icons (with 2 states each) for the tab bar.

Things I would do differently

• I think the lightness and whitespace of the original was lost in mine. I would try to stay closed to the original visual style while still making the same changes in UX.
• I would ask for feedback earlier and more often.
• I would show in-process work to others instead of showing finished polished work so that I can catch problems earlier.
• I want to to stray more from iOS defaults to explore non-standard interactions and visual design.
• I would also think about how to design the app for Android (following Material Design) since many apps have an Android counterpart.