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.
Tags
Competitor Research, User Research, Information Architecture, Wireframes, Style Guide, User Testing, Testing Analysis, Prototyping
Tools used
Figma, Adobe CC, Miro, Google Meet, Google Workspace
Project roles
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.
Design process
I laid the groundwork by implementing a straight-forward design process to provide structure and direction. This approach aimed to enhance the overall quality and efficiency of the design work through collaborative efforts.
Stage 1: Plan
1. Kick-off meeting
What problem are we trying to solve?
ZeroLight is developing a new tool to showcase it's 2D and 3D visualisation capabilities, which we invite users to demo online. However, the new tool currently lacks an interface.
How do we solve this problem?
We will design and develop a user-friendly, intuitive interface through user research, and iterative testing.
What are the requirements?
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 limitations?
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.
2. Proposed schedule
Stage 2: Research
1. Competitor 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. Some examples were Nissan, Mercedes, Lotus and Dolby Atoms.
2. Personas
The personas were created based on the actual people we envisioned using Palette SDK, including some internal users.
These personas were crucial for gaining a deeper understanding and empathy for each individual. Personas only included a name, age, job title and a goal.
To maintain confidentiality actual users, fictional names were used instead.
3. User stories
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.
4. Moodboard
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.
Stage 3: Design
1. Sitemap
The following architecture illustrates the structure of the demo. Prior to creating wireframes, my aim was to visualise the interconnections between each section and how our users would navigate through the demo.
2. User flow diagrams
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.
The user flow includes every step taken by the user, starting from the entry point and leading to the final interaction. I chose not to separate these journeys into distinct maps for better clarity and continuity.
3. Wireframing (low-fidelity)
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.
4. Styling based on ZeroLight design system
Since the demo would be accessed through the ZeroLight website, I adhered to established design system guidelines to maintain consistent styling.
Specific aspects of the design system, like typography, varied across different breakpoints. For this case study I have documented guidelines specifically applied to desktop resolution. For guidelines regarding tablet and mobile resolutions, refer to the Ideate section.
5. Component library
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.
Stage 4: Test
1. Prototype and usability testing
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.
2. Testing documentation
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:
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.
1. Gather and categorise feedback
Once we'd documented all feedback, we then sorted it into categories e.g. Onboarding & Guidance, Stream Modes, General Actions etc.
2. Categorise findings based on priority
The next step was to sort feedback based on priority and most relevancy, still keeping feedback within categories. The numbers shown near each grouped piece of feedback represent how many times that issue had been raised. The stars helped us identify which areas were raised either 4+ times or 2+ times. This allowed us to prioritise areas for improvement and develop an action table.
3. Create action table
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.
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.
1. Connecting screen
The connecting screen served as the demo's loading page. Whenever users launched the demo or switched stream modes, this screen would appear, indicating that a new mode was being loaded.
2. 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.
3. Onboarding step 2: Side menu
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.
4. Landing page
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.
5. Side menu (expanded)
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.
6. Selecting mode
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'.
7. Tablet and mobile resolution
Since the demo would be directly accessed from the ZeroLight website, it had to be responsive. The specific breakpoints used for what we'd call "tablet resolution" were 768x1024px and 375x812px for mobile.
Takeaways
1. What I've learned
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.
2. Changes and results
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.