One of the most extensive projects I’ve worked on where I had the opportunity to strengthen my abilities as a multi-disciplinary designer in a multi-device and technology environment (Web / mobile / desktop / VR / MR) leading all the design disciplines in different stages. I appreciate and find it crucial, to always keep in the loop and have clear communication with all cross-functional partners for any given project, this helps me to always have in mind all considerations, capabilities and other team’s ideas when designing and providing feedback.

The challenge ahead of us was to design a set of experiences for VR / Viveport Store and tutorials while unifying this work with any 2D areas related to this technology, hence the effort of creating the Design System, constant user testing, in device, on desktop and even paper prototypes to validate the possible solutions to each individual experience and benchmark the processing power of the device to adapt any graphics and features that might be out of scope but that will be used later on.

VIVE - Viveport

Rolls : Research / Concept / Environments / UX lead and mentor / Visual / Motion / 3D / Design Systems / Unity

While the heuristic analysis revealed many deviations from the updated usability standards, a few recurring open questions stood out for their significant impact on the overall user experience.

Heuristic analysis

Hardware setup and troubleshooting

The initial setup was intimidating, requiring precise placement of sensor towers, cables, and controllers at specific heights and distances. Once assembled, users had to launch the software’s hardware diagnostics—only to discover that any misalignment or error meant returning to the physical setup to reposition or reinstall components.

Extensive but necessary content and system information

During the discovery phase, users encountered a comprehensive list of technical requirements—graphics card specifications, maximum player count, room setup (standing vs. seated), and more—that they needed to understand to ensure an optimal experience. However, presenting all of this information at once proved overwhelming and often caused more confusion than clarity.

Help & documentation

Users also had difficulty knowing which topics or keywords to use when searching the help content, making it hard to find relevant guidance. Although contextual assistance existed, early adopters hadn’t received sufficient pre-education on the new technology.

Exploded view of a virtual reality headset and accessories, including controllers, sensors, cables, and a stand, all organized within a box.

Instructions for installing and adjusting a base station mount with illustrations showing mounting, angling, and connecting the power cable.

Acknowledgment of Complexity

We knew this would be a large, multifaceted effort: introducing a new VR technology meant designing a clear, well-documented process spanning hardware requirements, setup, day-to-day usage, content consumption, and even content creation. At the same time, we had to educate new adopters and up-skill our UX team on best practices for the VR space. To make this manageable, we first identified every key area—prioritizing those that would need ongoing user testing—so we could allocate resources effectively and integrate our research team early in the pipeline. Then, we broke each area into its core stages.

Out of the box experience

• Unpacking: Guiding users through hardware unboxing and component checks

• Installation: Step-by-step setup, including software installation and device calibration

• Content Discovery: Helping users find, launch, and explore VR experiences

Viveport Store (VR, Mobile & Web)

Next, we tackled the content discovery journey. Our goal was a seamless, unified experience across headset, mobile, and web platforms—enabling users to browse, learn about, install, and launch apps and games with the same intuitive flow across every touchpoint.

Cross-collaborations

I collaborated daily with engineers, Unity prototypers, and researchers, using a variety of methods to map the journey, uncover pain points, and develop solutions as we progressed.

OOBE - Out of the box experience

During our collaborative effort, our team engaged in a series of diverse rounds of testing and optimizations. As designers, our primary focus was to gain a comprehensive understanding of how developers interacted with all areas and functions within Studio to craft engaging user experiences. By delving deep into this aspect, we were able to fine-tune our designs to ensure seamless integration and optimal usability. Through meticulous observation and data-driven insights, we strived to create a platform that not only met but exceeded the expectations of our users, resulting in a product that resonated with developers and users alike.

Diagram of Vive virtual reality controllers labeled with buttons: Menu, Trackpad, System, Status Light, Trigger, Grip Button, with a black background and blue labels.

$A black computer screen showing a software installation process with a pop-up permission request to install an NVIDIA graphics plugin. The background has faint images of VR headsets and controllers, with some text partially visible including fractal shapes and installation steps.$

Virtual reality setup screen with text about achieving the unimaginable through VR, displaying installation progress of drivers with 12 items remaining, and options for software installation, hardware setup, and room setup.

A screen showing a language selection menu for HTC Vive with options including English, Chinese, Danish, Dutch, Finnish, French, German, Spanish, and Vietnamese. The current time is 12:34 in Seattle, WA.

