Qubicle Case Study

the new normal

Since COVID-19, remote work has become the ‘new normal’ for many employees across North America. With tech giants such as Twitter, Facebook and Shopify announcing plans to support remote work indefinitely, this ‘new normal’ is here to stay.

When speaking to my friends, most enjoyed working from home. They had productivity products such as Google, Slack, Zoom, and Trello to support remote work. Yet something was missing. As one friend put it, “All these tools are great, but they’re only 90% of the way there.”

the missing perspective

As I started researching, I realized current these tools were missing the ‘human’ aspect. According to Buffer’s 2020 State of Remote Work report, many work-from-home employees struggle with collaboration, loneliness, distractions, and other personal challenges.

In addition to tools like Trello, Microsoft Teams, and the age-old emails, remote employees need tools that help them stay connected to their colleagues and workplace and while they are physically apart.

design challenge

“How might we help employees working remotely feel more connected to their company’s culture in order to improve the work-from-home experience?”

primary research

I began this project by conducting interviews to gain rich insight into users’ needs, behaviours and attitudes. While quantitative research gives us insight into the prevalence of a problem, qualitative research provides a deeper picture as to why that problem exists in the first place.

research strategy

For this project, I conducted three 30-minute Zoom interviews.
‍
Participant Criteria:

Currently or previously working-from-home during the pandemic
Worked from an office prior to the pandemic
Not in a manager role (to explore in further research)

assumptions

Before beginning research, I needed to map out my assumptions to understand my own biases and what needed to be validated by research. When crafting my interview questions, I prioritized assumptions that were more important to the success of my project and easiest to validate through qualitative research.

synthesis

After conducting interviews, I classified raw quotes as either pain points, motivators, and behaviours, as these three categories indicate areas for design intervention.

Once the data was classified, I found 6 emerging themes among quotes:

communication

How well employees talk to each other

productivity

How well employees accomplish their projects

relationships

How connected employees feel to one another

digital fatigue

How employees feel using technology all day

work-life balance

How employees feel converting their personal space to work space

COVID-19 and mental health

How employees feel about the pandemic

analysis and insights

From these themes, I was able to pull out key insight statements that best summarize the results from my research.

response time

Teammates are not as responsive to online messages so productivity is slowed down.

physical space

Employees are more motivated to work with colleagues and managers in the same physical space.

bonding

Employees valued activities that helped them bond and collaborate with their coworkers.

disconnecting

Working from home gives employees a lot more flexibility with their day, but they struggle to stop working at night.

project reflection

As someone familiar with quantitative research during my Psychology studies at UBC, learning qualitative research was a particular highlight. By conducting interviews and synthesizing data in the form of raw quotes, I was able to learn about the value of knowledge produced outside of the scientific method.

Now that I have learned more about UX research and qualitative methods, I would have done two things differently during this project to produce more emotional data.

First, I would have asked more emotional questions. I struggled to understand the ‘why’ with mostly behavioural data points. Going forward, I plan to ask more questions such as “can you tell me about a really great / challenging day you had at work recently?” or “how would you feel if…”
Second, I would have asked more follow-up questions to emotional answers. For example, why do employees feel “motivated” when colleagues are around? What does motivation mean to them? What is it about colleagues that encourages motivation? Insights here could lead me to design digital solutions that capture the essence of an employee's desires.

personas

Once my research data was synthesized, I produced two personas that captured my six identified themes. Personas are tremendously valuable assets that allow the designer (or business) to quickly reference characterizations of key users.

primary persona: Erin

Erin is the culmination of the themes communication, productivity, and digital fatigue. I selected Erin as my primary persona as she represented the strongest themes identified from research, so strategically I could make the largest impact designing for Erin.

experience map

In order to understand the end-to-end experience for employees working remotely, I created an experience map for Erin. The experience map encompasses an empathy map, touchpoints, channels, and design opportunities. When producing this artifact, I needed to fully immerse myself in Erin’s experience, which gave me a strong understanding of where I could intervene with a digital solution.

user stories

After building a strong foundation for Erin’s typical experience while working from home, I began to ideate on the type of digital solution that would best fit her needs.

I created user stories under the epic of ‘communication’ in the format As a [user role], I want [desire], so that [outcome].

primary user story

For the purpose of this project, I chose one user story that best represented my product’s unique selling proposition and addressed Erin’s primary challenge identified during research:

“As an employee, I want to know when to expect a response from my colleagues so that I can manage my time accordingly.”

in hindsight...

…I should not have chosen this as my primary user story as it is difficult for an individual to know when they will respond to a message, let alone communicate that timeline to another person.

