CONCEPT / UNITY / XR

ZENDAYA.COM in vr  

OVERVIEW

Redefining unique website in VR environment

Redefining unique website in VR environment

Role
Research
3D Assets
UX/UI
Visual Design 


 

Tools
Unity
Figma
Photoshop
SketchUp 


 

Duration
20 hours


 

How can we rethink websites in VR?

How can we rethink websites in VR?

The adoption of Virtual Reality inevitably will change our view about personal websites. This prototype is an experiment to explore and evaluate how this transformation will take a place. My main strategy to do this experimentation is based on 3 basic steps:

πŸ’‘ Exploration: Explore core web design concepts and elements

πŸ’‘ Translation: Transform two-dimensional concepts into three-dimensional space

πŸ’‘ Discovery: Invent new design concepts for VR websites

 

screencapture-zendaya-2022-09-28-22_39_48 copy

EXPLORATION

Current state of web design elements 

In web design, our experiences are fixed with framed 2D devices. Contents usually appear as flat rectangles in different sizes and orientations. In order to design and organize websites, we rely on canonical design patterns and models. The most important web design models are Information Architecture and Visual Hierarchy.

Information Architecture

In web design, Information Architecture organizes, creates structures and labels the content effectively for users. 

πŸ‘‰ Organization Structures: How you categorize and classify information.

πŸ‘‰ Labeling & Searching Systems: How you represent information and how users look and find the information.

πŸ‘‰ Navigation Systems: How users navigate and move through information.

Group 37

Visual Hierarchy

Visual hierarchy is the critical foundation of visual communication on websites. Text blocks, images, videos, and white spaces are the key elements of web design and their visual organization shapes the experience of the user.

πŸ‘‰ Size and Orientation: Proportion among different elements and how they organize is important to create a good visual hierarchy.

πŸ‘‰ Contrast: Using dramatic contrasts and color balance will be helpful.

πŸ‘‰ White Space: Designing white spaces is equally important as designing the content.

How can we translate essential web design conventions into a meaningful 3D design system and VR experience?

TRANSLATION

Decoding Information Architecture

Landing Page is the key aspect of Information Architecture. It helps to focus user attention on a specific target and inform users about the entire experience of the website. Landing Page can transform into a Landing Zone; a lobby space that sets the first impression. Landing space can orient users and help them navigate through the 3D environment.

Clear navigation is critical for any website. On websites, navigation can be handled through a few actions such as scrolling through pages or clicking buttons. In 3D these conventions turn into spatial navigation. Users can navigate through spaces (pages) with locomotion and teleportation. 

landingpage
navigation

Rethinking Visual Hierarchy

Image / Video blocks are primary elements of visual hierarchy in web design. Users can interact with these contents in several ways such as clicking, hovering over, swiping, and so on. In VR we can transform static image/video blocks into more vibrant and lively 3D image panels. Image panels can be utilized to define new ways to interact with digital content. 

Similar to Image Blocks, Text blocks are also one of the main elements of visual hierarchy. Translating Text Blocks to Text Panels would unlock new methods to interact with the content. 

imageblock
textblock

In the visual hierarchy, white space can balance a visual area, direct users’ eyes to certain areas, and improve the overall user experience. Similar to web design, spatial design also uses white (negative) spaces as a secret weapon to ensure balance, enhance legibility, and increase engagement. 

WHITESPACE

PROTOTYPING

Aesthetic Explorations

Websites live in framed rectangular 2D environments. It limits the user experience and focuses on framed flat surfaces without spatial dependencies. VR environment breaks away from this tradition and brings 3D immersive storytelling.

In order to reflect the visual style of the iconic website, I developed an overall mood, tone, look & feel which aligns with the message of the website. This strategy

πŸ’₯ Spatial Design reflects the information architecture of the website with connected spaces: Landing Page, Press, Film & TV, and About.

πŸ’₯ Creative direction of zendaya.com as an inspiration to create a dreamlike yet vibrant environment with soft colors and a texture palette.

SSZENDAYA copy
Group 167
Group 166-min (1)
TARKA2

ο»ΏSOLUTION

⚑ A website reimagined in Virtual Reality!

First Prototype

The early prototype helped me to identify spatial and environmental problems such as scale, proportion, color, and lighting conditions as well as experience and interaction problems like orientation, affordances, and accessibility. Key takeaways from this prototype are: 

 πŸ‘‰ Floating UI elements need to be associated with spatial elements.

πŸ‘‰ For better navigation, a map needs to be included in the Landing Zone.

πŸ‘‰ Faded and animated objects and UI elements need to be added for a more interactive experience.

The early prototype helped me to identify spatial and environmental problems such as scale, proportion, color, and lighting conditions as well as experience and interaction problems like orientation, affordances, and accessibility. Key takeaways from this prototype are: 

 πŸ‘‰ Floating UI elements need to be associated with spatial elements.

