Audible redesign — An audiobook app with an ancient book look 📖
Honouring the style of the first recorded stories and gilded covers of beautiful, hand-made books with a redesign for the Audible app.
TLDR; Audible app UI redesign with a medeival/ fantasy aesthetic, check out this solo project here.
The brief
- App redesign
- UI focus, branding refresh
- No wireframe kits, only self-made elements
The background
Audible is a market-leading audiobook platform owned by Amazon, a large slice of a $140bn market (according to Spotify CEO Daniel Ek). As an avid reader myself, I have used Audible often but still prefer old-fashioned books. With my design interest, I also appreciate physical books and enjoy seeing them as a design vessel — more on that later…
The current app
To get familiar with the app and identify a user flow to focus on, I worked with I cloned screens throughout the app.
One of the screens below is a screenshot, one is the clone… If you guess which is which correctly do let me know in the comments what gave it away so I can do it even better next time!
As with most Amazon products, the general design is minimalistic (and not usually in a chic way). Different shades of grey and white are brightened by pops of Amazon-orange, for fonts they actually use a range of different weights and sizes (as you would expect) but the range of combinations is vast, illogical and doesn't lend itself to a slick feel.
The competition
The main competition to Audible I identified in the UK are Spotify, BBC Sounds and Apple books. The latter is a platform for e-books and audiobooks from Apple. A quick visual analysis is shown for these three apps in the following boards;
To summarise, the designs were modern, stark and minimal in their design choices. I thought I could do something just a little more interesting…
The concept
I started by thinking of the audiobook experience as similar to entering a bookshop and about people’s relationships with books. Modern technology, time-poor people and screens everywhere has led the sales of books to decline in recent years. One of the ways high-street book retailer Waterstones stayed in business was by focusing on gilded books — classic titles that have been redesigned to become beautiful objects.
Some context; I adore old books. They are art, a physical history of design with their own design language. Very early books were religious texts, made by monks, hand-painted, embellished and skillfully bound, to be adored as religious objects.
As well as thinking of the traditional bookshop, when scrolling through the titles on Audible I was reminded of these old books and how far we have moved on in the way we engage with written stories. In a digital world, on-screen experiences are designed to look slick, modern and minimalistic. I wanted to reimagine the Audible app as an ancient book, with gilded covers, and by doing so preserve the air of fantasy which go with old books and stories.
The proto-persona
Thinking of who would enjoy this feature, I created a proto-persona (entirely fictitious and un-researched), meet Imaginative Irwin.
He is passionate about the historic/fantasy genre — enjoying it across books, video gaming and board games. Living in an increasingly digital world he spends a lot of time looking at screens for work and play.
I imagined him playing video games where customising characters and surroundings is commonplace, for example, the game Fortnite where players can customise their avatars and surroundings. That said, customising aesthetics is a lot less common in the ‘functional’ apps, websites and interfaces that he may be engaging with across other areas of his life. He wishes he could change the look of his other digital spaces and I wanted to give him this power in the Audible app.
So, time to create a transformational look and feel of fantastical gilded books for this slick, modern-day and market-leading app…
Mood board, style tile and brand visual identity
I collected images of gilded books and fantasy photos to inspire the feeling of the final design. The brand values that came to mind are listed below;
From this, I worked to distil key fonts and typography. The first two columns here show my key inspiration images then a small sample from all of the fonts and colours I worked through before arriving at the final font and colour presentation in the third column.
The heading font is Almendra, evocative of classic bound books and fantasy lands, yet still bold and legible. The subheading and body styles are made up in Cardo, a legible, bookish and classicly shaped serif font.
To further define the look and feel of the UI I designed the below style tile. The archway shape was inspired by book covers on the mood board and lends an air of the historic and fantastical. I am also very pleased with how the metallic gold and dark copper linear gradients I designed translated into the page and worked as a primary colour in the design.
The final nod to fantasy and gilded books is the large drop cap, a golden G.
The final design
I wanted the user to be able to opt in and out of the transformation, easily changing between the new and original style of that app as I felt some days Imaginative Irin may not be in the mood for a themed app experience. For this reason, the first screen in the flow is a replica of the existing home page with the addition of a gold switch at the top. Once clicked the page transforms into the fantasy version.
In line with the brief, the final redesign only featured changes to the visuals of the app and not the UX as there was no research time included in this project. The one exception to this is above the fold on the home page, shown below.
The intro text in the redesign is quite a statement visually. To prevent overcrowding I tidied up the home screen, removing sliders of suggested titles to allow for more white space. I could then prioritise the user's access to their current title and showcase the arch shape and decorative fonts.
I enjoyed using small changes to nod to the fantasy without disturbing the useability of the app.
Some of my favourite details include;
- Replacing the home icon with a castle
- The profile icon is now a knight
- Large gold drop cap in the top welcome message
- Heavy-lined icons summarising genres
- Arched images instead of square
- Gold and copper gradients on CTA and featured items
Other minor adjustments included adding thin shaded lines to the side-scrolling elements, giving an effect of items sliding out from behind the page. It is also another hint to users that these items scroll sideways and encourage intuitive exploration of the app. You can see this just below in the library filter sections.
I welcome you to explore the app for yourself just here, flip the golden switch in the top right to explore the fantasy-themed redesign. I have built out the pull page lengths.
Next steps
I would have loved to create a few different aesthetic designs for the app based on different genres of books — for example, sci-fi or romance could be added to the list of options that users can choose for a customised app experience. With more time I would have updated the Audible logo so the orange sweep was in gold for the transformed version of the app.
Many thanks for taking the time to read about this project, was a great challenge. Hope you appreciated the project, do leave your comments below!
