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

Key Deliverables

User personas, storyboard and user flows, low-fidelity and high-fidelity designs, and final prototype.

Design Goal

Create an app that helps users be productive in a work-from-home environment and find a way to facilitate social connection that colleagues, classmates, and friends are missing out on.

Research Phase

User Interviews

  • Interviews with 8 participants representative of target audience

  • Created 2 primary personas, 2 secondary personas based on interviews

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.

Needs Identification

Task Management

Interviews helped me to determine four common themes of what users valued most for maximizing productivity.

Lighting

Ambient Noise

Taking Breaks

Competitive Analysis

Notion

Trello

Online Pomodoro timers

Many productivity apps on the market for managing to-do lists or setting focus and break periods, but few existed that combined identified core values all in one place.

Design Solution

WorkGlow

Mobile app with companion lamp that allows users to set their ideal focus settings:

  • Light

  • Pomodoro timer

  • Synchronized focus sounds/music

  • Color chat feature

Storyboard

Developed a visual narrative that would guide later development stages by allowing me 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 me 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 the design phase.

User Flows

From there, I began working through a potential user flow to match the users' experience with their needs and expectations.

In this phase:

  • 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 phase in Figma began with wireframes to determine a cohesive design style before implementing content and refining the details of the layout.

One of the 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 were used to create an initial prototype for validation testing.

This step allowed me to gather valuable insights before moving onto the development of wireframes. During testing, I took note of pain points and aspects of confusion for the participants.

UI Design

In the high-fidelity phase I envisioned a dark style with a modern look. This style was intended to correspond with the values of productivity and focus by reducing eye strain and conserving battery power.

Design Transformations

Low and mid fidelity design iterations

Glowmodes After:

Majorly streamlined set-up design to reduce cognitive load and prioritize key features.

  • Eliminated color change features

  • Prioritized timer setup

Active Session Screen Before:

Main user feedback was that they wanted to see overall session agenda, not just current stage.

Feedback also included that some additional controls might be useful, like fast forwarding to the next stage or rewinding if users want to skip ahead to a break or got distracted and want to start the work period over.

Active Session Screen After:

Improved active timer design shows breakdown of entire session with less distracting session controls.

  • Added session agenda

  • Added restart section, pause, and fast forward controls

Home Screen Before:

Featured recently used Glowmodes, pending color chats, pre-made community Glowmodes.

User feedback indicated a lack of understanding of Glowmodes and lack of need for so many options.

This feedback led to me scrapping the home page and focusing only on timer setup, and returning to task management idea from initial user research.

After: Eliminated Home Screen

Dual task management and timer screen for users to keep track of tasks during each working session, and check things off their list as they progress by toggling back and forth between those two tabs.

Trimmed down navigation to make timer/tasks and color chats the two main screens.

Glowmodes Before:

User feedback indicated color settings and music would likely be lesser-used, unnecessary features features.

Final Prototype

Digital prototype shows user onboarding and account setup, work session customization, tasks tab, work session insights, and Color Chat feature.