top of page

FlexoOffice

FlexoOffice is a mobile-first web app helping employees return to offices after the pandemic by safely and flexibly booking onsite working sessions and participating in in-office events.

BrainStation industry project

May 2022 (7 Days)

UX Research, UX Design

Hero.png

Discover

News.JPG

After 777 days, Toronto's COVID-19 emergency declaration was officially ended by Mayor John Tory on May 09, 2022. The city, including thousands of employees, would thus gradually return to normal after the pandemic.

Back-to-Office concern...

After the pandemic, "return to work" would inevitably get prioritized for many companies in the foreseeable future. However, getting used to working from home in the past two years, many employees feel concerned about getting back to the office. A promising solution needs to be developed to bring employees back safely.

How might we...

make employees feel supported, safe, and confident, in their return-to-work?

What were some current employees thoughts of returning?

Due to the limited working schedule, we decided to conduct secondary research instead of user interviews, where I helped the team focus on existing literature and documents related to people's thoughts of return-to-office.

91%

of employees hoped to work from home at least part of the time.

1 in 3

people say they preferred to work from home because return-to-office negatively impacted their mental health.

37%

of employees said they would prefer working remotely.

54%

wish to divide their work hours between their homes and offices.

Proto Persona.png

Define

Safe and flexible check-in

Our research showed that employees desired a hybrid working model so that they wouldn't spend too much time in the office and were less likely to get burnt out due to the risk of infection and stress of work.

"As an employee, I want to see availabilities of workspaces so that I can manage my on-site working schedules accordingly."

"As an employee, I want to have a timetable with my in-office working sessions so that I can quickly overview when I need to go to the office."

Pivot 1.0:
Burnout prevention - break planner + online therapy

Our research showed that although there were quite a few existing digital solutions for booking in-office hours, employees still performed a low willingness to go back to office.

Considering that we were still at an early stage of the project, we decided to pivot and started looking for a different epic of user stories, which then came to burnout prevention. 

Compared to work-from-home where employees always felt less pressure and regularly took breaks, they tended to get burnt out by overworking. Therefore, we wanted to build a break planner reminding employees to take breaks during office hours properly.

Image by DocuSign
Image by Chris Montgomery

In addition, to further mitigate burnout caused by both pressure of working and concerns about getting infected, we would like employees to have access to online therapy sessions so that they could take advantage of their breaks and get comforted.

"As an employee, I want to be reminded to take breaks after hard work so that I won't overwork."

"As an employee, I want to have online therapy sessions between my working shifts so that I can avoid burning out when working on-site."

Pivot 2.0:
Safe check-in + flexible booking + In-office events...

Finally, we decided to make a combination of results from both of the brainstorming sessions we had previously.

Employees would be asked to submit their health status before getting to offices to ensure people's safety. Then they could flexibly book their in-office working hours.

Image by Proxyclick Visitor Management System
Image by Chris Montgomery

In addition, to make our product more enjoyable and customizable, the online therapy booking feature was expanded into in-office event booking feature where more different kinds of events were involved.

"As an employee, I want to see availabilities of workspaces so that I can manage my on-site working schedules accordingly."

"As an employee, I want to know events held in my workspaces so that I can join them when I finish my work and relax."

Design

Wireflow

To transfer our design decisions into a tangible framework, I helped the team build a user task flow, followed by a series of wireframes and connected them into a wireflow, which was used for an initial handoff..

Wireframes.png

Handoff 1.0:
Lo-fidelity framework

Our extra design pivots made the ideation process longer than expected and compressed the time for design and development, which made us decide to make an initial handoff and have our developer teammates on board so that they had a basic understanding of the main flow and could get prepared as much as possible.

Handoff 2.0:
Style guide + Hi-fidelity mockups

Our second handoff, which was also the final one, came after the completion of the high-fidelity prototype as well as a brief design system with colors, typefaces and UI components included.

Design System.png

Final Product

Final Product

Deliver

Reflection

What I learned from the project...

Handoff early and often

Handoff after finishing the high-fidelity prototype is not necessarily the only touchpoint with developers during the design process. Instead, having developers involved as early as possible is a good practice, especially for projects with tight schedules.

What I would do for next steps...

Implement the employee portal with responsive design approaches.

Enhance the event booking feature and have advance booking available for employers and employees.

Other Featured Works

Home-Desktop.png
Home-Mobile.png

LearnActive

Web App | UX/UI Design, Responsive Design

Mockup.png

Flight Club Redesign

Website | UI Design, Branding

bottom of page