Android XR
Elevating Android XR through immersive storytelling
Duration
2024 | 2 months
Role
UX/UI Designer
Responsibilities
Page structure, Wireframes, Storyboards, Prototyping, UI design
Overview
Set to announce their new extended-reality (XR) platform at the end of 2024, Android tasked us with designing a landing page to educate users and build excitement. The page needed to strengthen consumer perception of Android as they entered the VR/XR space and showcase the transformative potential of both Android XR headsets and glasses.
The vision
Our team had a vision to simulate XR's 3D, immersive experience. The key challenges were conveying this immersive experience within a 2D webpage and introducing the two form factors without displaying any product images (set as a constraint by the client). We leaned into designing from a first-person perspective where the user could enter and interact with key use cases provided, including XR Google Maps, YouTube, and Google Photos.
Aligning the narrative
We started by structuring our page around XR's potential in entertainment, productivity, and learning. However, as we moved into wireframes, we realized that presenting the narrative by areas of influence made it hard to distinguish the unique capabilities of the headset and glasses.
We revisited the narrative to be more clearly structured around the two form factors instead. The page design featured an engaging hero, followed by dedicated headset and glasses sections. Within each section, we showcased how Google's AI assistant, Gemini, further enhances functionality to reinforce the XR's competitive edge.
Concept exploration
To ensure consistency and reduce development effort, we leveraged mostly existing design system components, while only introducing custom elements for highly interactive modules. All designers worked in parallel and regrouped often to iterate on concepts together, exploring UX, visuals, and motion for cursor interactions, scroll states, and hover states. Ensuring a seamless interactive mobile experience was also a key priority throughout our exploration, given that mobile users accounted for 90% of site visits.
Storyboards and refinement
The client wanted to further differentiate the storytelling between headsets and glasses. To address their feedback, we added clearer labelling, copy, and iconography for wayfinding through the page experience. As we polished our designs, we created storyboards for each interactive module and their use cases. These storyboards were the basis for our full-page mobile and desktop prototypes which we used to bring our designs to life and align with the client.
Final designs
From creative vision to design and development, our team delivered a fully responsive, interactive webpage unlike anything the company had previously published. We successfully translated the 3D immersive experience of Android XR into a compelling 2D format, using storytelling to both educate users and capture the essence of extended reality. This new page marks an exciting release, elevating the brand and establishing a premium feel for the Android and its latest product.
Learnings
Staying proactive
Proactive communication was essential in this fast-paced project, especially as teammates designed in parallel. Regular check-ins and feedback loops ensured alignment and kept our concepting and refinement phases efficient.
Adapting quickly
When we learned that Android was unable to provide image or video assets within our project timeline, we overcame this blocker by leveraging placeholder content to effectively communicate and direct our vision to the client.
Designing to tell a story
This experience also gave me the opportunity to flex into visual design and storytelling, using high-fidelity mockups, storyboards, and prototypes to communicate a narrative to both client and end users.