Screen displaying instructions for mounting base stations in an overlapping field of view, with a diagram showing a 120-degree angle, and menu options for installing software, hardware setup, and room setup.

Digital game store interface showcasing a game called 'Surreal World' with a scenic in-game landscape in the selected bookmark, plus game details, system requirements, new features, developer information, price, and recently added games.

Screenshot of a digital storefront displaying a game titled 'Surreal World' with a thumbnail of a forest scene, 4.2-star rating, priced at $4.99, and a row of other game thumbnails below.

UX / Wireframes / Testing

When VR technology was introduced, a great challenge presented itself in the form of a lack of resources and research on crucial areas such as spatial content awareness, gestures, touch areas, teleportation, and environments. Despite this obstacle, I was given the opportunity to mentor the UX team through my 3D experience. I spearheaded efforts to define the spatial system, including grids, distances, touch areas, level of details (LODs), and more. By leveraging my expertise, we were able to make significant strides in creating a seamless and immersive VR experience for users, addressing the gaps in understanding and paving the way for more refined virtual environments.

A digital storyboard layout with multiple rectangular panels containing placeholder text, category tags, and icons, arranged in a grid with sections labeled FEATURED CONTENT, SPECIAL CONTENT, and TOP STORIES.

A detailed website layout diagram with placeholder text, categories, and content blocks for featured content, special content, and top stories.

A website layout with a header titled 'Category Overview' and a main section labeled 'Category View - 01' showing a wall view with scattered content. Multiple text boxes with 'Category Tag' labels and placeholder text are arranged across the layout. There is an illustration of a person sitting, crossed arms, with a sneaker on one foot, located at the right side of the layout. The background features red and gray accents, and blue annotations describe design elements.

Screenshot of a slide showing story view options with icons and text descriptions for 2D video, 360 video, 360 image, and gallery. The slide includes icons representing different media types and some placeholder text.

Wireframe layout of a webpage with a category overview section, displaying top stories about Baltimore Ravens vs Bengals, Maria Sharapova, and Seahawks vs49ers, with various sub-category tags, headlines, and placeholder text.

Flowchart explaining the process of populating 3D content in a layout, with instructions on handling insufficient content and starting from the center outwards.

Map layout with placeholders for featured content, special content, and top stories, including header titles and diagram with 3D content icons.

A website wireframe layout titled 'Category Layout 04' with sections for featured content, special content, and top stories, including placeholders for text, images, and 3D content icons.

A layout and content design diagram for an exhibit or display space, showing visual and motion elements, with annotations about user interaction, content positioning, and design rules.

Portal Concepts

First we started exploring different ideas on how the content could be accessed in a 3D environment, at that time none of the team members had a clear understanding on how to design for this space, giving me the opportunity to jump in not only as a visual and motion designer lead, but also as a UX driver and mentor to a group of designers to highlight those areas of opportunity and exploration.

Portals is one of those first definitions we started working around to have the user teleport or invoke different areas or content, while the wireframes were being defined, I started concepting how the content could be deploy, how this could be move around, most important, how the hierarchy and levels of interaction could make sense for the user without getting lost in the experience or in between transitions.

A digital interface displays three video game covers in hexagonal frames: the left features astronauts on a planet with a large floating crystal below a blue sky, the middle shows a bearded warrior with tattoos, and the right depicts a man with a robotic arm in a post-apocalyptic landscape. Buttons labeled "Teaser" and "Buy" are beneath the centers of the covers.

Collection of video game art featuring science fiction and fantasy themes, including a landscape with astronauts, a fierce bearded warrior, and a futuristic soldier, displayed on hexagonal screens.

Futuristic infographic with multiple hexagonal shapes, featuring sections labeled 'Area 001,' 'Area 000,' and 'Area 002,' centered around a hexagon with the text '32 Friends online,' and the game title 'SPACE INVADERS' highlighted in green at the bottom.

Futuristic infographic with hexagonal shapes and glowing lines showcasing three areas labeled 000, 001, and 002, with a central section mentioning 32 friends online and the game 'Space Invaders' as the most popular game.

Futuristic science fiction laboratory with glowing green and white lights, and advanced machinery.

Close-up of a futuristic, glowing watch face with illuminated markers and mechanical components visible through a circular window. The watch has a dark, sleek design with greenish light accents.

Environment Concepts

