Joseph Baroud

VirtuOffice

Product/UX Design

CONTEXT

3-day online hackathon (team of 8)


MY ROLES

UX/UI Design

Pitch Presentation Design + Delivery


PLATFORM

Desktop web


TOOLS

Figma, Zeplin, Google Docs

VirtuOffice is intended as a virtual workplace game that brings the in-office experience to employees' homes. The POC was created during an April 2020 hackathon hosted by BrainStation in partnership with Microsoft (Canada), in which the design challenge was to improve the experience of working from home.


The hackathon took place online and was inspired by the mass migration to remote work, caused by the COVID-19 pandemic.


I completed this project in collaboration with 2 fellow Designers, 3 Developers and 2 Data Scientists (LinkedIn profiles provided at the end of the page).

Project Definition

Prompted with the broader design challenge to improve WFH, our team began by brainstorming problems we have personally experienced while working remotely, and also imagined ourselves in the shoes of teleworkers during the pandemic to identify challenges they might be facing.


At first, we landed on the idea of remote onboarding experiences and its impact on new hires' abilities to adjust to their new jobs and build meaningful work relationships. However, after researching this space further, we came across a statistic that prompted us to shift our scope beyond just onboarding:

Over 50% of teleworkers feel disconnected from their on-site counterparts.

(Grenny & Maxfield, 2017)

This sense of disconnectedness occurs mainly after experiencing sustained feelings of missing out on key workplace socialization opportunities (Smith, 2020). Moreover, workplace exclusion brings about steep business costs, as it correlates significantly with counterproductive work behaviours resulting in employee turnover and productivity loss (Hitlan & Noel, 2009).

Proto-Persona

As we did not yet know what the solution or its scope would be, we were unable to confidently estimate how to best allocate our time between research and development.


Therefore, to ensure our developers would have enough time to build our designs, we made the decision not to conduct primary research as it would require us to find remote workers who can talk to us on short notice in the middle of a business day.


We instead gathered secondary research and established key assumptions to create a proto-persona that would guide our solution.

Design Challenge

“How might we make it easier for remote workers to socialize with their colleagues and leaders so that they can feel more strongly integrated within their employer's culture?”

Ideation & Inspiration

Rapid Ideation

To generate ideas quickly, I suggested that our team try a rapid ideation session in which we took 10 minutes to individually think of ideas.


We then took a minute to vote on the ideas we liked the most, discussed the results and saw that we had hovered towards gamification.


We realized, however, that before we could move forward, we had to take a step back and validate our assumption that gamification could indeed help to solve our problem. So, we did some more research and came across 3 key insights that drove our value proposition:

Value Proposition

"A game that brings the in-office experience home"

Inspiration

To align ourselves on what the game would look like, we gathered inspiration from games that foster(ed) the sense of community we wanted to create.

The Sims

Animal Crossing

Habbo Hotel

Club Penguin

Solution Design

Division of Work

The overall process involved having the Designers and Developers work together to build the game's interface, while the Data Scientists parsed through an online data set to identify determinants of job satisfaction and employee turnover before building a concept for an HR analytics dashboard which would supplement the game.


While I will only dive deeper into how the Design team collaborated, I have provided links to my teammates' Development and Data Science processes at the end of this case study.


MY ROLE:

🔹Management of the POC's scope by acting as the decision-maker

🔹Design of the game's floorplan on Figma by collecting vector images online and creating my own

🔹Preparation and delivery of a 3-minute pitch presentation as well as a 10-slide written submission


ROLES OF MY CO-DESIGNERS:

🔸Design of the game's avatars and clickable elements (e.g., heads-up displays, navigation, pop-up windows)

🔸Preparation of the designs for development handover using Zeplin

🔸Creation the game's logo and wordmark

🔸Mockup of a marketing website for the product suite (i.e., the game and the analytics dashboard)

Game Design

Play around with the interactive demo here!

Employees can roam their virtual office using their personalized avatar

They can pick from a handful of lighthearted interactions to meet and engage with their colleagues


They can earn points to upgrade their in-game avatars and cubicles simply by interacting with each other



By viewing their office's virtual bulletin board, employees can stay connected with real-life work activities and milestones, without fear of missing out.



Talent Analytics Dashboard

As a supplementary platform, our Data Science colleagues prepared an illustrative concept for VirtuOffice Analytics, a tool that uses game-curated data to provide HR departments with insights on the health of their workforce.


View more on their concept here

Closing Reflections

Although we didn’t win, I had an amazing time and drew many takeaways from this experience.

Challenges & Lessons Learned

  1. 1️⃣ ALLOCATE MORE TIME TOWARDS RESEARCH
  • As I had called out earlier in this case study, our team had challenges assessing how to allocate time between research and development. Given that it was, I think for all of us, our first hackathon, we lacked the experience to comment on how to best plan our 3 days. I responded to this unknown by trying to land on a solution ASAP to avoid delaying development, but I might have compromised my team's design process as a result. Applying the next two lessons could help me to better organize the work and utilize our time in future hackathons.


  1. 2️⃣ UTILIZE DATA SCIENCE CAPABILITIES DURING RESEARCH

What exacerbated the difficulty above was the fact that we did not know how to best utilize our data scientists and developers during the initial steps of the process, which were driven mostly by design. While we were effective in setting up the prototyping work in such a way that the developers could start coding before they received the final designs from us, it was challenging to integrate the data scientists as they were accustomed to being given a dataset to work with. It was only at the end of the hackathon, when I saw how another team had performed text analytics on social media posts to generate primary research, that I realized how we could have more tactfully involved our data scientists in the initial research phase.


  1. 3️⃣ DELIVER A UX DESIGN KICKOFF

I think everything I described above could have been alleviated, to at least some extent, if the designers had taken 30-60 minutes at the beginning of the hackathon to educate the rest of the team on the design process. I learned during my experience as an organizational change management (OCM) consultant that delivering an OCM kickoff session to the broader project team was always helpful in educating people about the work we (the OCM team) were setting out to do. Delivering a UX design kickoff at the onset might have helped the non-designers to offer ideas on how we could organize our work and tell us where they can see themselves contributing at each step.

References & Links

My Super Talented Teammates