Designing an Interactive Audio Webapp

See full post: Originally published at arirahmati.com on May 29, 2018.

Role: UX Designer, Visual Designer, Illustrator
Client:
The Guardian Australia + NAB Bank
Process: Plan Explore Create

The Challenge: Designing a web app that would work as an audio story book on The Guardian’s custom CMS and native app, while defining the visual language and coming up with illustrations


Plan

Setting up the user flow

There were three important factors to consider in this project:

  1. Determine how users would be able to freely flow through the web app without getting lost.
  2. Ensure each character’s voice was heard and none had priority over the other.
  3. The final key deliverable was allowing any user to have to ability to share the interactive to spread the message.

I wanted to minimize the cognitive load on the user and reduce development build time by focusing on key screens and an easy journey.

We determined four screen templates based on the content and interactivity that they needed to have: Splash screen followed by Home, Story and Chapter screens.

Working with the lead developer, we established what web languages and libraries could be used to execute the most important functions of the project. Simplicity was the main objective. My main question was:

How flexible can we make the design to ensure a pleasant experience and make sure all chapters could be accessible and listened to?

Mimicking features found in audio apps and players, such as tracklists and media buttons. This allowed user’s to recognize and build on previous audio experiences and give the user maximum control.

Explore

The search for inspiration

I was inspired by flat, geometric and emotionally driven illustrations of artists such as Rob Bailey and Adrian Johnson and the brand visuals of Dropbox. I also looked at features commonly found in audio applications such as podcast players, media players and interactive children’s books.

Create

Determining the style

A bespoke visual language was put together by incorporating brand style guides of both The Guardian and NAB bank — blending colours and typography from each other. It was also a treat to create striking illustrations that would establish the overall mood and character development.

I found it important to listen to all the audio interviews of all the victims. This helped me build empathy with each story and allowed me to set the mood and tone, colours, composition and settings and make each illustration and screen a unique representation of the story.

One key challenge was that the interactive needed to be designed for desktop and mobile browsers and The Guardian native app. Screens needed to be responsive and illustrations also needed to be composed so that they would be centered or visible on all devices.

Achievements:

Key learnings and successes

The uniqueness of this project pushed us to take risks as a team, with new design styles, frameworks and work processes that had not been attempted before, thus, establishing new workflow processes for the future.

I developed an appreciation for UX /HCI principles in a project where UX strategy was not part of budget or scope. Overall, it was a great moment as a designer to be able to bring to life the voices of those who had been silenced for so many years and motivate many more who no longer want to be victims of abuse.