Designing a mobile app for a smart lamp to help users stay focused while working from home.
Team
Michelle Fan, Cindy Huang, Ciara McCormack, Natalie Lampa
Role
Design Lead
Timeline
Fall 2020, September 1st — December 8th (14 weeks)
Skills
User Interviews, Sketching, Wireframing, Prototyping, Usability testing, Iterative design
📌 Background
Problem Context
In my Interaction Design Studio course, our class was given a foundational task: Design a socially connected product.
By September 2020, I wasn't the only one burnt out and Zoom fatigued; everyone I knew was struggling to adapt to working from home and hanging out virtually. I wanted to design a product that could help people stay focused while also keeping in touch with others. A way to stay motivated and socially connected, without the use of mentally taxing video chats or social media.
Inspired by the pomodoro technique, a novel color chat app, and research on how lighting affects productivity, my team set to work designing Workglow: A smart lamp that works on a productivity timer and lets you send your friends colors through the lamp. We would follow the human-centered design process to design a companion mobile app for such a lamp.
In order to stay focused and combat Zoom fatigue, students and professionals need a work-from-home environment that encourages productivity and lightweight social connection.
💻 Final product
WorkGlow Mobile App
📚 Research & Design
User Interviews
My team began exploring the needs of our users by interviewing 15 WFH students and professionals.
“I hate the dynamic of virtual study groups … I like study groups in-person but they can be distracting. I get a lot more done by myself … If I know my friends are all hard at work studying, I’ll be more inclined to study.”
“I don’t measure when I take breaks by how long I work. I base it on objectives. If I finish like a subsection, I’ll take a shorter break, like a 5 minute break. But between chapters I’ll take like a 20 minute break … I’ve tried tomato timer before but I found that I like to work for longer than 25 minutes at a time.”
— Zac, Medical student
Key elements of our product determined from my share of interviews were 1) creating a sense of 'group studying' from afar through showing friends working on color chat, and 2) an emphasis on customization and flexibility with our productivity timer.
Sketching Scenarios
In our early sketches, we ideated different scenarios in which our product could play a role or different ways it could make an impact in our product domain. Sketching scenarios helped determine the features we wanted to offer.
User Flow
A user flow guided the initial conception of our project. We imagined three main areas of focus: Color chat, where users could send colors between their lamps; glow modes, where users could choose music, lighting, ambience, and a timer to create a customized work session; and a user profile with data revealing the user's productivity habits.
View full resolution user flow on Miro
📝 Prototyping & implementation
Paper Prototype
When paper prototyping, we broke up our product into sections: signup, color chat, glowmodes, user profile, and adding friends. Because we could not meet in person to create one holistic paper prototype, we divided these sections among us and conducted usability testing on our own mini-prototypes within our bubbles with our close friends and family.
Paper prototypes by my teammates Michelle, Natalie, and Ciara. Mine got lost 😪
Wireframes
In our wireframing stage, we refined our flows for each task based on findings from our paper prototype testing. We had multiple ideas for what a home screen could look like and how our customized work sessions would be implemented. We narrowed it down to which options we liked best in the hi-fi prototyping stage.
Signup flow wireframes designed by me; all others designed by my team.
High-fidelity Prototype
We defined our first v1 high-fidelity prototype based on our wireframes. With a hi-fi prototype in hand, we conducted further usability testing. While color chat would still have the same bones, most of our other v1 frames would eventually be streamlined or entirely scrapped.
Above screens designed in collaboration with my team. View v1 Figma prototype
Design Iteration #2
After conducting further usability testing with our hi-fi prototype, something still didn't feel right with our product vision. Our glowmode concept felt convoluted, like we were cramming too many ideas into one feature. Setting custom lighting for a work session felt awkward, like assigning a custom volume level on a playlist, and we spent more time recreating Spotify than building out our productivity timer.
I decided to go back to the drawing board and sketched out ideas for a stripped-down version of WorkGlow just focused on the productivity timer, and ideating ways to give our chat UI a distinct style.
Based on my sketches I designed a refined productivity timer to replace glowmodes. The new timer better aligned with pomodoro principles, incorporating a more sophisticated work/break system and task tracker. As I designed the timer, I built a dark theme color palette based on dark UI inspiration I found online, and developed a typography hierarchy based on a Design System building video series from Figma. I opted to build the type system around the font Work Sans...just a coincidence :)
With a design system in hand, I finished the new productivity timer; redesigned the main screens for the rest of the app to match our new style; and fleshed out our prototype with an expanded first-time user flow, settings page, and insights feature. Several decisive design choices were made in the jump between v1 and v2.
- We cut the homepage because a 'newsfeed' or exploration/scrolling element clashed with our goal to support productivity and focus.
- We cut glowmodes in favor of the streamlined productivity timer based on findings from usability testing that suggested the feature was too complicated.
- We cut the user profile and split its key features into two buttons on the work & study timer tab. Stats and data became the insights page, and editing basic profile information seen in color chat went under settings.
Above screens designed by me with help from my team.
WorkGlow logo designed by my teammate Michelle Fan.
Artwork from Drawkit; Icons from Iconify; Avatars from UI faces.
🕑 Looking forward
Impact & Considerations
WorkGlow, our smart lamp and companion app, has the potential to greatly support remote students and workers during COVID-19 and beyond. Its productivity timer features are flexible and customizable and support users in setting their minds to accomplishing their work for the day. Color chats also offer a unique touchpoint between friends and coworkers that stands apart from mentally taxing Zoom calls and distracting group chats.
An important consideration in our product design is current issues in WFH culture exacerbated by the COVID-19 pandemic. Remote students and employees today report feeling unable to get away from work and a greater pressure to be productive. Our product's emphasis on clearly delineated work and break periods helps break up the remote work day into defined periods of work and play to better combat the unhealthily blurring lines between home and work.