Audible on Amazon Storefront

The Audible Storefront page on Amazon.com hadn’t been updated in about 3 years - I redesigned it with customer’s content discovery needs and accessibility in mind.

Final mobile design

My roles

  • UX strategist

  • UX Researcher

  • UI Designer

  • Accessibility documentation

Product goal

  • Utilize updated branding

  • Retarget carousels for more personalization

  • Test multiple variations to see which wins.

Customer goal

  • Find titles to listen to

  • Discover similar titles to what they know they enjoy

Impact metrics

  • Increased title revenue by +3.5%

  • Increase trial sign ups +4.5%

Entry points to the Storefront

Logged in current state

Current state and entry points

A customer can get to the Audible storefront a few different ways:

  • through the side menu on Amazon

  • the Audible on Amazon header logo

  • the search category dropdown on amazon’s global search tool

  • a personalized sub-header if they are already an Audible customer.

From the Storefront a customer can filter and explore by categories, discover recommended personalized titles, and learn about membership (if a non-Audible member).

Not logged in current state

Current state audit

Competitive analysis

Content blocks to align on strategy

Audit and content blocking

To understand the current design and customer use cases, I audited the current Audible on Amazon Storefront experience and found:

  • there were many non-targeted of book carousels

  • the membership content took up a visual 1/3 of the page

  • the category tiles and overall page were not within brand guidelines

To align with the updated Audible.com landing page, I documented the content in current state and future state to gain alignment across my PM, engineering, and marketing teams without designing too much too fast.

UXR and usage data

Before research, I looked at the usage data of the side navigation filters and found that the majority are used by less than 5% of the annual interactions with the page.

We focused testing on the storefront navigation and title discovery. Currently, the left navigation/filter has a lot of content and the team is assessing the need of having both the side filters on desktop and the Audible top navigation bar on mobile. 

I used usertesting.com to test with 10 customers; 3 Audible Plus members of any tenure, 3 Audiobook Listeners, 4 US Non-Audible Member.

They were ask to complete 3 tasks and a few follow up questions: 

  • Search for an Audible audiobook on Amazon.com

  • Give feedback on the in-production storefront page overall

  • Rate how often they use the side navigation filters

Testing the current Audible on Amazon Storefront

Study goals:

  • Do customers use the side nav usually in their search process on desktop?

    • What do customers use in their audiobook search process on Amazon? 

  • How would a customer prefer to search for an audiobook on Amazon?

  • Which of the side nav filters do they find the most valuable? Least valuable? 

Outcomes

  • Customers do not use the filters per data collected, though when asked, they want the filters to stay. 

  • When asked to search for an Audiobook, most use the Amazon search bar. 

  • The storefront met customers’ browsing expectations. 

UX Reccommendations

  • It’s safe to get rid of the side filters.

    • If we receive negative customer feedback about the lack of side filters, we can explore adding back high value filters or re-imagining the filters.

  • Keep the side navigation on any subsequent search, because customers like to use the filters to refine their search after they’ve searched initially.

Proposed wire frames

Wireframes and tech limitations

I created wireframes for both mobile and desktop, showcasing the flows and where each component would lead the customer.

Using the content blocking I outlined some tenets to align towards:

  • carousels would be targeted and personalized (when possible)

  • categories would be relevant to the customer’s previous search history

  • hero content would be engaging like Audible.com’s

Due to tech limitations we used an Amazon component library that was not 100% consistent with Audible web’s design system. I used simple visual tweaks, in alignment with my engineering team, to make the page look like the Audible design system and branding, while only using the Amazon compliant components.

Full size testing options

4 versions of the page to run to significance

Testing strategy

We tested 4 variants of the page:

🎉 T1*: the design with the most amount of content

T2: moved carousels higher on the page to see the difference in action took.

T3: the shortest design with no personalized carousel content, only membership.

T4: moving a large promo banner into a slimmer treatment above the hero created for the page.

This design tested with the highest conversion at +3.5%*

Desktop

Mobile

Accessibility documentation

Utilizing the accessibility documentation system on the Audible team, I created documentation for my engineering team.

The carousel components were already created and had accessibility documentation so we only needed to focus on newer components.

Final designs

The T1 design increased conversion by 3.5% over the first 28 day testing period and will be the starting point for future iterations of the page.

We want to revisit the navigation at a later time and run user research to gain insights on how customers would further use the side navigation.