I concept a diverse set of environments that cover most of the style spectrum, encompassing minimalist designs and a futuristic approach. By blending these contrasting aesthetics, I aim to create spaces that are not only visually captivating but also thought-provoking. The clean lines and simplicity of minimal styles bring a sense of tranquility and sophistication to the spaces, while the futuristic elements add a touch of innovation and avant-garde flair. This harmonious juxtaposition results in environments that are both timeless and cutting-edge, appealing to a wide range of tastes and sensibilities.

A modern, multi-level concrete house with curved edges, featuring large glass walls and interior spaces illuminated with warm lighting. The house is built on a platform with external stairs leading up to the entrance.

Modern bathroom with a clawfoot bathtub near large floor-to-ceiling windows showing a blue sky with clouds, and decorative stones on the floor.

A modern home office with a dark gray sofa, a large window, a desk with a lamp and books, a black office chair, a small robot on a cabinet, and a textured wall art piece.

A modern round glass house with transparent walls, situated on a grassy hill surrounded by large rocks and purple flowers, with a sunset sky in the background.

Viveport (Store)

Over several years, I had the opportunity to lead a range of design initiatives for the Viveport VR Store, beginning with the initial concept and early UX storefront prototypes, which I continued to develop and refine through to the final launch. I collaborated across the full lifecycle of the project, overseeing the development of the visual identity, UX/UI systems, and immersive environmental designs that defined the storefront’s presence across both 2D and 3D VR experiences.

In the early stages, I partnered closely with product and engineering teams to map user journeys and design wireframes that balanced intuitive navigation with the unique spatial complexities of VR. I established a cohesive design language that translated seamlessly between traditional screen interfaces and fully immersive environments, ensuring a consistent, accessible, and comfortable user experience.

Throughout development, I produced high-fidelity mockups, 3D spatial layouts, motion studies, and interactive prototypes to communicate and validate key design decisions. I worked closely with developers to optimize assets and animations for VR performance constraints, while maintaining a high standard of visual and experiential quality.

Virtual reality store interface displaying a summer sale, a scenic mountain landscape, and various VR titles including 'Realities GO Places' and 'Titans of Space 2.0.'

Virtual reality interface showing a documentary selection screen with landscape image of snow-covered mountains under a starry sky, and a film titled 'Wanderers - a short film by Erik Wernquist' at the bottom.

Screenshot of a virtual reality content library interface with downloadable DLCs and VR previews, superimposed over an outdoor balcony scene with a railing, a plant, and a cityscape in the distance under a blue sky with clouds.

Virtual reality scene with a balcony overlooking a cityscape and a green park, featuring a floating UI menu for game selection and a digital storefront, with a futuristic design and digital elements.

Concepts for Testing and Development

I worked defining and concepting the content areas, each aimed at showcasing a specific experience, conveying essential information, or highlighting a system feature. By carefully crafting these concepts, I ensure that not only is the content visually engaging but also structured in a way that effectively communicates key messages to the target audience.

UI Concepts

When it comes to creating a captivating user interface, incorporating a diverse set of UI concepts can truly elevate the design and user experience. In today's digital landscape, showcasing a variety of concepts and ideas through UI design can help engage users and communicate information effectively. Concepts such as minimalism, material design, neumorphism, and futuristic interfaces offer unique ways to present content and interact with users. By blending these diverse UI concepts, designers can create visually stunning interfaces that cater to a wide range of preferences and styles, ultimately enhancing the overall user experience.

Digital storefront displaying the game 'Surreal World' with colorful landscape art, price of $4.99, and options to add to wishlist or view details.

Screenshot of a virtual game library and trophies interface, displaying game titles, avatars, and achievements on a digital screen.

A digital storefront interface displaying a virtual reality game titled "Surreal World" by A Little Lost, priced at $4.99 with a rating of 4.2 stars. The interface includes sections for description, system requirements, what's new, and related titles, with game thumbnails and recently added game images below.

Game screen for 'a Little Lost' featuring a colorful, animated forest with red and green trees, a large boulder, and a flying blue bird with sparkles around it. The game title is in the center, with navigation arrows on the sides and a purchase price of $4.99 below.

Screenshot of a digital storefront with a featured game titled 'Surreal World' and with artwork depicting a vibrant, surreal forest landscape with red trees, rocks, and a glowing sky.

Digital marketplace interface displaying a surreal, colorful landscape titled "Surreal World." The scene features a vivid forest with red and green trees, large rocks, and a mountainous background under a green and blue sky. Various game titles and options are shown, including a "Most Popular" filter, a checkout button, and a screen indicating a game download in progress.

