Virtual workspace and company directory

In March 2020, the UK entered its first lockdown restricting non-essential contact and travel. There was an immediate requirement for employees to work remotely without training or office equipment and with the threat of redundancy looming as spending halted.

MyOffice is my final coursework presentation for the User Experience Design course at General Assembly.

1. Analyse

Analyse existing remote tools including Slack and Zoom to identify common patterns and design flows

2. Design

Designing, prototyping and testing user flows and interactions

3. Iterate

Iterating design feedback and creating final deliverables

user research - interviews

I spoke to several key stakeholders in remote teams, including Directors, Strategists, Project Managers, Professional Coaches, Staffing Partners and Creatives to collect their experiences of lockdown and to better understand the challenges they faced in their ‘new normal’. Collectively, everyone felt as though they were ‘acting like robots’, unfocused and demotivated, with a hovering expectation to replace their social life with work.

Interview A

Management of team has been difficult, there’s a disconnect between employers and employees' physical/emotional situations. Introverts or passive communicators fall
silent. There are logistical differences between global teams.

Interview B

Introverts may or may not be visible online due to personal circumstances. Benefits by
creating a schedule that works for them. Sees positives in calendar appointments for

Interview C

Poor connectivity issues affect remote working performance. There’s an expectation or pressure to replace social life with work life as laptops are always accessible. Social contact broke up the day between meetings and increased focus.

Interview D

Trust is a major issue in remote working, however you can’t always choose your team. If you don’t trust someone all you can do is improve your relationship. Emotional intelligence and empathy are the most important skills in remote working.

User research - Affinity map

I created an affinity map using my interview data, with a focus on observations, quotes, and insights from user responses. I grouped and named insights based on similarities in trends or behaviours and the resulting map illustrated relationships among observations and helped me identify patterns, that I could build my user persona’s around.

user research - problem statement & hypothesis

Apps and technology connect us, so why does remote working feel so isolating?

Remote office workers need active communication because the lack of human interaction available to them while working remotely generates feelings of isolation and a lack of direction, causing stress.

We believe that by giving remote employees more social tools, that we’ll help start conversations that will empower them at work. We’ll know this to be true when we see positive feedback in tracking data implemented into the platform.

user research - personas

Meet Annie

Annie, a technical engineer, has just started at her new job at a large tech firm during the UK lockdown. Her employee handbook doesn’t answer all of her questions, but she isn’t familiar with the HR team and can’t tap her colleagues on the shoulder to ask them.

Needs & goals

Annie needs to be able to identify points of contact for HR questions.
Annie needs easy ways to engage with her colleagues to get to know them.

Behaviours & frustrations

Annie finds work communications on her mobile overwhelming.
Annie worries about her productivity over lockdown.

Meet Steve

Steve is a Design Director responsible for the creative output of his company. As soon as lockdown ‘hit’, Steve’s responsibilities towards his team intensified, as he balances his team’s welfare with the increasing demand of running his department.

Needs & goals

Steve needs to be able to check in with his team, reassure them and assess their needs.
Steve needs to develop an online culture and behaviours within his team to socially boost motivation and morale.

Behaviours & frustrations

Steve’s team use various online channels incl, Slack, Asana, and Trello, but what he’s really missing is taking his team for drinks on Fridays.
Steve is concerned that he is overbearing and that his team feel monitored.

features - solution sketches

How might we make Annie’s feeling of being lost an exciting new possibility and how might we encourage Steve to have better online social interactions? Drawing on these ‘How might we?’ statements I quickly sketched potential solutions to the overall problems.

Prioritise your employees! Focus on employee satisfaction rather than work goals.

Virtual office! Create and customise your own Habbo hotel-style character and office. Then join meeting rooms and interact with colleagues.

Anonymous activity tracker – Boss can set office hours and close office/emails. No more overworking!

Coffee shop channel. I.e. drop in audio chatroom channel, water cooler chats.

Office radio! Listen to something in common, broadcast informal chats and share experiences.

Internal HR directory, get to know your colleagues.

features - 2*2 matrix

I considered each feature from the solution sketches and prioritised them based on their impact on Annie and Steve, as well as the effort and expense required to design and make them. A company directory, chatroom and calendar would give Annie and Steve access to their team in ways which are less formal than e mail and requiring less set up than Zoom calls.

features - 2*2 matrix

