WorkGlow
WorkGlow
WorkGlow App Design
Interaction design project to practice problem-solving skills and end-to-end product design.
At a Glance
Problem
Students and professionals working from home during COVID-19 are in need of a solution to maintain focus. Create an app that helps users be productive and stay connected to colleagues in a work-from-home environment.
My Role
UX Researcher and Designer
Team of 4 students
Key Deliverables
User personas, storyboard and user flows, low-fidelity and high-fidelity designs, and final prototype.
Design Solution
WorkGlow is a smart lamp and companion mobile app designed to optimize focus and boost productivity. The design features mood lighting via the physical lamp, Pomodoro Timer techniques, and a Color Chat feature via the app to communicate with friends and colleagues.
Research Phase
Storyboard
Our design team developed a visual narrative that would guide us in our later development stages by allowing us to step into the shoes of our potential users and imagine what headspace they would be in to use our product.
This phase of the project allowed us to gain perspective on our users' guiding thoughts, behaviors, as well as motivations to use WorkGlow, which was incredibly valuable to reflect back on throughout our design phase.
User Personas
Interviews with 8 participants representative of our target audience
2 primary personas, 2 secondary personas
We used these personas as a baseline model for user flows and all designs going forward throughout the entire product development process, specifically when considering user journey and what pain points might be involved.
User Flows
We began working through a potential user flow to match the users' experience with their needs and expectations.
In this phase we
Simplified interactions
Restructured the hierarchy of home page content, customizable features, and personal profile content to ideal locations
Finalized user flow through onboarding, customization, and work session stats
Design Phase
Wireframes
The design team collaborated on wireframes in Figma to determine a cohesive design style before implementing content and refining the details of the layout.
One of our initial main screens was the "Glow Mode" setup in which users could customize corresponding light, music (connected through their preferred music streaming service), and timer settings for a focused work session.
Design Sketches
Initial sketches of to-be-designed screens that we used to create an initial prototype for validation testing.
This step allowed us to gather valuable insights before moving onto the development of wireframes. During testing, we took note of pain points and aspects of confusion for our participants.
UI Design
In the high-fidelity phase we envisioned a dark style with a modern look. This style was intended to correspond with our values of productivity and focus by reducing eye strain and conserving battery power.
Changes following this iteration:
Eliminated initial homepage style to streamline the user journey
Reduced customizations to only timer settings in order to reduce confusion and cognitive overload for users
Implemented "Tasks" tab alongside work sessions to help users keep track of their productivity
Final Prototype
Digital prototype shows user onboarding and account setup, work session customization, tasks tab, work session insights, and Color Chat feature.