Umbrella is an extension to information sharing platforms that helps workers set healthy boundaries in their work life, build corporate community, and schedule robust routines.

This is a group project focused on the evolving needs of a remote/hybrid workers. It was completed as a part of our Human Centered Design graduate courses, for the Autumn 2022 quarter, at the University of Washington, in Seattle. Our team is Rob Kamin, Shay Gu, Sai Ma, and Joseph Carrillo.

There is a growing body of research that indicates a need to disrupt and innovate the way people work in a hybrid or fully remote setting. During our research process and design journey we identified many key concerns, but the needs of users can be divided into two main categories: (1) personal needs and (2) professional support from colleagues or managers.

On the basis of these findings, we pose our design question...

Research and (Persona) Development

Our team performed three core research methods. (1) Secondary research from peer reviewed articles that we're written in the last 36 months. (2) We completed an in-depth competitive analyses to understand how other products are attempting to innovate or solve the hybrid/remote work challenge. (3) Our team conducted in person and remote (no pun intended) user interviews to better understand the needs, wants, goals, and motivations influencing remote workers first-hand.

User Interviews

Our team conducted eight 1:1 moderated interviews, and analyzed data with an affinity map to identify key Quotes, Needs & Wants, Goals & Motivations, Frustrations, and Behaviors; we then grouped responses based on associated topics and common themes.

Our interview goals were:

• Learn more about stress related to remote work settings and environments.

• Understand how users manage their stress and what tools they use.

• Identify gaps in existing tools or solutions that could offer potential solutions.

• Develop our design questions and design criteria based on user goals, motivating factors, and current behaviors.

Personas

Using data from the affinity map and key findings from our secondary research and competitive analysis, we developed three distinct personas (Sam, Jenn, and Mila) who are either fully remote or hybrid workers.

Lets learn more about them.

Sam - a new hire who wants to build trust and friendship with new colleagues.

Jenn - a working parent who wants to separate work time and family time, and manage her multitasking better.

Mila - a collaborator who wants to work more efficiently and effectively with their team.

The Research and (Persona) Development process was the critical step our team needed to begin the next phase of development, and trigger our creativity to solve real world problems.

Brainstorming

Our team brainstormed and sketched over 20 ideas for the project based on user pain points and possible opportunities for innovation. We then converged them into three distinct directions based on our three personas: collaboration, personal management, and social connection.

Find all of our sketches here.

Design Goals and Storyboards

Through brainstorming, sketching, and research we refined a set of design goals.

Based on these four design goals, we created four related storyboards, corresponding to each goal: balancing work and life, helping colleagues understand their personal workload, utilizing a personal assistant, and building connection.

User Flows and Information Architecture

Building on the storyboards, we created four job stories and user flows to further develop the potential operation of a developed app extension, and identifying features or requirements not found in the storyboard.

Following the user flows, we refined the logic, removed some features, and merged or grouped similar processes to build our information architecture.

Based on our research, persona development, and ideation - the core prototype features were: (1) help users share their workload and work status in real time with their team, (2) help users communicate with their team members, and (3) build healthy work habits and boundaries. We conducted an interaction test within our team after we finished the first version, prior to external user testing.

Homescreen

In the first version, we wanted users to be able to change their status via the top navigation bar, input hashtags for quick commands. However, we chose to make a sidebar that can be hidden to reduce screen footprint and updated the color of the tab bar will change when users are in different status. When the full screen is selected, all features are displayed.

Rules

We want to give users freedom to configure rules, such as adding new breaks, changing the duration, status, etc. Compared to the first version, the full-screen page allows for a richer selection of options and room for modification.

Workload Capacity

In the first version, workload capacity was presented in the form of a chart, and the user had to open a calendar page which showed the time of all team members. This made it difficult for users to observe their own workload. So, we decided to make this section more intuitive in version 2, and show the workload information of the individual user.

Team

For the second version of the team feature, we used more page space to show the current status of each member and their position in this team, also the team structure. This way when there is a problem users meet, they can know who to contact to quickly solve the problem.

