- The Product
Online car configurator website for BMW latest range – for both mobile and desktop.
Challenge
- To take over from the previous agency's design that had been agreed up – this conceptual design was for a one-page design. We had initial concerns over loading time, and wanted to research the feasibility.
My role
• Research
• UX design
• UI design
• Prototyping
• Wireframing
• Presentations
• Design spec. creation
• Quality assurance.
Results
- I successfully advised the client that the initially agreed one-page solution for mobile and desktop required additional testing to validate loading time performance before moving forward with design and development.
Empathize
Research
At the start of the project, I conducted research, benchmarking, and heuristic evaluations of primary competitors (Audi, Mercedes, Volkswagen), secondary competitors (Ferrari, Maserati), and surrogate products (Nike ID, Adidas) to address my knowledge gap in car configurators.
Empathize
Initial wireframes
After conducting research, we needed to consolidate our understanding of the project, which had shifted from the previous agency with only one requirement: a long-page layout for the configurator.
Collaborating with another UX architect, we created wireframes based on the previous agency’s concept. These wireframes highlighted areas needing further work, raised key questions, and facilitated discussions to define the next steps and project plan.
Define
Establishing work packages
After several meetings to establish the project team and clarify gaps in information and deliverables, we created a detailed spreadsheet outlining work packages, timelines, resources, and effort estimates. With the deadline just two months away, we asked the client to prioritize development requirements. Collaborating with my UX partner and a visual designer, we presented the document to the client, leading to productive discussions and a final agreement.
Ideate
Conceptual wireframe designs
The first work package involved presenting multiple wireframe design concepts, iterating weekly over four rounds. After the client selected two concepts, a visual designer joined to refine the designs. Upon presenting an advanced mobile solution, we investigated how to adapt it for desktop. When development delays arose, we used the extra time to propose workshops with the client, aimed at revisiting the long-page solution and clarifying vague requirements.
Define & Ideate
Stakeholder workshops
We held bi-weekly design workshops with the client, which were crucial in securing commitment. These sessions addressed the previous lack of content in the designs, focusing on strengthening this aspect.
We focused on understanding the product owner's requirements for each module of the configurator: engine selection, line type selection, model selection, exterior and interior customization, and packages/options. The packages/options module presented the biggest challenge, causing buildability conflicts where one option required changes to previously selected ones.
At this stage, we brainstormed in groups to generate ideas, after which another UX designer and I individually developed a range of potential solutions based on the insights and requirements gathered.
We presented the best solution for each module to the client, followed by a complete design layout. However, additional client requests emerged, further delaying the project.
Define & Ideate
Unexpected additional components
The client requested additional concepts for a global shopping cart and new global navigation. I worked independently on the shopping cart, creating sketches that quickly evolved into wireframes. These were presented, iterated on, and eventually put on hold as it became clear that the shopping cart was a separate project.
The global navigation solution followed a similar path. I developed prototypes in Principle to showcase our proposed solution for both desktop and smartphone.
Design & prototype
UI designs
After evaluating the other elements, we presented two visual design concepts: a long-page and a multi-page solution. The development team raised concerns about the long-page concept’s performance, particularly the unacceptable loading times due to large high-res images.
Outcome
Our work led the client to realize that user testing was necessary, and the previously agreed-upon long-page might not be the best solution. The project was put on hold for a few weeks over the summer while they decided how to proceed.
Tools used
- Pen & paper. Sketch, Principle, Keynote, whiteboard & stickies, iPhone 6s, Evernote.