It’s Always “Yeehaw” and Never “Haw Yee?”: Designing Howdy
By Team Dad Joke
The Problem
Due to the COVID-19 lockdown, millions of people across the globe have been unexpectedly confined to their homes. This means that the majority of companies and their employees must learn how to adjust to the new norm of remote work-from-home settings. People enjoy daily casual conversation with their coworkers in between breaks at work, but it is difficult to do so with the current online communications tools. For example, Zoom is well designed to facilitate formal meetings. But in a social gathering over Zoom, there can be awkward moments like not wanting to be the center of attention of the entire group whenever you speak or not being sure whose turn to talk is next.
And so, to solve this problem, we designed an app called Howdy! Our goal is to bridge these social type communication gaps between the employees while they are working remotely. We wanted to create an app that better mimics real social interaction and allows more opportunities to meet new people within a company. So, we thought why not try adding a virtual world with the video call? Having a place to socialize at work, even a digital one, can make the remote work-from-home environment a lot more enjoyable. We also thought it would be nice if there was an easier way of getting to meet new people in the company or getting to know your teammates better more personally. So, we ended up adding a friend matching bot feature that matches coworkers based on their preferences through a survey. Overall, through Howdy, we intended to bring online all the team building activities and interactions that the people were used to pre-pandemic.
The app was designed by Team Dad Joke (Dunja Tomic, Basim Sahaf, Kevin George, Ziqi Li, and Joseph Green), a group of friends and students in the computer science co-op program at University of Waterloo taking the Human Computer Interaction course. Due to our experience with working remotely and working in the office pre-pandemic, we can bring a lot of new ideas on the table as a team. Together, we are determined to help people build better relationships online while learning more about UX design. In terms of what makes our product unique, you can have multiple conversations within a single virtual space using spatial chat, you can customize own avatar, you can easily setup a virtual coffee chats with new coworkers with similar interests, and it is designed to be easily integrated with Slack which is a very common communication platform for companies.
There is a lot of stress and anxiety when it comes to meeting and developing trust with new people, especially within a remote workplace. This could lead to feelings of isolation or “imposter syndrome” and a lack of productivity. Our product will make it easier to interact and build relationships within an organization, which in turn creates a better team that can use strength in numbers to become “more than the sum of their parts”.
However, creating Howdy was not a trivial task, it took weeks and a lot of hard work iterating over possible ideas & designs to reach our final product. In this article, we’ll dive into the behind the scenes of creating our group’s product.
Stage 1: Empathize
The first stage of the design process is to develop a sense of empathy towards the people you are designing for and to gain insights into what they’re like and what they need.
The first design task we were faced with was to create user personas, and try to step into their shoes and empathize with their work struggles. We created 3 personas, and for each of them, we created an empathy map to help us really get in the heads of these personas and find out what was really important to them.
Next, we wanted to see what some real people thought about the sudden shift to work-from-home and how that affected their team culture.
We interviewed 3 people with different professional backgrounds and levels of experience.
These user interviews helped us gather a lot of critical information about common issues in a remote-working environment. Our interview questions consisted of 6 open-ended interview questions, and then 6 questionnaire-style questions. These questions would be slightly modified during each interview based on the person’s unique role, or some of the insights they provided in previous questions.
A common theme that arose in each of the interviews was that regular conversations and participation in social activities between coworkers were greatly lowered after moving into remote work. Each of our subjects mentioned that they missed the spontaneity of talking to others casually, by the water cooler or coffee machine. Overall, our subjects found that general communication had become more complicated, and they were missing the opportunities for doing social and team-building activities.
These interviews got us thinking: how can we help resolve this?
We realized that people want and need a specific time and location in the workplace to talk about things besides work. This is how personal connections are made and how trust between coworkers is formed. Thus, we will need to recreate this kind of space where it is easy for people to casually drop in and chat with other coworkers. This will help improve the company culture and allow people to get to know each other better.
Stage 2: Define
The next stage in the design process was the Define stage, in which we synthesized our findings from the Empathize stage, and worked to create a succinct problem statement that will help guide our work and kick-start the ideation process.
We created an affinity diagram to collate our observations and findings from the previous stage. We then made connections between these individual findings to help develop new and deeper insights, which helped us define the problems and start developing potential solutions.
We split our diagram into 3 smaller ones to help us categorize our findings better.
In our interviews, we observed:
- One of the main things that people miss from the pre-pandemic work environment is the lunches, coffee runs, and other casual social events that allowed them to interact with coworkers.
- Most participants expressed that they experience a lot of change when it came to communicating with coworkers — some of it positive, but the majority negative.
- This category found that working remotely could have a negative impact on people’s mental health as many are feeling the effects of isolation.
Next, we analyzed user tasks and performed a hierarchical task analysis for each of them. Based on our earlier findings, we chose to analyze three tasks that are spontaneous and easy to do in the office, but can be painful to do online.
This task helped us identify common pain points in all the tasks, and got us thinking about some potential solutions to these problems. It made us question how we can replicate the casual and low-pressure experience of talking to a coworker at the office, and allow coworkers to introduce and get to know each other.
Stage 3: Ideate
Once we identified some problems with team building remotely from the eyes of our users, we could start brainstorming ideas to solve these problems. We knew that for people newly working from home, there were many aspects of the office that were hard to replace remotely. Firstly, it was hard to spontaneously talk to your coworkers. At work, you could just poke a coworker and start a conversation. Lunch breaks and social spaces in the office ensured that there was a specific time and place where coworkers knew they were allowed to socialize and talk about non-work things. From our user interviews, we knew that this is where most of making bonds with coworkers happened: talking about things unrelated to work. In addition, common office spaces allowed employees to get to know people from around the company, rather than just the same people they worked with every day.
We set up a Miro board and a timer to brainstorm ideas quickly. When we were done, we voted on ideas, and this was how the board looked:
We largely agreed that we needed something to replicate the social mood and the spontaneity of the break room at work. Other ideas that garnered interest was a friend matching function, and virtual avatars.
After, we made user stories for these features and storyboarded them. The storyboards showed the possible use cases for our feature, and set the emotional motivation for why we want to create these features.
Once the storyboards were done, we had to focus more on the logistics of how these features would work: What would the design look like? And, how would the users interact with it? Once again, we wanted to brainstorm different ideas quickly, so we set another timer and did quick “Crazy 8” sketches of possible layouts for our features. We discussed the designs and voted for the ones we liked best.
With the general designs decided on, we moved forward to sketching the interfaces and user flows. The user flows modelled how a user interacts with our feature, going through the feature from start to end.
We sent these flows to another team for feedback, which was useful for seeing our flows from another point of view. The feedback was very helpful in catching things that we overlooked: for our spatial chat feature, someone mentioned it was confusing keeping track who was muted, which could cause confusion in a conversation. We responded to this by adding visible indicators to show who was muted. Another piece of feedback mentioned the activity streams in the user profiles being too much information, and we scaled back the user profiles to show only the most useful information.
Stage 4: Prototype and Test
The third stage in our design process was to prototype the features we came up with in the previous stage and then test them with real users. We shortlisted two features out of the five we came up with in the last stages — Friend Matching and Virtual Breakroom. We created scaled-down versions of the features to visualize how they would look and how a user would interact with them. This exercise was aimed to bring the ideas we generated in storyboards, sketches, and user flows to action.
After we did the Crazy 8s exercise in the last stage, we voted to choose a layout for each of the shortlisted features. After selecting the layout, we divided the prototype section into two parts. In the first part, we created a low-fidelity prototype for each of our features and then tested the feature with real users. A low-fidelity prototype is a rough sketch of how the product will look and identifies a particular feature’s primary layout, ignoring details such as colour, font, background, etc. Below are the low-fidelity prototypes we created.
We tested these prototypes with two users. Our testing method consisted of two team members, one of whom acted as a wizard, and the other one acted as a facilitator. The facilitator asked the participant to perform a set of actions. The wizard came up with a list of possible questions the participant may have while testing the prototype, and also outlined the appropriate system responses for each action. We asked our users to think out loud, and provided them with minimal handholding as our goal was to understand what they are thinking while using the product. We got great insights into what we need to change in our prototypes to simplify the user interaction. For example, we learnt that the way we organized our interest tags was confusing for our Friend Matching feature. The user pointed out that they didn’t know they could type and add random interests into the form. Instead, they thought that the app had a list of already given interests they had to choose from. When they tried to look for a particular interest, they couldn’t find it as we did not arrange them alphabetically. Therefore, we needed to make it more apparent that the user can add interests themselves. Another feedback was to alphabetically arrange the categories of people the user can meet so that its easier for the user to find a particular category.
Similarly, one feedback for our Virtual Breakroom feature was using arrow keys to move instead of WASD as it’s not obvious for someone who is not into gaming to use WASD instead of arrow keys.
In the second part, we took our low-fidelity prototype, converted it into a high-fidelity prototype, and again tested it with real users. High-fidelity prototypes are functional, interactive and very close to the final product. Therefore, we chose our product name, colour scheme and font and designed the logo during this stage. We named our product Howdy!, as we wanted a name that represented warmth and affection. We chose orange and blue for our product because they represent trust, friendship and companionship. Since our product is called Howdy, we decided to select a cowboy-style theme for the entire product and designed our logo to have a speech bubble fused with a cowboy hat.
We integrated all these components into our product and created a polished version that was ready to be tested with real users.
Below are the prototypes we created for our features:
In addition to this, we incorporated a lot of feedback we received from the low-fidelity prototype interviews. For our Friend Matching feature, we created categories of interest instead of allowing the users to add random interests that would make matching harder. Therefore, when a user enters an interest, the system automatically suggested a category where this interest could fit and allows the user to select that interest group. We also added a back button on each page so that the users can go back and edit their choices.
Similarly, for our Virtual Breakroom feature, we decided to remove the WASD navigation method to make it easier for everyone to navigate in the app.
To test our high fidelity prototype, we prepared a heuristics evaluation worksheet. It contained instructions for the participants to test the prototype and fill out the results. We conducted this evaluation offline, and the participants had no help from us other than the instructions laid out in the worksheet.
In conclusion, we went from our Crazy 8 sketches that were on paper to a fully polished prototype that represented the final product during the stage. The user interviews were beneficial for us so as we got valuable feedback to help us improve the experience for our end-users. The Prototype and Test phase enabled us to avoid cutting corners in our app and make it user-friendly and accessible for everyone.
Conclusion
So, to conclude, creating the virtual breakroom took many steps and was a highly iterative process. We began by empathizing with our potential customer, discovering that online work relationships were much too formal and that our target audience missed spontaneous, casual conversation at work. Then, we came up with our own solution, developing many ideas that could solve our problem, including a virtual office, a friend-matching bot, and more. Finally, we put this idea to the test by having real, potential users try our prototype and provide feedback, which we incorporated into our final designs.
Moving forward, there is a lot more to explore when it comes to our product and other products that look to accomplish the same problem. If we had more time, it would be interesting to conduct usability tests amongst many users in a focus group to see how they interact within our platform. Also, since this product, in our eyes, solves a real business problem, developing a product offering could also be worthwhile.
All in all, creating Howdy using all the steps of good iterative design was not only rewarding, but also really fun!
