BACKGROUND.

Since Kia launched it’s responsive site, the completion rate of the Build and Price tool (an important lead generator) has dropped significantly, especially for mobile consumers.

THE ASK.

Redesign the complete Build and Price experience for desktop, mobile, and tablet to improve user experience and to increase the completion rate and eLeads. The Build and Price tool needs to be:

• Easy and intuitive to use
• Less confusing than current experience
• Clear in terms of information presented, such as pricing, additional costs, color selection, etc.
• Useful for quick pricing for consumers

MY ROLE.

I was the Creative Director on this assignment. We were extremely short on staff so I also worked on the UX and UI Designs (storyboards, wireframes, use case scenarios) and the Visual Designs (Layered and Layer Comped PSDs). I was responsible for walking clients through our concepts, our wireframes, and our designs. I also worked with the in-house development team at Kia Motors America (KMA) to ensure that the experience translates from mock to code.

MY PROCESS.

At the start, I read through analytics reports and some insights to determine possible causes for the huge drop-off rate. Since Build and Price is a multi-step process, it is easy to lose a consumer before s/he gets to the final step. The previous site forced users to click more than necessary. Hero images were superfluously large and long page scrolls were unwieldy— especially on small mobile screens. If users wanted to learn more about specific options, they would be taken to a new page and returning to the previous page was confusing. Besides defining the problem areas, our goal was also to add enhancements to improve site satisfaction.

On step 1 (trim selection), one trim would take up the entire page at once. Upon user selection, the new trim information would then load up. This UI made it almost impossible for users to compare trims. The new design should show trim properties at a glance for ease of comparison.

Step 2 (color selection) was especially awkward on smartphones. The exterior and interior colors were grouped together which caused for a confusing experience. Furthermore, users would have to carousel to see additional colors. The redesign should allow users to compare all exterior colors at once and see interior options that pair with the preferred exterior.

Step 3 (package selection) forced users to load a new page if they wanted to see all the items that came with a package. Once they are done, they need to awkwardly hit the back button, which slowly slid the screen back over. This experience was disorienting as many users were not able to find their ways back. The new design should open details as an accordion that expands on click/tap to keep users on the same page.

Finally, on step 4 (option selection), users should be able to read descriptions about the options as well. This would follow the same “expand” and “collapse” interface found in previous steps to maintain UI consistency and ease of use.

Every selection can affect pricing. The previous design did not do a great job of showing how certain options had additional costs associated to them. In my redesign, an estimated price widget would be prevalent, updating dynamically as the users make their selections. While the old site forced users to go back to change an option in the previous step, the new design is more seamless allowing  users to quickly remove an item from another step without leaving the page.

Finally, during the UX and Design phases, much attention was given to bandwidth. As users pick their colors, trims, and interiors, zoom in and out, and do 360 spins, loading the graphics could really slow down the experience, causing frustration. Image sizes were kept modest, 360s would be triggered with a click to load only on command, and images of options would lazy load upon expansion.

THE RESULT.

The new Build and Price design has just launched very recently so there aren’t enough reports yet to determine whether KPIs have been met. However, designs were shared with JD Power and they gave us very positive feedback about the improvements that we had made. Both the client and the development team were extremely pleased with the final product.