Madison Green

UX/UI Designer

Hygge

Choose Your Reality

The Context

This design concept emerged from my participation in a designathon hosted by a Y Combinator company. The challenge prompt for this event was: "How might we intentionally create a better world through the metaverse?" In response to this theme, my partner and I devised a concept leveraging the VR headset experience.

Problem

Working or studying remotely can be mentally draining, leading to a sense of stagnation and confinement within one's own surroundings. Existing virtual workspaces predominantly cater solely to collaborative tasks and communal workspaces, failing to address the needs of individuals seeking personal escapism and diverse real-world environments in their private virtual work/study experiences.

Solution

Hygge is an innovative VR application that empowers individuals to take control of their environment. Our aim was to bridge the gap in the market and create a real-world-inspired VR application that utilized real (copyright-free) visuals.

Recognizing the profound impact of the COVID-19 pandemic on people's lives, Hygge addresses the longing for exploration and a return to a sense of normalcy. By providing a much-needed reprieve from the pandemic's negative mental health effects, our application offers a transformative and rejuvenating VR experience.

Project details

Duration: 1 week

Role

Product Designer

Team of 2

Process

Discovery & Research

Ideation

Design

Prototype

Reflection

Tools

Figma

Google Forms

Slack

Zoom

01. Discovery

Annotating content found in competing products

01.01 Competitive Analysis

To kick off our sprint, we conducted a competitive analysis to compare the features of leading VR workspace applications. This analysis revealed significant gaps in the market, including:

Limited options for environments
A predominance of cartoon styling
Intrusive elements such as avatars, fake computer mockups, etc.
Lacking environment flexibility.

01.02 User Survey

To further inform our discovery process, we conducted a survey of 29 VR users who were also remote workers.

Key takeaways:

Users wanted to personalize their environments rather than be stuck with a cartoonish VR-simulated office.
Users wanted the option to have multiple screens and other accessibility features, such as contrast options, theme settings, etc.
Users needed a boundary alert as a safety feature to let them know when someone has entered their physical space.

01.03 Personas

Given the information found in our research process, we were able to develop two unique personas reflective of our users:

Anya Simmons: a recent college graduate who has transplanted to a new city. She used to hike in nature often and explore her hometown's nature trails but now feels “stuck” at home and depressed since she is now working and attending grad school remotely.
Evan Peters: a once-reformed agoraphobic novelist who has been suffering severe flare-ups of his condition since the pandemic began. Before his battle with agoraphobia resumed, he enjoyed going to busy cafes where he found the most creativity to write his novels. He longs to experience public environments again, but from the safety of his home in order to reduce anxiety.

Anya Simmons — Post-grad remote worker
Evan Peters — agoraphobic novelist

02. Ideation

02.01 Sketches

Drawing inspiration from the valuable user feedback we received and armed with a solid concept, I embarked on the design exploration phase, sketching out various ideas. These sketches included:

A concept for the device selection landing page, focusing on how users would connect to their external desktop(s) and how the content would be mirrored inside the virtual workspace.
Exploring the look and feel of the selection screen for the provided environment(s), aiming to create an intuitive and immersive experience.
Deliberating on the design of a "pre-immersion" screen, considering accessibility-related options to ensure minimal overstimulation and adherence to XR accessibility standards.
Developing a full-screen concept for the dashboard within the workspace, envisioning an efficient and visually pleasing interface.
A concept for an in-app user profile and external user connection functionality.

02.02 User Flow

After some deliberation (with the time constraints in mind), we made the decision to follow the user flow of an existing user within the app. To create a clear understanding of the app's navigation and functionality, I crafted basic user flows that outlined the user's path from device selection through adjusting in-app workspace settings. It was assumed that the user had already completed the onboarding process and successfully synced their account to their devices.

02.03 Site Map

To further refine the user experience, I expanded on the initial user flow and created a comprehensive sitemap. This process allowed us to ensure a cohesive and well-structured user journey while also clarifying the delineation between system-controlled components and those that required representation within the product's information architecture.

03. Design

03.01 Moodboard

This product was strongly influenced by the concept of "escapism." While drawing inspiration from existing products like LifeAt and other non-workplace VR applications, we focused on creating a look and feel that prioritized a calming and non-overwhelming experience while maintaining ease of use and customization.

In line with our vision, we decided on a fitting brand name: Hygge (pronounced: hue-gah). Hygge is a Danish word that encompasses the idea of "a quality of coziness and comfortable conviviality that engenders a feeling of contentment or well-being." This name encapsulates the essence of what we aimed to offer users - a virtual environment that provides a sense of comfort, relaxation, and overall well-being.

03.02 Style Guide

With our brand identity established, I focused on defining the visual style for the product. Firstly, I incorporated glassmorphism effects into the iconography. This not only provided contrast for better accessibility but also added a subtle 3D feel to the elements, complementing the immersive nature of the VR medium.

Additionally, I opted for a simple color palette and highly legible fonts. The goal was to avoid overwhelming the user, considering that they would be experiencing the product in a 360° view. By using clean and straightforward colors, we aimed to create a calming and unobtrusive visual environment. The highly legible font choice ensured that users could easily read and comprehend the information presented, enhancing the overall user experience.

03.03 High-Fidelity Screens

Following the sketching phase and the development of our style guide, we transitioned directly into the design phase. Given our time constraints, I opted to design high-fidelity screens without creating wireframes beforehand. I focused on crafting high-fidelity screens to ensure a seamless translation of the user journey from ideation to design. It was so fun to imagine a product that could transport a user anywhere. A busy city, beside a creek, within a coffee shop, in the mountains, etc., in an all-immersive environment.

Application Homepage — existing user is already logged in
Here, the user can choose their environment
The user chose a "nature" themed environment— here they choose a specific nature scene
User enters environment — they've adjusted their settings so that the workspace is already open for them
User presses the "visible content" option on the navigation bar
User chooses to hide the workspace window
User can select "visible content" button again to make content visible again.

I created a prototype for an active user who had customized their app experience with a nighttime setting, added a clock and a timer, and opted for a dual-screen setup.

04. Prototype

Prototyping

During the designathon, we relied pretty heavily on self-validation to gauge the usability and effectiveness of the design. I used prototyping as an opportunity to review the product's interactions and evaluate the overall experience to uncover any potential pain points, inconsistencies, or areas for improvement. Unfortunately, the time frame for the sprint was very short, but this gave me the space to fine-tune and enhance the product's usability, even without the luxury of user testing.

05. Reflection

This project, in retrospect

Participating in this designathon was an incredibly fun experience. I believe my partner and I collaborated very well despite only having known each other for about five days. It was thrilling to witness the convergence of our individual processes and witness the birth of such an innovative product through our efforts. I couldn't be happier with the concept we came up with, and I'm eager to find a developer to bring it to life. Considering the challenges imposed by the pandemic, I strongly believe that this app holds immense potential to offer a much-needed mental escape and a healthy dose of Hygge to anyone who uses it.