A Customer Journey would allow the business owners behind my concept a ‘bird’s eye view’ of a user’s path, and to understand where fall out/drop off points are in the user’s progress, so that they can recognise opportunities to support their employees as they work remotely.

features - sitemaps

Considering how Annie and Steve would interact with existing technologies, i.e. looking professional on that zoom call and keeping their background clean, helped define how I wanted them to interact with the new product. Annie feels overwhelmed with work notifications on her phone so it was important that we limit the product to a web app, where it could only be accessed on her work laptop. This helped inform the navigation system which operates as a side toolbar for desktop devices with primary buttons lining the top of the display in line of sight, which I organised using a closed card sorting exercise.

wireframes & sketching

Sketching lets you explore different options quickly so that you can figure out the best design direction.

Getting a basic concept of the user interface through sketching will make the wireframing process faster and easier.

Iterate - Usability testing 1.0

It was important to sense check that the product was meeting  user needs and would be a useful platform that people would come back to. I wanted to be sure that Annie could access her HR department with ease, and that Steve could check in in ‘break room chats’. From feedback, it was clear that I needed to include clear labelling of team mates including their job role and time zones, as well as amend the calendar to give a better overview of people’s schedules.

Ask a question to someone within the HR Department.

Users typically go to the Chat feature first to ask a question, but then renavigate to directory to specifically find someone from HR. For a first time flow there should be a ‘Start a New Chat’ option which allows you to start a chat with HR team (or other).

Schedule a call with someone within the HR Department

Users assume that you’l be able to schedule a call next to the ‘chat’ feature of the user’s profile. This action needs more prominence and therefore should be included in more than one secondary location.

iterate - stylesheet

I created a style sheet so that I could build my prototype and components within Figma consistently. There is a relationship between all colours, specific primary action button colours, contrasting system colours and hierarchy in font colours.

iterate - onboarding process

The onboarding flow needs to enables users such as Annie to log on and set up as quickly as possible without feeling as though she had given personal information away. I designed a short series of pop up bubbles within an onboarding tour which asks for basic profile information without seeming overwhelming.

Iterate - Calendar

The new diary update reflects people’s time zones, and gives a better overview of weekly meetings rather than a day at a glance. A smart ‘suggested time’ feature shows the next best availability both parties have, and is sensitive to when the office is set to ‘open’, considers time zones and meeting density.

Platform features

The breakroom

The breakroom is an informal chat space that allows users to drop in and out for remote chats and collaborative working. Users such as Annie don’t want to bombard people with emails with questions they’d be able to ask their colleagues next to them, in a typical office setting. Breakroom is a point of contact for meet ups and group hangouts. Steve is able to be in the breakroom often to regularly catch up with his team members who are online.

Platform features

Work notifications

The platform has been designed with the emotional needs of users in mind. Locating who you want to talk to has been made easy with the aim of the platform becoming the go-to place for internal communication as your work chat history and investment builds. Polite push notifications and emojis for new chats and diary invites, keep you engaged with the platform.

Platform features

Status tracking

Emphasising someone’s status on the platform, online/offline, focusing, out for a walk, or do not disturb would help traffic light people’s availability. This information is able to generate weekly tracking data, giving employees like Annie who are anxious about their productivity levels a week-on-week assessment of how much time she spends focusing or catching up in the break room, as well as providing Steve an anonymous overview of his overall teams time management.

Platform features

Chat is an easy way for Annie to engage with her colleagues and get to know them. From the chat feature, Annie is able to chat one-on-one, rather than join group discussions in the breakroom.

Using the diary, Annie can use the ‘suggested time’ feature to book recommended meeting times with her colleagues no matter the timezone, and when the Office is set to ‘open’.  Annie can also get an overview of when her colleagues are available.

Teams, the company directory shows Annie points of contact within the company. She is able to filter by department and see profiles to get to know her colleagues better.

Next steps

Our users needs are always evolving, and it’s important to highlight a roadmap of development which will keep the platform in line with what our user’s want and how the remote working dynamic changes as offices slowly begin to open. Based on the initial exercise of prioritising features, we aim to include more valuable features such as awards and badges and customisable characters in an open world platform that will utilise the screen real estate. We also plan on keeping the platform current with digital trends such as memojis, which showcase human emotion better than smiley faces.

More thoughts in UX design