Category
Tools
Figma, Miro, Photoshop
Year
Description
The Construct & Assess utility is extensively employed by auto producers (OEMs) to facilitate customers in digitally designing a vehicle and comprehending its cost.
Credits
Design Lead:
Morgan Bennett
Strategy:
Scott Stewart
Visit site
What I did
In this project I lead the visual design creation of the entire experience, including design explorations, interaction design, and development handoff.
(01)
Discovery
The first part of my process is about learning all about the product and industry competitors.
(02)
UX/UI
I partner with strategy to create stunning digital designs that engage and inspire the user.
(03)
Prototyping
I create a fully-functioning prototype to replicate the experience to put it in front of stakeholders and user-testing.
(04)
Build
Once the designs are finalized, I partner with the development team to bring the vision to reality.
According to J.D. Power, the Build & Price tool is consistently among the most features on OEM sites across premium & mass market brands. 25% of all Kia.com user visits view at least one Build & Price page. Up to this point, we had conducted optimizations to the tool, including elevating the user experience, reducing conflict messaging, and implementing a single viewport. The tool is in need for a complete rethinking to align with Kia's business requirements and enhance the user experience.
Project goals
Create an reimagined, industry-leading Build & Price
tool that:
Meets user needs
Aligns with Kia’s manufacturing process
Delivers a premium customer experience
Educates consumers on available Kia products
Introduces the novelty of Build & Price play
Drives high value actions for Kia
Current designs
The initial creative explorations involved testing different backgrounds, layouts, and scenarios. We had general content IA to build off of, but the way we presented the UI and the selections was still to be determined.
To help communicate for stakeholder presentations and for an improved development handoff, we built a fully working prototype in Figma for both desktop and mobile.
Sprints and annotations
We split the design process in to 3 development sprints. Once the designs had client approval we built out 5 separate breakpoints to help communicate the expected responsive designs. We closely annotated each page to clearly indicate to the development team on what action and animations were expected. On top of that, we also delivered a fully functioning Figma prototype (for one model & trim), as well as a HMTL prototype for user testing ahead of launch.
Next Steps
After the new Build & Price experience is launched, we will regularly review the analytics to gain insights into how users are interacting with the site and identify pain points and areas for improvement based on real user interactions.