HABIT

Habit presented itself as a project from conversations with friends about the time and money we spend on apps - often the ones we open and close to take a peek at many times throughout the day, without even realizing it. What if there was an easy way to check on those habits, set goals, and be more mindful? Habit is for anyone looking to save time and money, or wanting to cut back on phone use for any reason (including because you just read that article on why boredom is good for you).

Preview of Habit app and marketing site

PROBLEM

It’s safe to say that most of us habitually check our phones for alerts, for browsing social media, and everything in between. That screen time adds up, and many of us are seeking out ways to be more mindful. Habit was created to be a non-intrusive solution for anyone looking to track their app use.

SOLUTION

Results from user research and competitive analysis show an opportunity for Habit. Habit should offer the ability to customize which apps are tracked, indicate number of app opens, and show total amount spent within apps (such as food delivery or rideshare services). Users will use Habit to achieve a variety of goals - from spending less time on social media to maintaining boundaries or saving money. Because of this, the design and experience of Habit should be welcoming and simplistic so users can quickly customize the app based on their desired outcome.

PROBLEM

It’s safe to say that most of us habitually check our phones for alerts, for browsing social media, and everything in between. That screen time adds up, and many of us are seeking out ways to be more mindful. Habit was created to be a non-intrusive solution for anyone looking to track their app use.

SOLUTION

Results from user research and competitive analysis show an opportunity for Habit. Habit should offer the ability to customize which apps are tracked, indicate number of app opens, and show total amount spent within apps (such as food delivery or rideshare services). Users will use Habit to achieve a variety of goals - from spending less time on social media to maintaining boundaries or saving money. Because of this, the design and experience of Habit should be welcoming and simplistic so users can quickly customize the app based on their desired outcome.

DISCOVERY

DISCOVERY

Habit is a personal project I led from start to finish with guidance from a mentor. After the initial idea was concepted, I began with completing a competitive SWOT analysis and gathering data through a user survey. This research showed an opportunity for Habit, so I moved forward in developing user personas, the foundation of the app’s design and features.

project persona project persona project persona
User stories
User flows

VISUAL DESIGN

VISUAL DESIGN

As I was beginning on wireframes for Habit, I also developed a brand and style guide. I sketched logo ideas and one jumped out - a series of circles, each less “full” than the one before it. The logo represents the decrease of time and money spent on apps (our main goal of Habit), and also the three buckets of information we’ll be summarizing for users - time spent on apps, number of app opens, and total money spent on apps. As for typography, I selected to use Comfortaa for its geometric design which reflects the circles in the logo and Open Sans for its humanistic characteristics that lend a friendly feel to the design. For the color palette, I knew I wanted something that felt fresh, warm, and calming - I ended up using colors that reminded me of a sunset, because users should feel that Habit it an app helping them maintain balance and not an app that feels stressful.

Habit styleguide

I took elements from my sketches and created wireframes for each view within Habit based on user flows. I started with the idea of an easy to interpret summary screen and a visual of app use over time. With mentor guidance, I made edits to the wireframes before incorporating the full visual style into a mockup. Main edits included adding clarifying text and adjusting spacing.

HABIT APP

Habit app wireframes

MARKETING SITE

Habit app wireframes

I used Sketch to create mockups for Habit, and went through multiple rounds of user feedback and testing. In this iteration of Habit, I utilized the color pallette to help users keep track of stats throughout the app. Through user testing. I learned that some of our potential users were having a difficult time finding where to set their goals, or even realizing that this was an option. Based on this information, I decided to incorporate goal setting into an onboarding process. User testing also lead to fine tuning the placement of the timeline and re-grouping items in account settings. After these changes, Habit was more user-friendly and intuitive.

I also created a responsive marketing web page design for the Habit app. I followed the same process: first wireframing and then adding the visual style. The final step in the project was using html and css to create a fully responsive web page that replicated the hi-fidelity prototype created in Sketch.

CONCLUSION

The completed Habit prototype has a simple, easy-to-navigate interface that is customizable for the variety of user needs being met. I discovered that the simplicity resonated with users, and they found it helpful to see the stats presented in a variety of ways. The challenge for me was keeping the design uncluttered and uncomplicated, while also giving enough context so users could understand the information.