Skip links

AudioShelf

Date

2023

Client

Portfolio Project

Category

UX Design

AudioShelf mainImage3 e1706769274668

Project Overview

8

Weeks

20+

Screens

Tools

Figma

AudioShelf is a voice-controlled app for audio book listening designed for individuals with visual impairments, dyslexia, and physical limitations.

01 Problem

individuals with visual impairments, dyslexia, and physical limitations needs a tool to help them get access to books while addressing the unique challenges faced by the target user group.

02 Approach

Conduct user research to understand the specific needs and challenges faced by individuals with visual impairments, dyslexia, and physical limitations when accessing books.

03 Solution

Design the Audioshelf app with a user-centric approach, offering a seamless and accessible experience for audio book consumption, catering to diverse accessibility requirements.

Design Process

1

Emphasize

User Research
User Interview
Entrant Analysis

2

Define

User Persona
Journey Map
Empathy Map

3

Ideat

Brainstorming
Card Sorting
User Flow

4

Design

Paper Wireframes
Visual Design
Prototype

Understanding the user

To create an accessible and user-friendly audiobook app with an engaging user experience, a competitive audit and interviews with targeted groups were conducted, personas were created, . The research provided insights into the needs and preferences of individuals with visual impairments, dyslexia, and physical limitations.

10%
of Canada population has some level of dyslexia.
6.2M
Canadians aged 15 and over are having one or more disabilities that limited their daily activities.
1.5M
Canadians aged 15 and over are having a seeing disability.
61%
of adults who use voice assistants do so because they have difficulty using screens or keyboards due to a disability or injury.
book
headset

User Flow

AudioShelf UserFlow
AudioShelf App low-fidelity Sketches

low-fidelity Sketches

I started by creating paper sketches to explore design ideas and quickly iterate and refine them before moving on to digital wireframes. Paper sketches provided a low-fidelity representation of the app's design, allowing me to focus on accessibility and user-friendliness for people with dyslexia and visual impairments.

Digital Wireframe

I created digital wireframes using Figma, which allowed me to translate the paper sketches into a more refined and detailed design. I focused on incorporating the research insights to ensure that the app's layout and features would address the needs of the target users. 

AudioShelf MockupVSwireframe

Mockups

The low-fidelity prototype was instrumental in identifying usability issues that could be resolved before the high-fidelity mockups were developed. The high-fidelity mockups provided a more detailed representation of the final app design, allowing for a more accurate assessment of the user experience. 

Account Setup using
voice control feature

try It left

Fully Voice Control Login / Registration

Browsing Home Screen

AudioShelf App home screen details
headset
book
AudioShelf App screens overview

Selecting a book

try It right

Accessibility
considerations

The app features a high contrast color scheme for users with visual impairments, making it easier to navigate and distinguish different elements on the screen.

The app is fully voice-controlled, making it accessible to users with physical limitations who may have difficulty with touch screens or traditional keyboards.

The app is accessible to users with visual impairments, dyslexia, and physical limitations due to its clear labels, logical organization, and easily identifiable features and functions.

Ready to talk about your project?

audioShelf contact e1706934006286

    Share on

    🍪   We use cookies for the best web experience. Read our cookie policy."
    Zahra Ali
    Home
    Account
    Cart
    Search
    Drag