The primary goal in this user story is to not waste time waiting for a colleague that is in a meeting or walking the dog. Without being in the same space, it’s hard to know when someone is offline and when they will be back. Therefore, I should have chosen this user story to better addresses this challenge:

“As an employee, I want to know when my teammates are available for collaboration, so I can plan when we should work together.”

Fortunately for this project, I continued with the first user story and produced a similar product that still addresses Erin’s primary challenge. Now that I know the full design process, I know how to craft more strategic and targeted user stories that provide more value to the designed solution.

task flow

With the primary user story in mind, I set out creating a task flow, which represents the screens, user actions, and system decisions a digital product would encompass for a user to complete this task.
‍
When creating this task flow, I had in mind a digital workspace that represented an office, so a user could gather the same information an employee would usually have while sharing a physical space.

For future products, I would expand on the number of task flows created, and elaborate important functions into User Flows to get a better understanding of how functions are interrelated.

concept

After bouncing ideas off of friends and fellow students, I settled on a digital workspace that helps employees stay connected to one another and work more productively by providing the practical benefits employees would receive from a physical workspace. This incorporates three key features:

work

Know whether an employee is available to collaborate, in a meeting, out to lunch, or away from work, just like you would in the office.

message

Message coworkers through the app and receive instant updates on whether they are available. No more phone tag or lost emails.

connect

Bond through games, challenges, and activities designed to help colleagues get to know one another.

sketch exploration

wireframing and testing

When creating mid-fidelity wireframes, I focused on product functionality and usability. Therefore, all wireframes lacked images, colour, and brand. That way, during usability testing, the users could focus on functionality alone, rather than being distracted by visual aspects.

Due to the time constraints of the project, I focused on wireframing my primary task flow.

user testing

During the wireframing process, I conducted two rounds of user testing with 10 participants total to gather feedback on usability. The test sessions were set up with the following scenario:

Today I am going to ask you to imagine you are working remotely for a company of about 50 employees as an Account Manager. Your end goal is to collaborate with your coworker Angela Hope, who works as a Marketing Coordinator.
‍
Task 1: [View the ‘office’ room]
How would you see what coworkers are at work and available for collaboration?
‍
Task 2: [Filter by marketing department]
Now how would you go about only seeing employees in the office who work in the marketing department?
‍
Task 3: [Sort coworkers A-Z by first name]
Now say you wanted to see the remaining coworkers organized by their first name, A-Z. How might you go about doing that?
‍
Task 4: [Find Angela Hope]
Imagine you are working with Angela and wanted to send her a message. She works in the marketing department but she’s not listed in this room. How would you go about finding her?
‍
Task 5: [Change Rooms]
Now please return to the home screen. Imagine you wanted to take a break and let your coworkers know you’ll be away. How would you go about doing that?

priority matrix

After both user testing sessions, I used a priority matrix to organize all identified areas for improvement. The matrix plots opportunities based on effort and usability impact, so I could strategically plan which changes would have the maximum impact in my limited time.

I then iterated on my wireframes, focusing on the major issues in the high impact, low effort quadrant.

major changes

Below are screens of Qubicle throughout prototype iterations.

The Work function helps capture the knowledge employees gain from being in a physical space, such as when people were at work or on break. I created a visualization of an office using employee avatars. However, early iterations of the product did not consider IA or scalability for large businesses, which translated into users not understanding how to find a coworker they were working with. Final iterations used structured rooms to help users orient themselves in a digital space.

The Office function serves as a digital space allowing users to view a room virtually. During my research, participants mentioned Zoom was too personal for everyday use. Not everyone likes to show their faces or have their cameras on. So I used avatars to strike a balance between being customizable but also retaining privacy.

Profiles allow users to see important background information from a coworker. During testing, users wanted a few more details here, including notices about vacations. Iterations of these screens included minor changes to grids and spacing, text hierarchy, and necessary information.

Many of my users in Test Session 1 requested onboarding screens to better understand the app concept. Throughout iterations, I tailored the content delivered during onboarding to make sure users are set up with exactly the information they need to begin using the app, including apps.

hi-fi prototype

With the functionality, layout and navigation validated through user testing, it was time to build a high fidelity prototype to demonstrate what the final product could look like.

Feature 1 - Office

I created virtual rooms to address two primary pain points:

Employees feel disconnected from their other employees without being in the same physical space.
Employees find communication across company departments is poor and feel siloed in their teams.

Each room provides different information to the user, and a user can enter any room and see which employees are currently present.

The Office Room signifies that a coworker is at work and available. Rooms such as the Board, Meeting, and Common Rooms signify that a coworker is currently unavailable and will not receive notifications.

Each user has a customizable avatar so that the experience feels more personal than a messenger like Slack and a less invasive than pictures or Zoom.

