Focus Friend Dispplay.png

Focus Friend


Focus Friend



Focus Friend is an app that encourages focus and mindfulness. Our phones are one of the biggest distractions we have and can often decrease our productivity when we need to focus. With Focus Friend, users can adopt a friend that will help them achieve their goals. Users simply input an amount of time they want to focus for and set down their phone. The longer they stay off their phone, the happier their friend will be and the higher their productivity scores will be. But if they get distracted and leave the app, their friend will become sad until they return.


  • User Research
  • UX/UI Design


  • Sketch
  • Heroku
  • GitHub

User Research

This project began with the challenge of addressing mindfulness. Our team chose to explore mindfulness in the sense of focus and being present in the moment. We interviewed and observed people to understand how they focus when they need to, for example during studying, finishing a project, at work, etc. 


  • The biggest distraction when trying to focus on something is technology, typically cell phones. Some common methods for trying to overcome this are placing the cell phone on the other side of the room or turning it on silent. These methods are often unsuccessful because there are no repercussions for getting up and grabbing the phone or turning it back on.

  • People also face problems when they want to take breaks from focusing. Breaks typically end up being longer than anticipated and very unproductive.


Paper prototypes

Based on our user research, we decided to prototype an app that implements gamification and gratification in completing focus goals and viewing progress. Our paper prototype allows users to select a character and then either focus by time or set a specific goal checklist.  The users lock screen displays a ring that fills up the closer the user is to achieving their goal. 

Working by time.

Working by time.

Working by goals.

Working by goals.


  • Users want more gamification and interaction with characters
  • Goal checklist doesn't seem as useful as time goals
  • Implementing lock screen functions will be extremely difficult
  • Diary page would most likely go unused over time


We created low fidelity wireframes which implemented the changes we discovered after testing our paper prototype. We removed the lock screen function and now only have the option to focus by time. We also wanted to include more interaction with the characters by displaying the character during a focus session for the user to interact with. The longer the user doesn't touch their phone, the happier their character becomes. But if the user leaves the app, their character will become sad. 

FF lo-fi.png


Design specs.png

I created four different characters on Adobe Illustrator as well as different happy/sad versions of each character to incorporate into our app. I also created design specs to ensure consistency throughout the app. The look and feel we are aiming to convey is: simple, fun, clean, enjoyable, productive.


High Fidelity Wireframes

Our high fidelity wireframes no longer include a diary page because we found that users were unlikely to take time to write about each experience they have focusing. Instead, we added a stats page that displays the users previous percentages of time focused during each session. Also, because we removed the lock screen function that displays the users progress, we added a bar that fills up over time to display how much time has been completed during each focus session. 

Hi fi display.png


  • Users want confirmation of what to do after a focus session is over
  • Users were confused about which field is hours versus minutes when entering a time
  • Users suggested more real life motivation to focus with your character
  • Need to add a log in or sign up option
  • Make percentage bar more clear during a focus session

Final Design

Hi fi display 2.0.png


We developed our app using HTML, CSS, and JavaScript. We launched our app through Heroku. Due to time constraints and limited experience in computer programming, our final product looks slightly different than our final design wireframes. We spent most of our time making sure our app could properly keep track of when users leave the app and being able to filter through the different happy/ sad images at the proper times. We also spent a lot of time ensuring our stats page was correct and using real user data!

Screen Shot 2018-07-19 at 1.24.25 PM.png


One of the most valuable takeaways I have from this project is the power of paper prototyping. This was the first project I worked on in which we were encouraged to paper prototype fully fleshed out ideas and to iterate on those multiple times before creating anything digital. Although I was skeptical at first, I learned so much from paper prototype testing and it helped us discover so many changes we needed to make to our ideas. And the best part is, these changes could simply be taken care of by re drawing a screen!

The implementation portion of this project also taught me a lot. Although I am not the most technical person when it comes to computer programming, I think that understanding how an app or website is fully created is an essential understanding to being a UX designer or researcher.