Webpage Redesign
Cadillac Super Cruise
Introducing Super Cruise Feature
SUMMARY
Challenge
Cadillac wanted to update its Super Cruise marketing page with the latest content. For the best user experience, however, the page needed to be updated not only with the new content but also with the new information architecture.
Approach
-
Update related content
-
Optimize Information Architecture
CLIENT
Cadillac
TIME
May 2019
METHOD
Content Audit
Information Architecture
Wireframing
Prototyping
ROLE
-
Conducted an audit on the current experience, built a strategy and discussed them with a senior UX designer, a visual designer, and project managers
-
Created a wireframe of the redesigned version and revised it with the senior designer and team members
-
Recommended an update of related content on other pages
Introducing the Project
Cadillac Super Cruise
Super Cruise is a hands-free driving assistance feature for compatible highways. The Super Cruise marketing page explains how to use the feature and its core technologies, and introduces related awards and media quotes, etc.
Project Goal
Content Update
Cadillac wanted to update its Super Cruise content to align with its new Super Cruise TV commercial series content, which includes​
-
Compatible freeway extension
-
Range of available models
-
Awards, media quotes, and a customer log
Optimizing Information Architecture
The team had been recognized that there were existing IA problems that prevented users from understanding the various aspects of the feature. This project was a great chance to redesign the IA to fix this issue.
Understanding the Target User
Cadillac.com provides diverse content to serve different types of users. To audit the page content, I had to understand whose shoes I had to put myself in and what the target user was doing there.
Users' Previous Behaviors & Needs
On Cadillac.com, there are 2 separate Super Cruise pages.
​
I created a simple sitemap and page flows to understand the users' journey to get to the pages. This helped me to figure out users' previous steps before landing on the pages and determine what they want to do once they arrive on the Super Cruise marketing page.
Another Super Cruise page: Ownership
The other Super Cruise page under the Ownership Section is for the owners of models that have the Super Cruise feature. Visitors come to this page to learn how to use Super Cruise.
Page Flow
User Steps
World of Cadillac Section
Users who are curious about the brand vision will explore the World of Cadillac section and find the Super Cruise marketing page. They will open the page to understand the feature in the context of understanding the brand.
User Steps
Page Flow
Target User
Based on the findings from the users' journeys, I defined the target users of the Super Cruise marketing page.
Future Customers
studying options among different brands and models and learning about Super Cruise for the first time
Loyal Customers
tracking what Cadillac does to build a luxury vehicle brand.
Characteristics of the Content
To meet the target users’ need, the page should have
A Simple and Easy Introduction
rather than detailed instruction
Value Verification
of Super Cruise as a part of branding
Understanding Current Experience
After understanding the target users and their objectives, I examined the experience of users on the page.
From a Bird's-eye View
To understand the types of content and the relationships among them, I took a step back and tried to understand the page from a bird's-eye view. Then, I labeled and grouped each module by type of content.
Problem: Unorganized Content
On the page, content from each group is scattered here and there and mixed up with other types of content. While scrolling down, users must reorganize all the various information independently to understand the Super Cruise feature.
Redesigning Strategy
Content Update
Based on data and information from the client, project managers, and other stakeholders, I listed up content to be removed, added, and updated.
Information Architecture
After deciding to lay out content from the same group together, I created a schematic view showing how to order each group.
After the introduction, the page shows an external appraisal about Super Cruise to convince the value of the feature and to motivate the users to learn more.
Next, the page explains about the feature by talking about its various aspects, including a brief instruction, applied technologies, and available freeways.
Then, users can be moved to related pages, such as the Super Cruise ownership page, to get further information.
Wireframe
Based on the strategy, I created a wireframe with recommendations for graphic assets and text copies. After creating the 1st version, I revised it based on discussions and feedback from the team meetings.
Version 1
Version 4
Iteration
Version 1: How-to video module
Version 4: How-to video module
Following the development framework and design system
After creating the 1st versione, I revised the layout to fit the AEM framework and the website's design system.
Following the marketing strategies
Cadillac wanted to emphasize specific aspects more than others. Based on feedback from team members, I updated the wireframe to reflect this priority.
The customer log is one of the main aspects Cadillac wanted users to be aware of. Therefore, I relocated it right under the introduction and awards.
Version 1
Version 4
Version 1
Version 4
Onstar is another feature Cadillac wanted to emphasizes throughout the website. In the 1st version, I combined Onstar information with a how-to video. In the final version, however, I assigned a separate module.
Refining content grouping and ordering
For a better IA experience, I listed all of the technology-related content and refined the grouping and ordering.
Version 1:
compatible freeways
Version 1: technologies
Version 4: technologies & compatible freeways
I also tried different methods of storytelling. In 1st version, I put technology-related content first, but in the final version, I decided to show a how-to video first so users can get an idea of how Super Cruise will affect their driving experience. They would then move to learn applied technologies.
Version 4
Version 1
Publishing
After my wireframe was approved by the client, the creative team worked on the visual design and copy and polished details. In August 2019, the page was updated on Cadillac.com
REFLECTION
Learning the Development Framework
Refining the wireframe layouts and interaction to fit the development framework has been one of the biggest challenges I have faced as a professional designer. This project helped me learn more about the AEM framework.
Applying My Own Design Process
When starting the project, the client merely told the team to update the Super Cruise page with new content. But the first thing I did was to draw page flows to understand the target users and their journeys. This step gave me the criteria to make decisions throughout the whole design process.