Focus Point


We’re constantly fighting distractions and procrastinations when we’re trying to get work done on the computer.


Woman by Andriyko Podilnyk

Everly Mcdermott, 23

Everly is a college student who works in the city as a hairdresser. She goes to classes 2 days a week and picks up shifts at the salon for 3 days. She often times tries to get all her schoolwork done before class because she doesn't want to miss out on spending time with friends on her days off.


Tech Experience: ►►►►►

Approx. Activities: 10/wk

Man by Ludovic Migneault

Rick Rosa, 42

Rick works at a hospital during nights and cares for his two teenage boys. As a single father, Rick juggles with work and keeping up with his kids' schedule. Rick used to be a runner and has lost his motivation.

Budget: ►►

Tech Experience: ►►►

Approx. Activities: 2/day

Woman by Adam Wigner

Hafsa Mccabe, 30

Hafsa is an accountant at a law firm. She wears many hats and works closely with an attorney with many clients. Hafsa doesn't like to let anyone down and makes herself always available to answer questions or help out on extra tasks.

Budget: ►►►►

Tech Experience: ►►►►►

Approx. Activities: 5/day

Grandpa by Alberto Barbarisi

Brayden Paul, 78

Brayden is retired and widowed. After his wife's passing, Brayden has lost motivation to do anything. He gets easily confused with technology but wants to try to be better for his late wife.

Budget: none

Tech Experience: none

Approx. Activities: 2/wk


Plan of Action: Design an environment that helps people focus on their work to be done.

User Map

Figuring out how the user will move through the app keeping in mind key features and solutions to problems from our research. It basically shows where a user can go starting at the login screen.

Focus User Map

Initial Wireframe and Prototype

Low-fidelity wireframes. It helps us figure out a quick layout of the product. We'll do this to all of the product screens, but here is just an example of couple of them.

When the wireframe is all done, I can make a prototype to show the flow of the product.

Focus Point Prototype

Color and Inspiration

The goal of this product is to create a headspace of attentiveness and stimulation. I chose to go with teal as my main color because it combines the calmness and inspiration of the blues and the serenity and satisfaction in the greens.

Multi-Vacation Wireframe

Serene Mountain

Font: Roboto

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z


Initial Designs

After getting the main layout done, making the high-fidelity wireframes are probably my best part. This brings the color and life to my wireframes.

Focus Wireframe

User Testing

At this point, I can get feedback by testing on components. I'll exemplify doing research on the settings component. I'll outline the dates of the experiment, what I'm testing and what I hope to gain.

I'll detail who and how I'll find participants and what questions I would want to be answered from this.

Questions like:

  • How can users access the settings options easily?
  • How often does a user visit the settings pages?
  • Which setting layout design do users use more?
  • Are users satisfied with the options and setting location?
  • As a college student, I want to organize my schoolwork, work schedule, and friends, so that I am not stressed and cramming everything at the last minute.

    Everly M.

    As a working father, I want to keep track of my kid's activities and find time for myself, so that I am the best father I can be.

    Rick R.

    As a busy law firm accountant, I want to learn to break up my time, so that I can stay and complete tasks without stressing so much.

    Hafsa M.

    As a recent widow, I want to have motivation to do my daily activities, so that my wife would be proud.

    Brayden P.

    Final Design

    At this phase, we'll do our last research with people who will receive the final version of the app. Note the patterns and themes we're seeing within all the results gathered. We go through the product one last time for adjustments.

    Focus Final Design

    This portfolio was designed and developed with 🖤 by me using Next.js and Tailwind CSS.