Usability Testing and Improvements

Usability Tests

We conducted 6 usability tests with participants who are currently working remotely to measure friction points, navigation errors, success rate, and natural click paths. The results suggested that participants liked the overall concept and features; however, a majority of our testers struggled with functionality of key areas of the prototype. These guided our improvements and design decisions.

To improve the user adoption flow we began developing an on-boarding experience to help first-time users contextualize our features quickly. Check the full Usability Findings Report here.

Improvement 1 - Set Workload Capacity

Improvement 2 - Location of the Status Bar

This section provides an overview of critical design decisions made while developing the Umbrella application. With each design decision we considered the usability study findings, the personas and supporting research to guide the implementation of these decisions.

Decision 1: Size and location of the sidebar

After receiving usability testing results and participant feedback on the design, we concluded that our original design of a status bar at the top of the user interface would interfere with MacOS users who access the toolbar at the top of their UI. Our second iteration was to create a minimal sidebar that could expand or retract when selected. This sidebar was originally anchored to the upper right corner of the UI, but was moved to the left hand side to reduce travel between clicks for core functionality. Because we wanted the user to easily view their status, we also changed the final prototype of the status bar from a grayscale to instead reflect the color of the user’s current status. This allowed the user to check their status at a glance.

Decision 2: Set workload capacity goals

Our initial design for the Umbrella application included a capacity workload feature that would synchronize with a users calendar and scheduling assistant. Insights gathered from usability testing suggested that users found the design confusing at first. At least 3 users were unsure as to the intent of the feature and how it would relate to their workload. We designed an initial flow for on-boarding new users that better communicated the design and functionality of the feature. We also used different colors to indicate the progress for each task and functionality with scheduling and the calendar.

Decision 3: Syncing with other platforms

We found that while users enjoyed the functionality of the status bar features, they needed another way to be able to set their status that would allow for alignment across platforms. We designed Umbrella to allow users to select their status and to sync their status across multiple communication platforms. Users who utilized the break would automatically have their status updated synchronistically across their communication platforms (Slack, Teams, Google, Discord).

Decision 4: The ability to create rules

Initially our design incorporated a virtual assistant feature, but users needed a way to further customize the rules by which the assistant operated. We created rules to allow users to quickly select from a template an operation that would change their schedule, to-do list or set a reminder on a recurring basis.

Decision 5: Onboarding screens

The functionality of Umbrella was not easy to communicate with inline text or guidance from an observer during the usability testing. We found that many of the functionality of each feature or rationale for each feature was not intuitive to the users tested. Therefore, we created an initial user onboarding flow that would provide helpful guidance and context to first time users. Many of the follow-up assistance to users will be provided in a help section and with inline text within the UI.

Reflections

Creating a design solution to the multitude of problems many remote workers are facing was challenging on several levels. Initially, each member of the team had varied experience with the design thinking process and we didn’t know our strengths and weaknesses as a team. Early in the process, we learned through interviews and testing methods that remote workers are struggling with setting boundaries, making connections and creating healthy habits.

Making decisions as a team is challenging and with time constraints, we had to quickly make choices on many elements of the design and study. Before diving into solutions, we glanced at the myriad of design paths that our team could take. Taking these first steps was a leap of faith, our grade and final product would be determined by our decision. As we worked to design a solution, each team member grew in unanticipated ways. We too were collaborating remotely and were experiencing some of the pain points that our personas felt. At times, it was difficult to find a common meeting time or to hit our deadlines.

The outcomes were surprising. Each member of the team contributed in ways that pulled Umbrella together as a working solution to the design challenge. Ultimately, a designer's job is not done in a vacuum. We must collaborate with others to complete the necessary research, ideation and designs to make a product complete. If not, designers are leaving opportunities for ideas on the proverbial table and potentially creating a product that is dead upon arrival.

Design is an iterative process. While Umbrella is the culminating design for our project, there are many iterations that could follow. After more user research, we could find a need to refine the functionality of workload capacity or that the product would serve better as an integrated feature in another platform.