Hatch App

PROCESS PAGE

Research + App Foundation 🔬

I was inspired to choose this topic because of the prevalence of phone distractions - both from my personal experience and the experiences of those around me. I saw an opportunity to create my own modern solution to this modern problem.

I began by researching the problem of cellphone addiction itself, which helped me to narrow down my target audience to teens and young adults struggling with anxiety, depression, ADHD, and other emotional hurdles that are shown to increase the likelihood of cellphone addiction. This also provided me with quantitative data to show to potential stakeholders.

Then, I looked into competitor apps and noted their key features, brand identity, and the feedback they received on the app store. This data helped me to craft my brand strategy, user persona, key features, and wireframe. During the design process, I inquired friends, family, and classmates for more data to inform my design decisions.

Competitor Analysis Findings

Features:

• Social participation in apps with group features.

• Organization options for those seeking to track habits.

• In-app earning/rewards system.

Branding Elements:

• Orange and green are prevalent.

• Sans-serif typefaces with rounded edges or at thin weights are often used.

• Thematically tied to familiar metaphors for growth and motivation (ie. plants growing, fire burning).

Next, I looked into usability principles that I wanted to keep in mind while designing. I used these principles + the features noted in the competitor analysis to determine what features to include in the app.

Core UX Principles:

Goal Gradient Effect - This effect states that people move faster towards a goal when they know it’s close by. In the case of Hatch, it’s important to show people their progress in order to motivate them. Hatch incorporates this effect with its gamification of focusing, countdown timers, and achievements.

Zeigarnik Effect - This effect states that people tend to remember uncompleted tasks more, so having the option of safely “failing” a Hatch focus session would be an opportunity for motivation.

Parkinson’s Law - This law states that people will adjust their behaviors based on time scarcity (or lack thereof), so a visible countdown timer helps users break up their time and set actionable goals within the time they set.

Deciding on Key Features:

• Core Functionality

  • Focus timer home page

  • Tags to organize content

• Motivators

  • In-game currency

  • Digital clothing/accessories shop

  • Achievements page

  • Progress visualization page

  • Motivating timer phrases and quotes

• Social Features

  • Group focus timer

  • Focus groups

  • Friends list

  • Profile

  • Social titles based on achievements

Branding 🎨

During the identity forming stage, I pulled from my qualitative research of competing apps. I experimented with different design directions to start the iteration process and help me narrow down the visual language. 

I ended up with a brand personality that is grounded and clean, with energetic jolts of light green and orange as dynamic, motivating colors. To reflect the clean, friendly feeling I picked a geometric sans serif for body copy and a more rounded, organic sans serif for headings and display. Finally, I chose the name Hatch because it represents the action of breaking free from confines.

App Design 📱

I researched features and components and asked for input from those around me to confirm the layout’s usability before jumping into the visual design.

Sitemap

Lo-Fi Prototype

Home Page Style Iteration

Here, I’m working to solidify the app’s visual identity. I had to let go of my initial concepts in favor of a stronger direction.

Hi-Fi Prototype

This is a walkthrough of the most recent iteration of the design! ⭐️

< Back to the Hatch App