Hygge

A Metaverse virtual reality app providing a more comfortable work environment no matter where users physically are.

Overview

This Metaverse virtual app was developed and designed for Avocademy’s 1 week designathon sprint. The challenge brief was:

How might we intentionally create a better world through the Metaverse?

With this challenge in mind, my partner and I began brainstorming with a focus on the VR experience.

The Problem

We found that working or studying from home can be draining, making people feel “stuck” within their own space. Most existing virtual workspaces are tailored toward working collaboratively rather than individually and do not provide real world environments for users longing for escapism.

The Solution

To combat this problem, we researched, strategized, and designed a virtual reality product that makes the world a better place by allowing users to choose their virtual work environment all from the comfort of their home.

Duration

Timeline: May 16, 2022 - May 21, 2022

Tools

Figma, Zoom, Google Forms, Slack, Oculus Rift 2

Role

UX Researcher & UX/UI Designer in a team of 2

Deliverables

Discovery & Research: User Surveys, Competitive Analysis, Personas, and Secondary Research. (Jennifer Lead)

Ideation: Sketches, User Flow, Site Map. (Collaborative)

Design: Design System & High Fidelity Screens. (Madison Lead)

Presentation: Recorded our pitch for the Design Concept. (Collaborative)

01. Research

01.01 Kickoff

Madison and I had never previously designed together and were partnered in this designathon because of our shared interest in gaining more experience designing for a virtual reality. We kicked off our project by getting to know each other and communicating which deliverables we were each most interested in tackling.

I wanted to focus on the primary research and took on the responsibility of developing a survey of VR users, conducting a competitive analysis of comparable VR platforms, and creating user personas. Madison focused on secondary research, reviewing relevant literature and articles.

01.02 Surveys

To gain more insight from current VR users, I developed a survey with a focus on 3 overall questions:

What kind of virtual environments would users want to work in?
What added features would they want?
What sounds or audio would users want to hear?

After posting the survey in a VR Facebook group and sharing on LinkedIn, I collected responses from 29 users in a 24 hour time span.

01.03 Survey Results

I found our results really interesting and not quite what I expected.

Environment

Over half of our participants (17) preferred to be immersed in a Nature Environment. The next highest selections were an Office Environment (8) and a Library (6).
Fifteen users also wanted immersion level options such as blurring the background for more focus.
Only a few users (5) wanted to see their keyboard as part of the virtual environment

Audio

The majority of users (16) preferred to hear sounds from the immersive environment.
Many other users (12) wanted the ability to listen to their own music.

Other

Almost all users (27) wanted the ability to have multiple task screens open rather than just one.
Six users wanted accessibility options.

01.04 Competitive Analysis

With the survey results in mind, I reviewed current virtual desktop apps and selected the top two, Vspatial and Horizon Workrooms for a competitive analysis with a focus on locations and environments offered, interface look/design, and features offered.

Vspatial Key Findings

Locations

vSpatial had 8 environment options with only one outdoor/nature environment option.
Users could change those environments for their individual or group workspace.

Interface Design Options

Users could have multiple screens open at once and easily manipulate each screen's location (screens surround user in a circular fashion)
Users could sync wireless keyboard and a mouse to virtual workspace.

Features

Users could select a color-coded option to visually separate each open window with a different background/surrounding color.
They could stream music as they would be synced to their personal desktop.
Users could toggle surround screen and other features on/off

Horizon Workrooms Key Findings

Locations

Users only got one environment option for their individual workspace.
Team meeting spaces had some environment options and could be personalized with logos or backgrounds.

Interface Design Options

Users were limited to the same amount of screens as they have monitors in the real world.
Users sync laptop or desktop to virtual space and could see a virtual version of their keyboard with a “pass-through” view of their real hands on the keyboard.

Features

Users could enlarge the screen. Other screen features were dependent on the user's computer setup.
Users could also stream music as they would be synced to their personal desktop.

01.05 Personas

Next, we began to conceptualize what our virtual desktop might look like and I started by developing two personas in order to better envision the users we would be designing for.

Anya Simmons

