Rethinking The Workspace

Product Design for a Virtual Workspace Case Study
Tools & Methods: Discovery, Research, Exploration, Refinement, Final Solution
Student Work (MA Thesis) - December 2020
40 hours over the course of 4 weeks
Problem
Employees that work remote feel overworked and disconnected from their team making it challenging to collaborate and stay informed of the company direction.
My Role
  • UI Design
  • UX Design
  • Brand Development

Project Overview

During the pandemic, much has changed. One way life has changed is how and where some people go to work. The purpose of this project is to explore how to design a virtual workspace to give remote workers the capabilities to manage their day, connect to people, and maintain the company culture.

The target audience includes small to medium size businesses that work partially or fully remote.

Current Challenges:  Work-life balance, and Feeling of isolation, communication issues.

The solution I came up with to solve these problems is a digital product that is an extension of your team to bring people together while maintaining projects.

My approached to this project with a holistic view. Keeping in mind the overall well being of the main users. The goal of this project is to explore how to design a virtual workspace to provide remote workers the capabilities to manage their day, connect to people, and maintain the company culture.

Elevate was designed as a one-stop-shop for employees to manage their day, connect with their fellow team members, and discover current news/events in their company.

Tablet and smart phone with Revive app display
UX Sitemap
A UX sitemap is a hierarchical diagram of a website or application, that shows how pages are prioritized, linked, and labeled. If a user flow is like the street view details, the sitemap is like the bird's eye view.
sitemap to showcase hierarchy
landing page after login

The first page the user lands on after login is the dashboard that acts as a transition period before going into work. This will make use of a CMS system to pull the newest event to the forefront.

showcase a feature where and hourglass icon is used to remind the user to take breaks

To prevent burnout, the hourglass feature aims to identify when you have taken a break from your work or space to go to have an organic conversation. The user can change the amount of time before a reminder or turn off the feature completely if they prefer.

showcase how to edit your profile settings and assess downloads

Users can create a profile for themselves to connect and collaborate with other employees through multiple social avenues. Here the user can also update their status and quickly find files that are shared through a chat.

edit your profile page
Design System

Color: Blue and orange are used as the main colors because the feeling they bring runs parallel with the Elevate’s voice. Blue is known to be calming, professional, and commonly seen in tech. While orange brings excitement and a sense of energy. Overall, they are complementary colors and showcases the professional, calm, energy that a virtual workspace would want to bring to the team.

Typography: Roboto is a rounded, clean typeface with a straightforward, geometric design that offers clean lines. The font includes the ability to present it in thin, light, regular, medium, bold, and black weights. Some of the styles are condensed to keep the font readable even at the lightest and heaviest weights. This font has friendly and open curves that reflect the characteristics of a person in the workplace.

Iconography: The icons are used to help users find, understand, and perform a task efficiently. Icons are to be kept simple to avoid unnecessary complexity. The use of consistency within the elements will help the user identify and associate icons with an action. The colors for icons will mimic the logo to keep brand consistency. When using the icons use of white space around them will be used to make them clear and the main focus point. The main goal is to transfer visual information to the user in the quickest way.

Controls: All elements are styled to represent to brand’s message and voice. All components have rounded edges to represent friendliness and calm.
styleguide for elevatestyle guide part two of elevate