Kelly Phillips

A digital workplace ecosystem



After being given a blue sky challenge to design for social innovation, my team and I dove into the subject of burnout in the workplace. After researching causes, we developed Foci, a workplace device and companion app that helps to block out distractions and improve focus amongst working professionals.
3-month project completed with Sarah Cohen and Allison Spiegel — 05/19 - 08/19


My responsibilities included collaborating on UX research, UX/UI design on the companion app and physical device.  


Online Research, Interviews & User Testing, Persona, User Journey, Mental Model, Rapid Sketching & Ideation, Wireframing, Prototyping, Building



Staying focused is hard

As new graduate students, my teammates and I were given a blue sky challenge: to design for social innovation. During a brainstorming session one afternoon the word “burnout” was written across a whiteboard. In the mix of 5 classes, dozens of hours of work each week, and finding time to learn new softwares and skills, we all were feeling overwhelmed with maintaining our work-life balance and keeping up with our mental health.

Our “a-ha” moment came when we realized that the stress we were all feeling was creating an inability to focus, and time that could be used productively was being wasted on worrying and procrastinating. My team decided to dive into the topic of focusing under pressure and how we might improve it.


How might we help to facilitate focus amongst working professionals in an increasingly chaotic world?


A digital ecosystem that uses focus blocks and breaks to filter out the noise



Identifying common disruptions

We began our research with a sticky note “map” to call out potential workday distractions. The market we decided to target was Millennials working in an office-like setting. We used this map to visually understand the types of distractions that appear day-to-day. We decided the disruptions we could realistically work to block out were surface-level ones: digital distractions and environmental distractions.


Personas & Storyboarding

A typical day at the office

My team and I then walked through a common user scenario for Dave, our primary persona. Dave is a developer in Seattle who’s life is riddled with disruption. His new job at a large office is a big change from his last job, and the open floor plan leads to constant disruptions from coworkers throughout the day. On top of this, Dave’s wife Linda just had a baby and he’s constantly on alert making sure he hasn’t missed a call or text from her. With all of these distractions, he’s having trouble keeping up at his new job and feels he hasn’t been performing like he used to. Dave’s story was used to pull out potential pain points that could be improved upon.


Competitive analysis

Gaps in the market

From there, my team and I dove into research to determine where weak points existed in a market that is saturated with products claiming to help facilitate focus. We found that no solution on the market works to block both digital and environmental disruptions, and that disconnects arose when combining two different products. Our goal was to create one ecosystem that worked together seamlessly to block all distractions that exist in a typical office setting.


User testing and interating to gain insights


Rapid Sketching

Sketching against opportunities

After pulling out opportunities for improvement, we did rapid sketch sessions for individual HMW statements we created. These HMW statements were based on the pain points we pulled out during our research, competitive analysis and user journey.


User Testing

Collecting user insight through testing

After sketching, we user tested initial MVP feature ideas to gain insight into whether or not these features would make Foci an asset in the workplace. We tested with 10 users using paper prototypes. During testing we prefaced what each feature did, and then asked if they could complete the feature’s goal with the given screen. Along with app testing, we tested the concept of a light signaling to users on their desk through pulsing, dimming, and changing color.


allowed + blocked lists

An “allowed list” and a “blocked list” to determine who can get through during a work session, and then setting an away message as an auto-respond when a message comes in.


app + website blocker

Blocking all apps and websites during a session, or choosing individuals ones. When user visits a blocked website, a graphic appears with a timer on how much time is left in their session.


work session timer

Allowing users to create a work timer that fits in with their schedule, and then setting a break length.


schedule integration

Importing an established scheduling system (e.g. iCal, Google Calendar) and using it to block time between previously scheduled events.


User Testing Quotes

"The allowed list and the blocked list is confusing. Why would I need to block individual people if I didn't want anyone to distract me?"

— Tim, mechanical engineer.

“I wouldn't use this if I had to import my schedule. It seems like too much work. I'd just use a timer app with my original work schedule.”

— Sarah, med school student.

“It would be great if this could recommend me times to focus my first time using it. I've never worked like this before and wouldn't know where to start with choosing a time.”

— Chris, programmer.

“I would love to see a rundown of my progress for the week. Maybe even see how I stand compared to my friends or the average person.”