A recent college graduate who moved to a new city for a job. She used to hike in nature but now feels “stuck” at home and depressed because she both works from home and is attending grad school from home. Anya needed a nature-based environment to feel like she was leaving her apartment.

Evan Peters

A novelist with agoraphobia. He suffered a flare up of agoraphobia after the pandemic and struggled to go to busy cafes where he finds the most creativity to write. He needed a more public environment for his workspace.

01.06 Key Findings From All Research

Comparing the results of the competitive analysis, feedback from users, findings from the secondary research, and the data from our personas, we synthesized the information and generated the following takeaways.

Users want to personalize their VR real world environments rather than be stuck with only a cartoonish VR simulated office.
Users want the option to have multiple screens and other accessibility features.
Users need a boundary alert as a safety feature to let them know when someone has entered their physical space.

02. Ideation

02.01 Sketches

Sketches allowed us to get a feel for how we wanted the app to look and function now that we had user feedback and a solid concept in mind.

Ideas played with during this stage:

The homepage concept. Specifically, how we wanted the user to connect to the desktop the user would be mirroring into the virtual workspace.
The selection screens for the environment and specific scene.
A "pre-immersion" screen. We deliberated here on if we wanted accessibility options to be made involuntarily or not.
The landing page concept once the user entered the workspace.
A dashboard concept within the workspace.
A profile concept.
The look of the workspace.

02.02 User Flow

Next, we created three user flow drafts to determine which user flow would best meet the user's needs as described in our research.

The flow below was selected as it provided the best option for allowing users to select a new environment before being taken to their virtual workspace. Once in their workspace, users would be able to make feature and accessibility selections.

02.03 Site Map

In order to ensure we accurately captured all the features and accessibility options users wanted, we next developed a detailed Site Map.

03. Design

03.01 Moodboard

We leaned into that feeling of escapism and wellness for this design and sought inspiration in natural and neutral colors.

It was important here that we kept in mind that in a VR environment, the user interface design would be much more prominent than in other interfaces. To avoid overwhelming the user, our goal for UI design was to inspire calmness and comfort.

In this step, we also landed on our project’s name, Hygge (pronounced Hue-gah), which is a Danish and Norwegian word meaning contentment and comfort.

03.02 Style Guide

At this stage we developed a brand identify that solidified our design style. We decided on a glassmorphism effect for the iconography to provide higher contrast for accessibility.

We decided on a simple palette to avoid overwhelming the user with any drastic accent colors. We also decided on a soft 8-px grid with 64-px margins.

03.03 High Fidelity Screens

Because we were short on time for this challenge, we jumped straight into High-Fidelity screen. Madison developed initial high fidelity screens for our user flow, then we worked collaboratively to tweak and update the UI to ensure that the functionality would translate well into a virtual reality space.

Homepage
Environment screen to choose VR Environment
Nature screen. User can select which nature environment they prefer.
Workspace.
Workspace if User uses side navigation bar to change their view options.

03.04 A Personalized Iteration

Madison also developed a mock-up of what her personal workspace might look like were she to use the virtual app. The homepage and Madison's personal workspace example are displayed with a curved rendering below to provide a better picture for how the screens might appear in an immersive environment.

A curved rendering of the Hygge homepage
A curved rendering of Madison's personal Hygge workspace

04. Presentation

04.01

Madison and I wrote a brief script and recorded it to show our respective research and design work on Hygge. Below is our presentation with the original design which has since received minor revisions to the UI to reflect a more 3d view.

05. Reflection

What I've learned

It was amazing to see how much research and design could be accomplished in such a short sprint. I learned a lot about collaborating with remote teammates effectively and also gained new skills in developing 3D renderings in Figma.

I'm very interested in learning more about Extended Reality (XR) and hope to gain more skills in design for that space.

Next steps

If I were to continue this project, I would reassess the user flow while considering the user's physical space. They may need an option to define or "map" their physical workspace so that their VR workspace accurately reflects whether they are sitting or standing. This would also ensure that the user's keyboard and other devices are appropriately mirrored in the VR space.