take along

Project Overview

This app's design combines a calming color palette with a nostalgic inspired layout, giving avid readers a modern ambiance. Quickly get lost in a tale while sipping on your morning coffee or drown out the noise with an audiobook during your daily commute.

Problem

How might we enhance the user experience of our app to better immerse avid readers in a modern yet nostalgic ambiance?

Solution

Users can seamlessly switch between reading and listening to their favorite books. The app syncs their progress, allowing them to switch from their morning reading to audiobooks for the daily commute without missing a beat.

My Role

UX/ UI Designer & Researcher

Goals

Create a user-friendly platform designed to offer effective and pertinent assistance for reading and listening to audiobooks, whether on the move or during leisure moments.

Deliverables

Logo

Paper prototype (mobile)

Mid-fidelity wireframes (digital, mobile)

Mood board

High-fidelity mobile UI mockups

Tools

Figma,

Adobe Illustrator

Design Process

User profile Background: Amelia functions as the marketing director at a moderately-sized tech firm. As a bustling professional, she harbors a fondness for literary works; however, her demanding occupation and extended travel times severely limit her chances for reading. Hannah is technologically adept, relying on her cellphone and personal computer for professional as well as private pursuits. She navigates mobile applications with ease and has a history of engagement with audiobooks, yet her knowledge doesn't extend to tech expertise. She is drawn heavily towards the ease-of-use and uncomplicated nature of the software she chooses.

Mood Board

At its core, Take Along embodies a deep dedication to the enduring allure of refined and timeless vintage aesthetics. This vision reflects a profound appreciation for the beauty and sophistication inherent in the designs of bygone eras, skillfully fusing classic charm with a contemporary sensibility.

Wireframing & Typography

I started the process by converting my initial sketches into low-fidelity prototypes, then advanced to crafting high-fidelity prototypes. At each step in this evolution, I conducted comprehensive testing to ensure that the design maintained its utmost user-friendliness and aesthetic appeal.

In choosing the typeface for Take Along, my objective was to opt for a bold, vintage-inspired style for the headings and subheadings. Furthermore, I incorporated Newsreader, a highly legible font, for the smaller textual elements.

Layout & Navigation

After obtaining a deeper grasp of the user persona and mood, I initiated the development of low-fidelity prototypes in Figma. This method enabled me to rapidly shape the structure and define the suitable layout and navigation. Consequently, it significantly accelerated the decision-making process by providing a visual representation.

Low Fidelity

High Fidelity

Final Design

Challenges & Takeaways

One of the first challenges I faced was figuring out how to develop an app that really catches people's attention, while at the same time making it feel familiar and easy to use. In order to achieve this, I took some time to research the popular reading and audiobook apps out there, and I also explored some nostalgic trends. It was quite the challenge as I aimed to create a seamless bridge between the app preferences of younger generations and those of the older ones.