πŸ‘‰ For better navigation, a map needs to be included in the Landing Zone.

πŸ‘‰ Faded and animated objects and UI elements need to be added for a more interactive experience.

firstiteration min

Landing Zone

The Landing Zone is the special environment where the first impressions are set. It aims to deliver information to users about the overall experience and navigate users with visual and interactive cues. Aligned with Zendaya's powerful yet energetic and elegant character, the landing zone has interactive elements that convey a soft, dreamlike feeling to users.

1712×962-screenshot (9)-min
landingzone min (3)
landingzone min (2)

 πŸ‘‰ Curated Interactions

The landing zone is equipped with some interactive and visual elements. Floating spheres with particles, hovering magical planters and an interactive map with rotating cubes are carefully located in the Landing Zone to counterpose the entrances of other spaces. 

landingzone min 5 (1)
landingzone min 5 (2)
landingzone min (1)

Navigation Map

As a special navigation and orientation tool, a 3D map is located in the Landing Zone for users to better understand their location and give them an overlook of the entirety of the immersive experience. 3D map situated on top of a cylindrical plinth surrounded by a particle halo. Floating cubes also aim to draw the attention of users to the map.

1712×962-screenshot (8)-min
map(4)
map(1)

πŸ‘‰ Gamification of the space

The map has interactable elements to enhance motivation and engagement while informing users about the spatial features of the space. Model trees can be re-arranged by users or turned into a fun spectacle thanks to their odd relationship with gravity. With this simple interaction, I aimed to grab the attention of users in the early moments of the experience and inform them about the space.

1712×962-screenshot (7)-min

Press Zone

Press Zone is dedicated to Zendaya's media presence through various online and printed magazines. As a prominent and award-winning fashion and Hollywood icon, Zendaya is regularly featured in magazines like Vogue, Elle, Variety, and many more. Her interviews and photos can be experienced in Press Zone through interactive image and text panels. The circular layout helps to build equal priority for each media material. 

1712×962-screenshot (14)-min
press(6)
press(2)

πŸ‘‰ Rules of Engagement

To ensure streamlined user interaction to reach the content, I have created a 3 step spatial interaction method:

1️⃣ Depending on the user's approach, interaction buttons reveal themselves when users enter the visual range and invite users to discover more about the content.

2️⃣ Interacting with buttons opens up scrollable side panels and allows users to consume more text and image content about the specific magazine.

3️⃣ Exiting out from the visual range simply deactivates the buttons and extra content and minimizes the visual load of the space in order to allow interaction with other content without a mess. 

To ensure streamlined user interaction to reach the content, I have created a 3 step spatial interaction method:

1️⃣ Depending on the user's approach, interaction buttons reveal themselves when users enter the visual range and invite users to discover more about the content.

2️⃣ Interacting with buttons opens up scrollable side panels and allows users to consume more text and image content about the specific magazine.

3️⃣ Exiting out from the visual range simply deactivates the buttons and extra content and minimizes the visual load of the space in order to allow interaction with other content without a mess. 

press(7)
press(1)

About Zone

About Zone is used to present information about Zendaya's versatile career and personal journey.  This space has two horizontal slits which focus user attention on a specific point on the wall while offering great views endless environment. The interaction plinth sets the viewing distance between the user and the media presented on the wall. 

1920×1080-screenshot-min
about1-min
about3-min

πŸ‘‰ Simple Button Interaction

The interaction plinth is designed to help users to navigate through different sections of information packages. 3D text "Learn More" indicates that buttons are interactable and two buttons located on top of the plinth simply swap text and images. 

about4-min
about8-min

Film & TV Zone

Film & TV zone is showcasing video trailers of Zendaya's brilliant acting performances. An Interactive list of Film & TV items situated on the wall and a floating screen with an infinite view of a desert-like background enable users to review videos. The list has interactive properties such as hover-over actions. The video surface deactivates when the user leaves the zone. 

Image_0001
filmtv (5)-min
filmtv (1)-min
1712×962-screenshot (2)-min
filmtv (4)-min
filmtv (2)-min

RETROSPECTIVE

❕User Interaction is an essential aspect of any VR experience

This project was a great way to explore the challenges and opportunities of adapting UI and UX methods to the VR environment. It was critical to understand the importance of user interaction and the variety of options. There are plenty of other ways to interact with the media content in VR and inventing meaningful interactions will be my next goal. 

❕Gamification is a helpful tool for engagement and storytelling

It is possible to invent new and better ways to interact with the media. Especially floating text and image panels can be more captivating with some enhancements. The gamification aspect can be improved and extended to the overall experience. 

❕ Potential Add Ons

Certain game design techniques are extremely helpful to solve engagement problems. Gamification also supports to development of stories and behavioral patterns for users.  In this project, I used a 3D map of the entire experience and allowed users to play with certain elements. This effort was impactful for users to navigate and understand the space better.