Overview
Timeline: February - June 2022 (5 months)
End-to-End Product Design
MAX Focus is a self-guided task completion, phone application that allows people to block out their biggest cell phone distractions during specific times of the day or on demand.
Primary & Secondary Research
Analysis of Problem
Journey Ideation
Designing Screens
Test & Iterations
My Role
Figma/Figjam
Miro
Milanote
Adobe Illustrator
Tools Used
Problem Space
During a classroom observation, students used cell phones as rewards as well as distractions when feeling overwhelmed and unfocused. Students do not have a way to self regulate and turn off these distractions and temptations to allow for more productivity throughout the day.
Solution
As accessibility to personal technology devices increase, the following problem arises: children and young adults need to learn when and where cell phones should be used.
How might we support student driven productivity within the school day?
How might we support students’ ability to identify and regulate their biggest cell phone distractions?
Process
The process for this project included the following:
Research
Secondary Research
Heuristic Analysis- "What resources were already in existence to help students block out phone distractions?"
The findings:
Apps that would allow other apps to be locked for a set amount of time.
Additional apps that allowed for task completion and tracking.
Primary Research
Participant Overview- High School Students age 14-18 attending High School in Northern Kentucky.
A Field Study of a 10 question survey was given to over 50 students
User Interviews were conducted with 5 students based on their interest and varied levels of self reported dependency on their cell phones.
Analysis
User Insights
After interviews, I was able to gain insight about the benefits and challenges students experience with cell phone use throughout the school day. I used affinity mapping to help me quickly organize my results, here are my key findings.
Overall, a lack of efficient all encompassing applications for student use. This led me to conduct primary research in the form of user interviews.
Empathy Maps were then created with the information gathered to create an archetype user persona, Musical Mary. Musical Mary is a high school student who is a little more mature then her peers, she can see their misuse of technology in the classroom and does her best to set goals and organize her time.
User Persona- Musical Mary
Ideation
User Map- Red Routes
To create the minimum viable product (MVP) using the goals based on the “how might we” statements, I then constructed Red Routes based on tasks that would need to be completed to achieve our 3 main goals.
Mood Board
Creating a school based application gave inspiration for use of primary colors and san serif fonts. However, you can see below my struggle with trying to find the right color palette. Although this is inspired by a traditional school setting, I wanted this Max Focus to have a universal use and calming but fun design as well.
Too Bright
Too Light
Just Right
Visual Narrative
After experimenting with a variety of different themes I tested some image to receive user feedback that was not limited to high school students. I concluded that this application needed to be clean and clear to easy to use if it was going to be utilized by a wider audience. When thinking about what focus means, I was able to create a simple eye to represent the third eye’s power and wisdom, implying this application will help create clarity and control over your own time.
Design
Key Screens
Listening to interview feedback, this application needed to have all resources easily accessible or it would not be accessed when needed. The home screen should be a map of all the tools the app provides without feeling overwhelming. Key screens I sketched included the home screen, setting a timer, and a pop-up warning screen. These ideas transitioned into wireframes with little change.
However, Gorilla testing proved less is more when it comes to written instructions with younger users.
User Testing: Round 1
As you’ll see in the next few images, not only was the functionality of MAX Focus being arranged and updated by user feedback- the UI elements were going through a bit of an identity crisis.
Action Based on Feedback
New labels
Rebranding theme/color palette
Additional information needed
Feedback
User Testing: Round 2
Still inspired by the primary colors, I wanted this MAX Focus to have a more calming aesthetic, I played around with color and intensity. Secondly, I wanted to app to feel less clinical so toning down the colors was a must. Next, I created a friendly mascot, MAX the Zen dog, pictured on the top right of the home screen.
Action Based on Feedback
Check Accessibility for color contrast
Highlight toolbar icon when on specific screens
Remove buttons when not needed
Final Prototype
Iterations
After multiple rounds of testing and iterations, I was able to alter my design to reflect the users wants and needs in a design that would be more universal for a wider audience then just school age students. *(early rounds of prototypes are available upon request) With this being my first case study, I learned every step of the design process and along the way, I discovered the importance of testing early and often.