Users can take advantage of filters, sorting, and search bars to help them quickly find a colleague. This is especially useful for businesses with over 25 employees.

Feature 2 - Message

Qubicle also features a messaging function to address the following insights discovered during research:

Coworkers are not as responsive to online messages so productivity is slowed down.
Employees miss the instant knowledge of knowing when coworkers are in the office, available to work, or in a meeting.

Since there are already a number of strong communication tools available such as Slack and Zoom, I needed to make sure this essential function integrated seamlessly with the app while providing additional information that would be useful to the user.

The message page features standards in visual design, drawing on Slack, Facebook Messenger, and Whatsapp for inspiration.

A user can easily send a new message to anyone in their workspace and receive suggestions based on department and message frequency.

When users message employees that are currently located in rooms with ‘do not disturb’ modes, the user will receive a notification when that employee is back online.

product name

When deciding on the name for my product, I wracked my brain trying to think of something clever. I needed an easy name that my users could easily refer to with other employees. Early app concepts had the name “Wooler” - short for “Water Cooler” - but that didn’t last long.

I settled on “Qubicle” as a play on the word “cubicle”. Just as many offices have eliminated cubicles for open concept offices, I see Qubicle as being the next iteration of workspace as remote setups become more ingrained in companies.

branding

To establish my product’s brand, I began with written adjectives by using a “more A than B” exercise:

More collaborative than individualistic
More fun than serious
More culture than productivity
More simple than complicated
More sleek than old fashioned
More startup than enterprise
More energized than calm
More professional than casual

To ensure my brand would appeal to my users, I made sure these adjectives also applied to Erin and Thomas’ personality types.

moodboard

With Qubicle’s brand established as collaborative, energizing, innovation, professional, and productive, my moodboard includes bright colours, clean lines, organized objects, and modern styles.

colour

With Qubicle’s brand established as collaborative, energizing, innovation, professional, and productive, my moodboard includes bright colours, clean lines, organized objects, and modern styles.

typography

Considering Qubicle’s brand keywords, I chose Montserrat as the brand font. Montserrat is a san serif font with light lines, which aligns with the simple and professional aspects of Qubicle’s brand. At the same time, Montserrat has a light and fun element due to the round curves of many letters.

UI inspiration

At this stage, I was struggling to design Qubicle’s ‘room’ cards so they felt familiar and balanced to users. So I sought UI inspiration from card-heavy products such as travel apps, task managers and e-commerce flows to explore different ways of stylizing app functions.

accessibility

I ensured all colour combinations in my app met WCAG AAA standards. This was quite tricky with the bright secondary colours, as they often did not contrast well with white. For typography, the smallest size font used is 16pt font.

UI library

With the final product complete, I constructed a UI library to convey my design system to other designers or web developers. I used Brad Frost’s Atomic Design system to structure my library by Atoms, Molecules, Organisms, Templates and Pages.

To improve this library, I would add more to the philosophy of Qubicle’s design system. In this sense, I would provide concrete rationale for when and where design decisions are made, so another designer could reproduce the product.

design impact

Designers are responsible for considering the future of their products and the unintended consequences that may stem from misuse. We’re living in a world where social media and technology are having serious and lasting ethical implications. As a final step, I considered the future of Qubicle using the Tarot Cards of Tech exercise.

The Backstabber | Tarot Cards of Tech

What could cause people to lose trust in Qubicle?

Users may feel their privacy is violated when their activities are reported to their office, and I take this concern very seriously. Qubicle was never intended to take away employee’s privacy from their homes, and therefore a number of features have been carefully designed to ensure users feel comfortable using the app:

Qubicle functions best when employees are reporting their activities, however the app still functions for users who simply want to ‘clock-in’ and ‘clock-out’.
The ‘room’ categories are broad enough to not give away sensitive information. Coworkers will never know if a colleague is at a doctor's appointment or taking a personal day.
There is also a report and block function, so employees can report harassment and predatory behaviour to company superiors and prevent employees from contacting them.

key learnings

about me

I love to solve problems.

There’s something so rewarding about pushing through a challenge to deliver a solution. I love helping people, and designing technology is one of the most invigorating ways for me to do it.

I love to get feedback

I fully believe ‘two heads are better than one’ and my designs only got better when I ran them past friends, family, educators, colleagues, etc.

about design

Inspiration is key

Before studying design, I thought innovation was dreamt up in the minds of geniuses. But really it’s a cumulative process, built from the ingenuity of other designers, creators, and innovators.

There’s no such thing as perfect.

In lean UX, don’t wait until your concept, sketches, wireframes, and prototypes are perfect before they’re in front of someone. A component I spend hours pixel pushing could always get scrapped during user tests.

Qubicle

contents

emphasize

define

ideate

prototype

empathize