— Kim, graphic designer.


Task Flows

Iterating based on testing

After reviewing our user testing notes, we iterated on our MVP features and narrowed them down to two key app features: a digital distraction blocker, and a work block timer. The goal of these features are to block out the most distracting digital notifications in a simplified way that users can set up once, and then activate day after day. The user can then set up their timer based on recommendations, previously set timers, or create a new timer.


Setting up digital distraction blockers


Setting up a work block timer


Device Design

Iterating and building the device

Due to the fact that our team had no engineering experience, we got scrappy and decided to prototype Foci’s companion device through simulation. I used my knowledge of model building and laser cutting to construct a base out of basswood, with engravings of our logo and a QR code that would be used to link the device to the companion app. To create some interest from testers, I linked the QR code to a website about our project for the final pitch.


Ecosystem Flow

Creating an ecosystem through digital and physical touchpoints

Along with individual feature flows, an overall ecosystem flow was designed to ensure ease of use amongst users. Once through initial set up and onboarding, Foci’s use cycle is simplified down to limit daily user interaction. The overall goal of Foci is to help users focus, and limiting the amount of daily set up was key in creating a successful solution.


Designing and building for blocks and breaks


Device Design

Keeping your environment chaos-free

Foci’s device is meant to block out distractions that aren’t digital. During a work block, the device will glow orange. Not only will this let you know that your work block is ongoing, it will let those around you know not to disturb you. When the block ends, the device will glow white and act as a desk lamp. When the user receives an incoming call or text from one of their prioritized contacts, the device will flash blue.


App Design

Optimizing workflows using blocks and breaks

We decided that one of the goals of Foci was to educate users and help them learn how they prefer to work. Using the “blocks and breaks” method, we allowed users to test out scientifically backed work blocks, such as the Pomodoro Method, or create a custom one of their own. With this feature, users who might be new to this type of work method can see if they prefer long blocks with fewer breaks, or repeating shorter blocks more often.


App Design

Silencing the digital noise

When testing MVP features, our feedback told us that what users valued more than anything was the ability to stop their urge to check digital distractions, like texts and social media. With the ability to turn off access to these distractions through iOS settings (content blockers), Foci can successfully enable distraction-free work sessions for users. An additional feature we included was a “blocked screen” with a timer, letting users know how much longer they have before they can visit their favorite sites again.


App Design

Proving its daily worth

Our research showed us that a dashboard showing how many notifications were blocked, daily hours focused, and helpful focus tips would be a valuable asset to users. For a new product, proving its worth to users is an important feature to have to show users why their time is best spent utilizing our solution, and not a competitors.

Future additions to the dashboard are currently being considered. Potential features include: comparing a user’s focus time against others, focus improvement over time, and utilizing data visualization techniques to create a more glanceable dashboard.


App Design

How it fits together

Here’s a look at how all the features fit together in the app’s information architecture. The goal of the IA was to reduce the overall steps to set up a distraction blocker, and then allow users to easily begin a focus timer each day with the “saved blocks” option.


Ecosystem Design

Limiting desktop distractions

A large part of distractions in a workplace come from what users do on their computers. A final portion of our design is a browser extension that mimics the app’s blocking mechanism. After signing into their account on the browser extension, the user’s setting with be enacted without need for setup.


Ecosystem Design

Creating a cohesive feel throughout the ecosystem

After watching my teammate develop the Foci brand, we took the key elements of the brand (illustrations, colors, fonts) and designed a style guide for the app. Stylistic decisions included icons, buttons, toggles, etc for iOS app screens.

We wanted the device and the companion app to feel cohesive and part of one family, so we thought through how to make the onboarding for the app mimic the physical unboxing experience for the device.


App onboarding


Device onboarding

Try the clickable prototype here:

Bringing everything together for the final pitch


Product Presentation

Promoting our brand through collateral

Coming soon



Pitching to the Boulder design community

The final part of my graduate program is a pitch night where my team got to show off our project and receive feedback. I, along with Sarah, pitched Foci to the CMCI Studio alumni network and Boulder design community. Part of my desire to pitch was to push myself out of my comfort zone and do something that scared me. Along with the pitch, my team and I got to answer questions about Foci and hear what professionals in the design community had to say.