AIO

When adapting visuals, user experience, and content for AIO (All In One) that doesn't require a PC for operation, simplicity and efficiency are key. The visuals should prioritize clarity and minimalism to ensure quick loading times and smooth performance on the device. User experience should focus on intuitive navigation and straightforward design to cater to users with varying technological proficiency. As for content, optimizing for the device's capabilities by reducing unnecessary animations or high-definition graphics can enhance the overall user experience.

Virtual reality headset interface showing VR game menu with options like Practice shooting, Fancy Shooter, Vive Video, Raw Data, Vive Browser, and a central screen displaying Oasis beta. The background outside shows a balcony overlooking a city skyline and water, with a blue sky and scattered clouds.

Design System

We embarked on a journey to develop our design system while delving into the realm of React components. This initiative aimed to streamline our workflow, increase efficiency, and foster a cohesive ecosystem across all Vive platforms. By creating a unified design system, we can ensure consistency in user experience and design elements, ultimately enhancing brand recognition and usability.

Color palette with six different colors displayed at the top. Below is a website layout resembling a user interface for Viveport, showing navigation options, icons, and buttons for VR content, with labels like 'REDEEM' and 'START FREE TRIAL'. A message at the bottom indicates a video search feature is coming soon.

Web design layout showcasing color palette and title card styles with color codes and sample content.

Design mockup of web or PC product cards with detailed layout measurements, labels, and annotations, including elements like images, titles, prices, ratings, descriptions, and action buttons, with grid and spacing specifications.

A detailed dark-themed user interface diagram showing various input fields, controls, panels, buttons, icons, and toggle switches for designing a user interface. The diagram includes sections for inputs and controls, dropdowns, sliders, checkboxes, keyboard shortcuts, pills, scrollers, buttons, panels with properties, icon states, and text labels.

Digital design of virtual reality-themed product and game cards, with images of virtual reality headsets, animated characters, and labels indicating upcoming releases and actions.

Website (4.0 Concept)

Whether you're a seasoned VR enthusiast or a newcomer looking to dive into the world of virtual reality, the goal of Viveport's website was to offer a central hub where our diverse community can connect, discover, and engage with the exciting possibilities of VR technology.

A promotional webpage for Infinity VR subscription service featuring a large central image of two people standing before a swirling, glowing VR portal. The page offers subscription options, game thumbnails, and images of VR hardware including headsets and controllers.

Screenshot of a webpage showcasing a virtual reality game titled 'Ready Player One' by Vive Studios. The page includes game description, system requirements, reviews, related games, and a promotional image from the game featuring a person with a VR headset and futuristic background elements.

Infiniti promotional webpage showing plan options for a 14-day free trial, with monthly plan costing $12.99 per month and annual plan costing $8.99 per month. The background features a woman with long hair and a futuristic scene with a planet, spaceship, and science fiction elements. There are buttons for starting the free trial and redeeming a code.

Online payment setup screen for Infinity subscription, showing payment details and options

Website (3.0 Concept)

Virtual reality platform webpage featuring account creation form and subscription details, with a dark mountain landscape background.

Screenshot of a website page with a map in the background, showing a pop-up menu for creating an account with country selection, and a section for subscription plans offering $8.99 per month with a 14-day free trial.

Subscription page of VivePort website showing email verification and subscription options, with a dark mountain landscape background.

VivePort subscription webpage with a 3D geometric sphere, showing $8.99 per month, 14-day free trial, and account creation form against a dark mountain landscape background.

Redlines

A senior visual designer should possess a comprehensive skill set that extends beyond just focusing on the aesthetic aspects of a design project. It is crucial for me to be proficient in approaching projects in a systematic and organized manner to boost productivity. By being able to strategize and plan effectively, the designer can streamline the design process and ensure a smooth transition when expanding on an idea or handing off deliverables to engineers. This holistic approach not only enhances the overall quality of the final product but also facilitates collaboration and efficiency across the project team, resulting in a more successful and impactful design outcome.

Screenshot of a complex digital interface overlay on a scenic background of a river and city skyline. The overlay contains multiple labeled sections including websites, forms, and multimedia controls, with various colored borders and annotations for navigation and content organization.

Virtual reality interface showing filter menus for content selection with the background of an outdoor balcony overlooking a cityscape, water, and a partly cloudy sky.