Thrive

Semester Project

A virtual co-working space aimed at increasing office physical & mental health to maintain productivity.

Overview

The Problem

During my fall 2021 UX Design course, we were tasked with solving one of the Royal Society of Arts’ problem statements.

“How might we improve the experience for the increasing number of people with hybrid working patterns?”

This stems an issue of working from home environments. Fostering an imbalance of in-person interactions and an increased amount of unhealthy screen-time and low movement.

Goals

1To create a virtual collaborative space that felt like it was more than just a work environment.

2Incorporate creative styles from popular video-games such as Club Penguin, Minecraft, and Stardew Valley.

3Help improve the lives of work from home schedules through the use of Thrive.

Responsibilities

UX/UI Design, UX Research, Prototype Implementation.

Timeline

September to December 2021

Team

Colman Tsang, Manjot Sihra, Isabelle Ly, Megan Oliver, Winnie Lin, Jiewen Li, Steven Poung.

Months 1 & 2

Ideation

First, we started with brainstorming how we would develop our research questions by utilizing idea prompts which included the following

Why Research?
Asking "why" allowed us to view the problem in a light that showed some assumptions that we had about the issue.

Viability
Understanding the viability enabled us to visualize the type of resources we need for the product to become developed and maintained.

Overall Impact
We predicted the impact that we would have with this app, by comparing it to similar products and seeking statistics on existing products.

The 1-Pager Proposal
Audience

Through secondary research, we found the working class in China had it the worst. The competitive nature and grueling work schedules, coupled together for a problem that we felt we needed to tackle.

We wanted to improve the hybrid work from home structure that was experienced due to the pandemic, and alleviate the stress during the workday. By offering distinct mental-health oriented features.

Personas
Demographics

22 to 45 Years Old

Located in Urban China

Goals and Needs

Foster healthier connections with co-workers

Better work-life balance

Better communication

Frustrations

Overworked

Difficult to maintain relationships

Switching between multiple work tools

Wireframes, Initial functionalities and features

From our audience analysis and personas, we realized that we needed features for this product that helped bring together a community of frustrated workers.

Exploring the Initial wireframes (v1)

V1.0 of Home Page

V1.0 of Chats

V1.0 of Login Screen

V1.0 of Profile Settings

Some questions we asked during our first iterations

If you’re the user Bo, and you want to move across the screen, how would you achieve this task?

“What is your initial thought of navigating through the app?

If you wanted to travel from the lobby to another room, how would you achieve this task?

edit

These questions helped us gather feedback to create changes to our applications' functionalities

Users were confused with the global map view of the homepage.

We decided to remove it.

A main office view was also added to replace the homepage, focusing more on a users local environment.

We added more local environment rooms.

More functionality was needed to make the chat useful for people in different teams.

We added more features for group chats.

Exploring the Improved wireframes (v2)

V2.0 of Login Screen

V2.0 of Chats

V2.0 of Landing Dashboard

V1.0 of Office environments room

Changes to the second iterations

The overall changes to the product were aimed to improve the usefulness of the software, as findings from our interviews concluded that we needed more localization of one office before branching out to a community.

Additions
  • Expanded contacts-selection options for chats
  • 2D side scrolling environment rooms
Removals
  • General Map View Removed
  • Login onboarding credentials fill-in

Months 3 & 4

Design System

A design system and logo was developed to keep styling consistent between different screens. Although it was not a very in-depth system due to time restrictions, we still utilized this tool effectively for all of our screens.

A walk-through of the features

1 Landing Page

The landing page was the first point of contact for our product. The main purpose was to showcase all of the features of the app.

1.1 Immersive Spaced

Immersive spaces was an area that your character could explore into and “work” in.

1.2 Health Reminders

Health reminders was our way of introducing physical and mental health breaks throughout a workday.

1.3 Character Customizations

Customization was our approach to bringing a bit of fun to this app, offering a sims-like customizing.

2 Login

This was an important aspect to prototype, as often enterprise apps have confusing logins. QR codes were included as a form of login, as the Chinese market utilizes this technology a lot.

3 Dashboard of Immersive Spaces

This was the first screen a returning user would see when logging in. It outlines all spaces available in their office and they would be able to hop into them to work or relax.

4 Settings

Having a settings page to customize your character and other settings was crucial as often time, enterprise apps had many external plugins.

5 Break Environment

The break room was a room that users could use to signify that they were taking a break virtually, with built-in activities.

5.1 Office Environment

The private office is a room that each user would have, and could invite other users to collaborate or work alone in.

More rooms for the future

Due to the time constraints, we couldn’t build out all of the rooms, however the idea of this app was that there’s modularity to include whatever rooms a company would like to add.

Prototype

Explore the application for yourself! Test out some of the features that you just read about.

Reflection

Takeaway & Results

Overall, I was ecstatic at the work that me and my group produced. Our final product turned out to be better than expected. However, I do wish that we had more time so that more features could have been implemented. This project has also taught me that complex Figma animations can be fun if done correctly.

Complex Figma animations

Some functions that had to do with the map and chatting features required more in-depth Figma animations that had nested animations within each action. This required me to learn more in-depth about Figma and it's nested functionalities. This got me particularly familiar with states and frames on different objects.

Hold precise meetings

Often during group meetings, there was not much productivity as we had no solid plan on what to do. Having a clear vision and goal will help turn these meetings more productive as it would've been useful to actually do the task, rather than talking about doing the task.