Reducing user cognitive load

Brava Getting Started Page redesign

ABOUT THE PROJECT

Brava is a smart countertop oven that uses light to cook food in a precise way. It has a built-in LCD screen, an app, and a website, having thousands of pretested recipes.

In parallel with the complete website revamp in 2021, I was tasked to redesign the Getting Start page. This page is used by many new customers to learn about how to use the product when it's first delivered to them. The initial goal is to redesign the page so it's more user-friendly and consistent with the new style.

MY ROLE

Website page level UX & visual design

Team

PM, design director, Zendesk developer

TIMELINE

1 month, 2021

Setting up the scene

Imagine our user, Lisa, who lives with her husband, both in their 60s. When they got their Brava delivered, they spent a considerate amount of effort lifting it and carrying it into their apartment.

"This thing is heavy!" They sweated.

It's almost dinner time. As they unwrap the packaging, they quickly went through the minimal instructional cards and found the prominent tag that was put on Brava. It has a QR code and invites them to scan and view some quick start videos. So, Lisa pulled her phone out and scanned the code. She was taken to the Getting Started page on her phone.

Now, what does she see?

Problems with the previous design

1. Overwhelming video length and amount

The instructional videos are from our support site, and they're pretty long. Video average length is 3,4 min, and the last video is 40 min. It's an hour of content there. This is too much content for our customers who recently got their Brava because they just want to start their first cook.
According to analytics, an average user visits the page just once, and the average time spent on this page is just 3 min 42 seconds. Clearly, customers give up watching all those videos.

2. Layout issues

The alternating grid, the center alignment of the text, the random spacings, and the text on top of the video covers make the layout feel unintentional and disorienting.

3. Accessibility issues

White button text against yellow background doesn't meet web accessibility standards. (It also doesn't make sense to just have floating buttons in a three-column layout like that)
Video covers have text in them, which is not quite readable since text can scale.

So it's probably not hard to imagine that Lisa made it past the first two videos. But when she starts on the third video, her belly starts rumbling, and her husband rushes, "let's start already! We'll figure it out as we go." So she put down her phone and started interacting with Brava.

The right way to onboard users

Bombarding users with education material upfront could scare users away/lower confidence level in the user's first cook. It could also lead to complete neglect. E.g. Nowadays people seldom look up user manuals when they first got a new product especially when it's a thick one. So instead, we should leverage Progressive Disclosure and positive reinforcement every step of the way to make learning easy and effortless.

Enable different ways to learn

Some people find visuals/immersive videos easier to digest, some prefer to read/scan. It's important to provide users with different ways to digest the information.

Root Problem & underlying efforts

Just like playing a game, there're always mini-bosses along the way before tackling the big boss. There won't be a happy ending unless you make visits to all of them.

After some discussions with coworkers, I discovered that one leading root cause for the Getting start page to have so much content is that we didn't have an effective Support Site that is the one-stop information hub for educational materials of our product. The site wasn't carefully designed, it had messed up IA, and as more articles were added, it became even more confusing. As a result, our Customer Support team stops pointing users to the Support Site.

Before redesigning the Getting Started page, I had collaborated with our CS team and culinary team to redesign the IA and refresh the look and feel for our Support site.

After the redesign has rolled out, the support site becomes the centralized place to educate our customers about our product. That had made our CS team feel more comfortable reducing the amount of content in the Getting Started page and have the goal to be getting customers to learn just enough to kick start their first cook.

Reduce cognitive load for
new users

To examine each video's engagement and retention with the users, I looked at the Youtube metrics for reference (they're just references, we all know that data have all kinds of biases).

The data showed a strong indication that, on average, the longer the video is, the fewer people will make it to the end. Also, the View count dropped massively after the third video. That verified our assumption that people don't actively consume all the videos presented. In the end, we got the buy-in from our stakeholders to reduce to show 3 videos; and each video being roughly 1 min to 1 min 30 sec.

Design exploration

I went on and mocked up a couple of options. A constraint to bear in mind is that we have limited engineering resources, so the more we can reuse exiting design patterns, the better. So I tried to keep the designs minimal. The base of the options looks like this:

Changes to the Instructional Videos page on support site

Iteration

‍I added another "Fundamental tips"block below the three intro videos, based on stakeholder feedback,

Option 1
Big scannable headers with brief easy to follow instructions on the side. This option is clean in layout, but a lot of text makes it dull. People might scroll past this because they are too lazy to read.

Option 2
The image grid draws the attention of the users. Learn Button enables a lightbox to show content. Although it seems a more appealing option due to the visuals, It requires additional clicking, which adds friction.

Option 3 (final)
The carousel approach pairs an image with some lightweight text, making it easy to read, make associations, and remember. Although there's still some friction in clicking to view other slides, the numbered buttons make the other slides easy to discover.
To make the other slides more discoverable, we were thinking of adding one additional optimization, to auto-advance the Carousel slides and then provide the option to pause for accessibility.

Final Responsive Design

Back to the scene

So, if we go back to when Lisa picked up her phone and visited the Start page as she first got her Brava. What Lisa sees is a total of 3~4 min video content (instead of an hour) and a few starting tips so that she can quickly learn the fundamentals. She could start her first cook in the Brava relatively soon.
‍

Success Measurement

Increase users' confidence rating of their first cook after visiting the page, by X%.
Maintain or slightly improve the easiness rating of the user's first cook(s).

Closing thoughts

This design is currently implemented and live.

My biggest takeaways from this project:

1. The best way to turn the customers away is to overload them with information. When creating any designs, I will never forget to minimize the cognitive load for the users, by utilizing principles like Progressive disclosure, chunking, presenting relevant information during the right time and context, and being very conscious about the length of the copy.

2. This project taught me a lesson about using data and psychology to push back (in this case, the customer success team's initial requirements). It's also important to know what causes the current design/implementation. As the root problem is agreed upon and solved, the design changes to the surface problem become an easier sell.
‍