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 hundreds of pretested recipes.

In parallel with the whole marketing website revamp in 2021, I was tasked to redesign the Getting started 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 goal is to redesign the page so it's more user friendly and be consistent with the new style.

MY ROLE

Website page level UX & visual design

Team

PM, design director, Zendesk developer

TIMELINE

Q4 2021

a couple in their 60s

Setting up the scene

Imagine our user, Lisa who lives with her husband and they're both in their 60s. When they got their Brava delivered, they spent a huge 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 invite them to scan and view some quick start videos. So, Lisa pulls her phone out and scans the code. She is 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 quite 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, and just want to start their first cook.
According to analytics, an average user visit the page just once, and average time spent on this page is just 3 min 42 seconds. Clearly customers don't watch all those videos.

2. Layout issues

The layout is not pleasing to the eye. The center alignment of the description text makes the layout feel unorganized. Also the alternating grid makes the content hard to follow.

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 start 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.

Root Problem & underlying efforts

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

After some discussions with coworker, I discovered that one main root causes for the Getting started 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.

Prior to redesigning the Getting Started page, I had collaborated with our CS team and culinary team to redesign the IA and refreshed 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 to reduce the amount of content in the Getting Started page and have the goal to be get customers learn a little bit to kick start their first cook.

Reduce cognitive load for
new users

To examine each of the 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 strong indication that on average, the longer the video is, the less people will make it to the end. Also, View count dropped massively after the third video. That verified our assumption that people don't actively consume all the videos that were presented to them. 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 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

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

Option 1
Big scannable headers with brief easy to follow instructions on the side. This option was clean in layout but a lot of text make it boring. 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 light box to show content. Although it does seem a more appealing option due to the visuals, It does require additional clicking, which adds friction.

Option 3 (final)
The carousel approach pairs an image with some light weight text, makes 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, one additional optimization we could do is to auto-advance the slides and then provide the option to pause for good accessibility.
Since we are short on engineering resources, I just kept it simple.

Final Responsive Design

Back to the scene

So, if we go back to when Lisa picks up her phone and visit the Start page as she first get 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 embark on her first cook in the Brava relatively soon, and by practicing the knowledge she just learned, she reinforces her memory of the tips.

Impact

A more positive first time user experience learning about how to use the product.
X% increase of page scroll to the bottom.

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 always remember 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 be very conscious about the length of the copy.

2. This project taught me a lesson about pushing back (in this case, customer success team's initial requirements) using data and psychology. 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 becomes an easier sell.