UX improvements on ACX.com

Audiobook Creation Exchange (ACX) is Audible's online marketplace for creators to produce and publish audiobooks, launched in 2011.

Background

ACX was launched in 2011. In 2017, all of the tech backend was to be migrated to internal Amazon systems, as a part of a big company wide initiative.

The Opportunity

This was a perfect opportunity to assess, standardize and improve the existing user experience on ACX.

My Role

Information Architect

Interaction Designer

Visual Designer

Team

3 Business Stakeholders

1 Product Manager

11 Engineers (including 8 contractors) and

myself

Constraints

Meet tech migration deadline (~6 months)

Understanding ACX

The first step was to understand the end-to-end story of ACX. As user research was out of scope due to time constraints, I capitalized on existing knowledge by collaborating with stakeholders and engineers to get clarity on the functionality and workflow of ACX to map out user journeys.

Who are ACX users?

What are their goals?

What steps do they take on ACX today to accomplish their goals?

What is the ACX business model?

Can we procure new image/ video assets?

I set up a framework for UX documentation and a cadence of cross-functional weekly design syncs, which continue even today.

After the initial discovery, the next step was to decide a UI framework and start investigating a design system.

Snapshot of an author's (Rights Holder) journey on ACX

The Design System Conundrum

Extended Brickcity design system for ACX

ACX lacked a design language and had an inconsistency in interaction patterns and components.

The first design system to be evaluated was Audible's own, Brickcity.


GAP ANALYSIS

Main pros

  • Consistent look and feel across Audible products

  • Accessibility embedded in code components

  • 90% of component and icon availability

Tradeoffs

  • Custom component design and development work for unavailable components (collaborating with Brickcity team on design and development of missing components for ACX could not be accommodated within the timeframe for migration)

  • Brickcity has square images, whereas ACX used rectangular images

This tradeoff was acceptable to the team, hence we decided to move forward with Brickcity as ACX's design system and extend it as needed.

To make sure ACX does not look exactly like Audible and retains its distinct identity, we decided to incorporate the signature purple color from the logo in the color system.

Transition to Brickcity and UX Improvements

I began translation of 50+ ACX pages to Brickcity design system. We continued our weekly design sessions to review wireframes covering different functionality milestones (few examples below). Enhancements to the workflow were discussed and captured in a separate enhancements bucket.

Homepage

BEFORE


AFTER

Project Dashboard page

BEFORE


AFTER

Production upload page

BEFORE


AFTER

Enhancement Prioritization

Some work from the enhancements bucket (which was agreed as high priority and other that required less development effort) was prioritized for development within the scope of migration through collaboration with Product and Engineering.

Today, we continue to use this enhancements bucket to pull quick win initiatives from.

Design QA

I supported along side product to do an initial design pass for testing all implemented stories, before final UAT for the migration.

Final Thoughts

I learned a lot from this experience and also thoroughly enjoyed working with the team on this. Some of my key takeaways were

  • Design agility was the most successful factor and stepping in to support the team for work that may not have been strictly 'design'

  • Make use of existing knowledge contained in documents and people, especially

  • Collaboration is key to foster a great working environment, align and move faster (in general have a good time!)

  • Documentation tenacity - Even if you can't do everything, capture it, and prioritize!