The scope of the project involves leveraging the AR capabilities of Meta Quest goggles to create a car wrapping experience. Meta has tasked us with developing an app that utilizes the pass-through mode and hand tracking features, allowing users to visualize and edit colors on their own vehicles in real-world environments.
One of the key challenges faced by users in real-life car wrapping experiences is the lack of visualization of the final outcome. Traditional car wrapping processes often involve selecting colors and designs based on physical swatches or digital images, which can be difficult for users to accurately envision on their own vehicles. This limitation hinders their ability to make informed decisions and may result in dissatisfaction with the final appearance of the wrapped car.
Additionally, the time and cost involved in physically applying and removing car wraps for trial and error purposes pose practical constraints for users. Therefore, there is a need for a solution that provides users with a realistic and interactive visualization of car wraps, allowing them to explore various colors and designs before committing to the actual application.
The research phase began with exploring existing apps in the Oculus Store that supported hand tracking, such as Hand Physics Lab, Spatial, and Meta Workplaces. Through hands-on testing and observation, we identified design restrictions and took detailed notes.
However, given the limited availability of apps supporting hand tracking and even fewer supporting pass-through mode during our design phase (early 2022), we recognized the need for extensive iteration and experimentation to develop our own solution.
Initially, our goal was to develop interactions that would cater to both VR controllers and AR hand tracking, considering the mixed usage of AR and VR. However, after discussions and communication with the client, we decided to focus solely on AR pass-through mode.
Despite this shift, the exploration of interface and interaction for both VR controllers and AR hands proved valuable, as it provided a deeper understanding of the limitations and possibilities of each input method, informing our design choices.
To address the challenges faced by users in real-life car wrapping experiences, we focused on three key interactions within the AR app:
Users can select their own vehicle model to apply the color wrap onto, allowing them to visualize the final outcome on their specific car.
By utilizing AR pass-through mode, users can align the virtual car with their actual car, ensuring an accurate representation of how the color wrap will look in real life.
Users can choose from a range of options to apply colors to different parts of the car, such as body sections, accents, and tints.
By offering these interactions, our AR solution can solve the problem of limited visualization in real-life car wrapping experiences. Users will be able to experiment with different colors and designs virtually, making informed decision on their wrapping design, and eventually saving time and costs associated with physical trial and error.
During the development process, we dedicated a significant amount of time to exploring the optimal layout, arrangement, interaction, and hover state for the main menu to ensure an intuitive user experience. We generated multiple options and prototypes, including scrolling menus, evenly distributed buttons along a curve, and even utilizing both hands for menu navigation.
During the design process, we faced unexpected challenges due to the sudden shift to remote work settings caused by the COVID-19 pandemic. This change made it particularly difficult for us to consider the scale and ergonomics of real-life interactions.
However, despite these unforeseen circumstances, we remained adaptable and learned from our experiences.
One significant lesson came from our initial exploration, where we didn't consider the possibility of hand occlusion. We realized that hand occlusion could pose a challenge for accurate detection in AR experiences. This insight prompted us to refine our design approach, ensuring that users' hands and interactions were clearly visible and easily detectable within the augmented environment.
.jpg)
.jpg)
After careful consideration, we settled on a simple design that proved to be the free of hand occlusion and most intuitive and effective in indicating hover and focus states. This design allows users to navigate the menu effortlessly and provides clear visual cues for interaction.
Our color picking menu was carefully designed to simplify the selection of colors for different parts of the car.
The menu features a convenient filter option, allowing users to quickly narrow down their choices based on desired materials and colors. Whether selecting from the comprehensive "all" category or using the filter, users have the flexibility to explore a wide range of options.
In addition, we categorized colors as Matt, Glossy, and Satin, expanding the selection to 82 colors. This categorization allows users to effortlessly explore different finish options and achieve their desired aesthetic.
To streamline the design process, we positioned toggles for selecting car parts at the bottom of the menu. By default, the menu applies colors to the "Entire" vehicle, providing users with a starting point to experiment.
Upon finished the UX wireframe flow, I had the opportunity to explore different color options and create a unique branding for the app. Through experimentation, I developed a vibrant and dynamic gradient color scheme that added visual appeal. However, based on client preferences, we ultimately decided to shift towards a more generic visual approach, opting for neutral colors that would appeal to different car wrapping business audiences.
After a final refinement of the UI design with a focus on neutral colors, we prepared the final design assets and handed them over to the development team for implementation.
To see the final design outcome, you can watch the following short video showcasing the app in action.
After completing the development process, we successfully launched our app on the Oculus Store, allowing users with Meta Quest devices to experience it firsthand. I am also responsible for store assets design and video editing.
It's also important to note that during the time of our app's release in mid-2022, the pass-through mode only supported black and white feed of the background, and hand tracking limitations were evident when both hands crossed over each other. Nevertheless, with the introduction of Meta Quest Pro, we anticipate that colorful feed and improved hand occlusion will enhance the overall user experience in the future.
