Apple Vision Pro - UX Case study: Garage application for Bike Repair, Part 2
This is part 2 of my ongoing series for Augmented reality, catch up on Part 1
Lets start Part 2…
I am UX designer and have worked on different projects but every-time I am designing a 2d screen i always feel like what’s future of interfaces I thought of learning it more deeper in the result to that i have did course from Designerrs Academy.
What’s the problem?
“Imagine your bike battery needs to be replaced and you don’t know how to do it and 2d videos are not helping, or i can say issues which a two wheeler owner face every now and then”
I decided to take on a project centered around fixing your vehicle using augmented reality, all from the comfort of your home. When Apple dropped the bomb about Apple Vision Pro, I instantly saw the potential for a revolutionary shift in AR/VR interfaces.
What makes Vision Pro stand out is Apple’s refusal to label it as a headset, despite how it looks and is worn. They also don’t slot it strictly into the AR or VR category. Instead, Apple calls it a new spatial computing device. It can seamlessly blend digital content with the real world, turning your surroundings into an endless canvas of possibilities.
After presenting the project to the Designerrs Academy jury, I got the idea to tailor it for Apple Vision Pro with the help of my friend chetan thakur Before we got into the nitty-gritty, we kicked off the project with a deep dive into Apple’s Vision guidelines. We spent time reading, watched tutorial videos, and studied other projects in spatial design.
But before diving into the canvas, We both started this project by lots of reading and studying apple vision guidelines, watching tutorial videos, studying other case studies on spatial design and project which i have created to help user to maintain there bike.
The main goal of the project is to:
- User will be able to understand the problem with there vehicle and able to solve the issue at the comfort of there home.
- Come up with an authentic, intuitive, familiar, and immersive learning experience.
- Giving Users an ability to understand the solution capatalizing on spatial design capabilities.
- Utilise augmented reality to create the process more interactive and easy to understand
Understanding
I kicked off the project by analyzing the requirements I gathered while learning about AR/VR. Drawing inspiration from the VisionOS design pattern, I sketched out UI elements, considering their placement, information architecture, and adhering to the color palette and typographic scale recommended by Apple on their website.
Defining
In this phase, I focused on establishing a consistent visual identity for the project. This involved defining a set of colors and a typographic scale that would be consistently applied. Spatial design considerations played a crucial role in enhancing the overall user experience. I took into account factors such as intuitive navigation and users’ familiarity with similar platforms.
Following Apple’s recommendation to leverage system components, I opted for Apple’s SF Pro Display as the main typeface for its compatibility and seamless integration within the design framework.
Ideation
Once the foundational elements were in place, I delved into brainstorming and sketching to generate ideas on seamlessly integrating the existing UI & UX into spatial design. The goal was to maintain authenticity while preserving the brand’s identity. Aligning with VisionOS’ glassmorphic style, I anchored all light sources from the top left corner.
With these principles as my guide, I embarked on crafting an engaging experience. My initial focus was on a pivotal component — the main screen. This screen aimed to feature a hero image, accompanied by a tagline and key attractions of the world presented as cards. The hero page included a call-to-action (CTA) and various solution options. To maintain consistency, I integrated VisionOS’ tab bar and toolbar into the main interface. The tab bar mirrored the menus from the mobile app in my project, while the toolbar emulated the header navigation of the desktop app. These elements underwent refinements in later design phases.
Upon entering the immersive experience, a window unfolded, presenting various services such as Engine Issues, Service, Accessories, and Mechanic for the user to explore.
It’s important to note that Vision Pro doubles as an augmented-reality (AR) headset. This implies that when you wear it, you can still perceive the actual room around you. The graphics of your game, movie, or app appear to seamlessly exist within your physical space. This means that whatever the UI interface is, it seamlessly integrates into and adapts to your surroundings.
What it feels like
“Chatting with your friend and repairing your bike simultaneously”
“Watching an entertainment piece and knowing more about your vehicle”
Upon selecting a service, the application presents various bike options for battery replacement, each with distinct suboptions for the user to choose from. Given that users on this platform primarily interact using their eyes and hands, I meticulously considered the placement of my designs. Ergonomics played a crucial role in ensuring that the content is strategically positioned for ease of use. Recognizing that users often find it more comfortable to move their heads horizontally rather than vertically, I paid special attention to the placement of my design elements to enhance user comfort.
High fidelity Design
Inside the application, users have the convenience of asking Siri to check for the specific issue they’re facing. This integration allows for a seamless interaction, enhancing the user experience by providing a voice-activated way to gather information or seek assistance within the app.
Within the application, users can effortlessly type their queries or inputs directly while using it. A keyboard will be readily available, allowing users to type according to their specific requirements and express their thoughts seamlessly within the application. This feature ensures a flexible and user-friendly interaction, accommodating various preferences and needs.
When a modal opens above the existing window, it automatically introduces a subtle depth effect to the background window, highlighting the floating modal. This visual cue enhances the user’s focus on the modal while providing a context of depth, creating a more engaging and aesthetically pleasing user experience.
Wearing Apple Vision Pro, users can employ hand gestures to rotate the 3D view of their bike. This functionality enables them to inspect bike issues from various angles and choose the specific problem they want to address – for instance, guiding them through the process of replacing the battery.
Battery Replacement process
Initial Step: Understanding the Issue
- Users enter the immersive experience to assess their bike’s battery health.
- The UI provides insights into potential issues based on the bike model.
Second Step: Battery Cover Removal
- Users are guided to the second step where the UI highlights the specific battery covers that need removal.
- A side panel explains the step-by-step process of removing the covers.
Third Step: Battery Removal Process
- After successfully removing the battery covers, the UI instructs users on the subsequent steps for safe and efficient battery removal.
Details Matter
UI Foundations
In the context of visionOS, Points serve as the fundamental unit of measurement for both sizing and spacing within the user interface. This standardized unit ensures consistency and precision in design elements across the platform.
To enhance user experience and facilitate seamless interaction, visionOS mandates that interactive elements, such as buttons or icons, must provide a tap target area with a minimum of 60 points of space. This guideline aims to ensure that users can easily select these elements, reducing the risk of accidental taps and promoting a more user-friendly interface.
In visionOS, UI elements like standard buttons, set at 44 points, can visually appear smaller, provided they maintain a tap target area of at least 60 points. This is achieved by incorporating a minimum of eight points of empty space around the button. This design principle ensures a balance between visual aesthetics and functional usability, allowing for a seamless and user-friendly experience within the visionOS interface.
When designing several buttons in a stack, use standard system buttons with at least 16 points of spacing in between them.
When using visually smaller elements like a 28-point mini button, as seen in a section header of visionOS, it’s crucial to embed it within an area offering at least 60 points of space around it. This ensures easy selection and optimal usability, maintaining a balance between visual aesthetics and functional accessibility.
This small button still has 60 points of space around it because the text next to it is not interactive (as shown in the example below).
Similarly, using large and extra large buttons requires less spacing around them, because each button’s size is close to 60 points, making interactions easy (as shown in the example below).
Placement of Ornaments
For ornaments positioned at the bottom edge of the window in visionOS, overlap them by 20 points to integrate them with the main window. This subtle overlap maintains visual cohesion without blocking crucial content, ensuring a harmonious design.
Borderless Buttons
Since ornaments are usually a collection of buttons and sit on their own glass container, this is a perfect place to use borderless buttons. In this case, it’s clear that these are interactive elements, and they’ll still get the hover effect as people look at them.
Spacing during Hover Effect
When crafting layouts in visionOS, it’s crucial to consider the hover effect. For instance, when designing a list or menu, include a small but essential amount of padding between each item to prevent the hover effect from overlapping. A recommended spacing of four points helps maintain a clean and visually distinct interface, ensuring an optimal user experience.
No Dark Appearance
Apple vision pro don’t have any dark appearance mode as UI Emmits lights as per the surrounding.
Vibrancy
Our thoughts
Designing for Apple Vision Pro has been a revelation, offering a vast canvas of new opportunities that go beyond conventional design constraints. The immersive nature of this experience has the potential to revolutionize how users learn and engage with content, marking a significant shift in the traditional paradigms of user interaction. As a UX designer, I’ve recognized that the more immersive the user experience, the greater the responsibility to deliver an optimal and seamless journey.
This heightened responsibility underscores the need for a meticulous approach in crafting interfaces that not only captivate but also prioritise user experience. The process of delving deeper into the intricacies of Apple Vision Pro has not only contributed to the success of the current project but has also ignited a passion for continuous learning and a commitment to pursuing similar innovative paths in future design endeavour's.
