Foci: A Digital Workplace Ecosystem
Make productivity possible.
PROJECT OVERVIEW
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
ROLE
My responsibilities included collaborating on UX research, UX/UI design on the companion app and physical device.
DESIGN SCOPE
Online Research, Interviews & User Testing, Persona, User Journey, Mental Model, Rapid Sketching & Ideation, Wireframing, Prototyping, Building
PREFACE
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.
THE CHALLENGE
How might we help to facilitate focus amongst working professionals in an increasingly chaotic world?
THE SOLUTION
A digital ecosystem that uses focus blocks and breaks to filter out the noise.
RESEARCH
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.
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.
“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.
1. Setting up distractions blockers
2. 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.
ECOSYSTEM DESIGN
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.
