ZeroLight
Online car configurator
Project overview
UX/UI Design work for Palette SDK Demo, an interactive 3D visualisation experience and car configurator, accessible from the ZeroLight website.
ZeroLight is a company that specialises in the development of cloud-based visualisation tools that allow brands to construct digital experiences, with the aim of captivating and converting their customers in the process.
Competitor Research, Information Architecture, Wireframes, Style Guide, User Testing, Testing Analysis, Prototyping
Tags
UI Preview - Palette SDK Demo
Figma, Adobe CC, Miro, Google Meet, Google Workspace
Tools
I worked on this project as UI/UX Designer. My duties involved user research, establishing information architecture, sketching ideas, wireframing, prototyping, styling, usability testing, testing analysis, testing documentation, organising and running meetings.
Other team contributions included a Junior UI UX Designer who provided assistance during testing, a Motion Graphics Designer who created the intro animation, a Compositing Artist who provided vehicle imagery, and a Creative Director who oversaw the entire project.
Project roles
I established a solid foundation by implementing a clear and straight-forward design process, ensuring both direction and organisation. This approach was designed to improve the overall quality and efficiency of the design work while encouraging collaboration and teamwork.
Design process
Design Process - Palette SDK Demo
Stage 1: Plan
Kick-off meeting
ZeroLight is developing an innovative tool to highlight its advanced 2D and 3D visualisation capabilities, giving users the opportunity to experience a live demo online. However, at this stage, the tool does not yet have a user interface in place.
What problem are we trying to solve?
We will design and develop a user-friendly, intuitive interface through user research, and iterative testing.
How do we solve this problem?
To demonstrate our visualisation capabilities across all devices, we aim to enable users to run both 2D and 3D streaming modes and select a product type within each mode. At launch, the chosen product type will be a vehicle/car.
What are the requirements?
Due to time constraints, we cannot showcase ZeroLight's 3D capabilities within Figma during prototyping for testing. Therefore we will focus on testing the interface with 2D images only, ensuring users can still experience the new interface but without the full experience of interacting with a 3D vehicle model.
What are the limitations?
Proposed schedule
Proposed Schedule - Palette SDK Demo
Stage 2: Research
I started by analysing existing 2D/3D online configurators to understand their platform structures and user journeys. I focused on each company's approach to product selection, the range of customisation options provided, and how these choices were presented within the UI.
Competitor research
Competitor Research - Palette SDK Demo
The personas were created based on the actual people we envisioned using Palette SDK e.g. internal users.
Personas
Personas - Palette SDK Demo
During our internal meetings, the team and I crafted concise, targeted, and goal-oriented user stories. These user stories were informed by feedback from our internal users and stakeholders.
This approach allowed us to focus the project on the viewpoints of its intended users while also aligning it with the initial problem statement.
User stories
User Stories - Palette SDK Demo
Through the creation of a collage including images, features, icons, colours, and various UI elements, I effectively conveyed the artistic direction to all team members. This showcased inspirations that aligned with the newly established personas and user stories, ensuring they met user requirements and addressed our initial problem.
Moodboard
Moodboard - Palette SDK Demo
Stage 3: Design
The following architecture outlines the structural framework of the demo. Before diving into wireframes, my goal was to map out the relationships between each section and understand how users would navigate through the experience. This helped ensure a seamless flow and an intuitive user journey before refining the design further.
Sitemap
Sitemap - Palette SDK Demo
The following diagram shows the entire user journey when accessing the demo from the ZeroLight website. The diagram was developed based on the initial problem statement, competitor analysis, user stories, personas, and mood board.
User flow diagrams
User Flow Diagram - Palette SDK Demo
Once the demo architecture was established, I proceeded to create low-fidelity wireframes. These wireframes comprised the fundamental content and visuals presented in a static format (non-interactive), forming the initial 'shell' of the demo.
Wireframing (low-fidelity)
Wireframes - Palette SDK Demo
Styling based on ZeroLight design system
Since the demo was accessible via the ZeroLight website, I followed the existing design system guidelines to ensure visual consistency.
Certain elements, such as typography, adapted across different breakpoints. In this case study, I have documented the guidelines specifically for desktop resolution.
For details on tablet and mobile guidelines, refer to the Ideate section.
Style Guide - Palette SDK Demo
Following a similar approach as the Styling section, I've focused solely on documenting components designed for desktop resolution, owing to the extensive number of components designed. For a preview of components designed for tablet and mobile resolutions, refer to the Ideate section.
Component library
Stage 4: Test
After developing a higher fidelity prototype from the initial low-fidelity wireframes, myself and our Junior UI UX Designer were able to conduct moderated usability testing. The demo's functionality was assessed by guiding test participants through two scenarios, which were tailored for two separate user categories - Commercial and Technical.
After completing the scenarios, test participants were asked a series of questions to better understand their experiences. Data was collected by analysing verbal responses and screen interactions by recording participant screens. Due to confidentiality, user recordings are not included in this case study. The screen designs below preview the initial high-fidelity designs created for usability testing.
Prototype and usability testing
Prototype Screens - Palette SDK Demo
During the testing phase, I generated three documents: the Testing Structure, Testing Plan, and Testing Report. These were crafted using Google Workspace for accessibility and easy collaboration across our team. Here's an outline of the contents:
Testing documentation
Testing Documentation - Palette SDK Demo
Stage 5: Analyse
I created a Miro board to analyse test results. Working closely with our Junior UI UX Designer, we began by gathering all feedback obtained from the tests and categorising it accordingly. We then grouped these findings based on priority, followed by an action table of results whilst collaborating with stakeholders.
Gather and categorise feedback
Once feedback was documented, it was then sorted into categories.
Analysis of Results Screen 1 - Palette SDK Demo
Categorise findings based on priority
The next step was to organize feedback by priority and relevance while keeping it categorized. The numbers next to each grouped issue indicated how often it was raised. Stars highlighted areas mentioned 4+ or 2+ times, helping us identify key concerns. This approach enabled us to prioritise improvements and create an action plan.
Analysis of Results Screen 2 - Palette SDK Demo
After relocating the issues from their category columns and organising them into a comprehensive overview list, the next step was to develop potential solutions for each set of issues with stakeholders to assess their feasibility and achievability.
The outcomes of these meetings guided us in creating new user stories based on our proposed solutions, outlining actionable tasks. Stakeholders then generated action tickets from the task list, indicating the changes or new designs needed from us as designers.
Create action table
Analysis of Results Screen 3 - Palette SDK Demo
Stage 6 Ideate
I began implementing the actionable items agreed upon during the Testing Analysis stages, which involved several changes. This again took many iterations but the final outcome can be seen below.
We wanted to use the following higher-fidelity designs as 'phase 1', developing and launching it as the live demo on the ZeroLight Website. Since, at this stage, we had only received feedback internally through our initial prototype, the next logical step was to observe the demo in action as a live version.
Having a live version of the demo would undoubtedly lead to user feedback. Consequently, we could gather this feedback in a similar manner to an internal usability test and proceed with the final few stages of my UX design approach: Test, Analyse, and Ideate (on loop). This iterative process would allow us to continually improve the demo and meet the expectations of our users through regular updates.
The connecting screen functioned as the demo’s loading page, appearing whenever users launched the demo or switched between stream modes. This screen provided visual feedback, signalling that the system was actively loading the new mode.
Connecting screen
Connecting Screen - Palette SDK Demo
Onboarding step 1: Camera control screens
Following the loading screen, users were given a guided walkthrough of the demo. The first stage began by focusing on camera controls, aiming to instruct users on how to interact with the product. This included guidance on rotating the camera and how to zoom in and out.
Onboarding Step 1 - Palette SDK Demo
We then focused on highlighting essential UI elements within the interface and providing explanations for their functionalities. This included instructions on changing Streaming Modes, Designing the product, modifying the Environment, and applying Features.
Onboarding step 2: Side menu
Onboarding Step 2 - Palette SDK Demo
After completion, or closure of the onboarding experience, users would see the primary UI/demo landing page.
This page consisted of a top navigation menu with buttons which were the Logo, breadcrumb trail, Help, Exit, Share, and Contact. The side menu (collapsed) shows new primary feature options: Stream Mode select, Design product, change Environment, apply Features, and view Full Screen mode.
Landing page
Landing Page - Palette SDK Demo
Each tab contained specific configurations related to that category for example the Design tab, the use could select 'Options' for manual customisation or enter a 'ShortCode' for more automated customisation. Other tabs included Environment, Features, and Full Screen mode.
As users started selecting each of the drop-downs (configuration options), they could explore further into the available customisation options for each category. For instance, in the Environment section, users could choose both the environment itself and the effects associated with that particular environment.
Side menu (expanded)
By selecting Stream Mode, positioned at the top of the side menu, Palette SDK's primary feature would be activated, which would eventually allow users to select between multiple streaming modes. For this demo, we designed and tested around only one stream mode which was 3D stream explore.
The concept of allowing users to change stream mode would enable them to utilise both 2D and 3D modes for viewing and testing their products. We'd design, develop and integrate other modes into the demo at a later stage. Ideally after we started receiving external feedback from 'Phase 1'.
Selecting mode
Selecting Mode - Palette SDK Demo
Since the demo would be accessed directly from the ZeroLight website, it needed to be fully responsive. To achieve this, we defined specific breakpoints to optimise the layout and usability. For what we classified as “tablet resolution,” we used 768x1024px, while the mobile version was designed for 375x812px.
Tablet and mobile resolution
Tablet and Mobile Resolution - Palette SDK Demo
Takeaways
Throughout this project, I've learned the importance of collaboration in achieving the best possible results and ensuring an optimal user experience. By combining knowledge and skills in areas such as UI/UX where I used Figma to create the UI and carry out testing, motion graphics design where we used Adobe After Effects for animations, or compositing artistry to create detailed product imagery using tools like Photoshop, or our internal product SpotLight that would integrate with the demo's user interface. By combining skills and tools like this we were able to enhance the overall product and create a great experience for end-users.
What I've learned
During the project we encountered a challenge with Figma's inability to support ZeroLight's full 3D visualisation capabilities. Therefore to demonstrate actual vehicle models, we decided the best option would be to render 2D images from our internal 3D tool SpotLight. We would then fine-tune these images using Photoshop and position them precisely within the demo's interface, readying them for prototyping and testing.
Using the established user stories, we successfully implemented the new UI changes which were then subjected to testing. Testing feedback led to adjustments in the initial sitemap and user flows, resulting in a more user-friendly and intuitive experience. This involved refining the features within the side menu, optimising the top navigation display, rewording content, streamlining access to Mode Select, and selecting the appropriate logo for the top navigation.
Upon launch, the demo was made available and accessible online through the ZeroLight website. Overall, the experience was positive and intuitive, and we successfully achieved our initial goals, resolving the initial problem we set out to address.