top of page
pic.png

Audioasis

For generations, storytelling has been a way to share knowledge and a way to connect people. Storytelling is an oral tradition that is universally significant as it allows everyone to learn about other cultures, traditions, and values. 

243shots_so.png

Duration

22 Weeks

 

My Role

Product Manager

UX/UI Designer

User Researcher

Team 

Hanh Binh Nguyen

Daliana Solis Solis 

Annahi Paez

Tait Strandgaard

Alma Flores Ortega

Disciplines

UX Design

User Research

User Testing

Prototyping

App Development 

Tools

Figma

Lucidchart

Flutter

Dart

Firebase

Jira

My Role
Product Manager, Researcher, UX Designer

My responsibilities included leading the team-client meetings, presenting to the sponsor, task assignments, document work, researching, updating the backlog and roadmap, and sprint planning. Additionally, I contributed to sketching, wireframing, and conducting usability tests. 

The Problem

Reviving Storytelling Tradition with a Modern Approach

To continue the age-long tradition, there is a need for a modern approach to storytelling where stories can be preserved and shared. Current platforms primarily center around published content and professional creators, leaving little room for short stories. These applications are often complex to navigate, limiting users' creative freedom. 

The Solution and Product

Creating a User-Centric Short Story App

Objective 

Create a mobile app allowing users to create, share, and listen to a wide variety of short stories from different genres. Create high-fidelity mockups intended for presentation at the Tucson Festival of Books.

Features

video-player.png

Upload Stories

video.png

Listen to Stories

magnifying-glass.png

Discover Stories / Recommendation System

folder.png

Playlists

The Market

Key Findings:

We conducted a competitive analysis of well-known applications:

  •  Spotify, Audible, SoundCloud, Youtube, and Wattpad. 

We found that very few applications allow users to add storytelling content. These platforms often require licensing or publication before content can be added.

 

Other similar platforms primarily cater to music creators, and Wattpad, the only one resembling user-generated literature, primarily focuses on writing and reading rather than audio content.

Lack of User-Created Audio Book Apps

Before designing, we conducted market research to identify gaps among competitors. 

Documentation
Project Scope Definition, Product Requirement Writing, Risk Mitigation, and Software Architecture Diagrams

The team focused on creating the documentation of the application. This entailed defining the project's scope and outlining the requirements, planning the database structure, and defining features.

Product Requirements Document 

Sketches and Wireframes
Exploring, Uploading, and Listening to Stories
From the competitive analysis, we identified key features and pages commonly used.

Discover Page and Recommendations

Users are able to explore a wide range of stories from different cultures, genres, and authors. Based on the user's interests and preferences, a recommendation system can be implemented. 

Library Page and Playlists

Users have the freedom to save any story into a playlist. The library page is a central hub where users can access their saved stories, all in one place.

Recording

The application would allow for in-app recording, enabling users to easily record their story audio directly, without having to spend money on professional equipment. 

Story Description

Each story must have a page detailing the author, title, duration, tags, and story description. This allows users to determine their interest in the story before listening.

Listening Control

Similar to numerous movie, video, and music streaming platforms, users must be able to play, pause, like, save, and rewind while listening to stories.

Uploading

In order to continue the tradition of storytelling and provide users with creative control, the app must allow users to upload audio files of their stories. 

After identifying key features, I assigned all team members the task of creating sketches. As a group, we thoroughly reviewed these individual sketches to identify common design patterns. I utilized these patterns to generate a final set of sketches, which served as a guide for the design of our wireframes.

Mockups

Applying Usability Testing to Develop High-Fidelity Mockups

Following the creation of our wireframes, we conducted the initial round of usability tests.

We utilized the feedback gathered to enhance our wireframes, resulting in improved mockups showcased below.
Based on the first usability testing feedback, we changed the uploading icon and the layout of the uploading page.

Due to time constraints, we were unable to implement some of the design feedback from the second usability testing. 

Home Page.png

Home Page

The home page showcases a collection of previously listened stories and new stories tailored to the user's interests and preferences. This feature enables users to either keep listening or discover new stories through the recommendation system. 

Discover Page

Users are provided with the opportunity to explore new stories by searching and using filters. On this page, they can explore various genres and discover a wide array of options.

Upload - Single Main.png

Uploading Page

Users have the capability to upload their own audio files and include descriptions. This information is essential for others to read the story's description and promote it within the user recommendation system, based on similar stories listened to.

Library Page

The library page serves as a central hub where users can access all their saved stories and playlists, ensuring that they can conveniently listen to their favorite stories and find them quickly.

 

Story Description

Clicking on a story reveals its description, similar to books and movies. This allows users to read and determine if this is something they are interested in before exploring it further.

Listening

While listening, users have control over the story's audio playback.  Liking and disliking stories also contribute to a more precise recommendation system.

Recording

To begin recording, the users would simply click on the recording button. After, users have the option to either save the audio and proceed with the uploading process or re-record the audio. 

Before & After 

Usability Testing

Concept Testing for Application Approval and Design Refinement Through Task Analysis

Usability Testing #1: Concept Testing

We initiated the first round of usability testing to evaluate if the designs aligned with the problem and user needs.  We invited 5 random individuals to the testing. 

Objective

Findings

  • Receive feedback on:

    • ​Design 

    • Layout

    • Features

    • Usage struggles and challenges

  • 4 of 5 participants struggled to identify the uploading icon 

  • 2 of 5 participants suggested adding titles under each story to help differentiate the content

  • Participants found the idea of a storytelling application "interesting", "unique", "pretty cool"

We made changes to the uploading icon and altered the visual format for presenting stories. These changes were added to the next design iteration, high-fidelity mockups. 

Usability Testing #2: Task Analysis 

After the completion of the high-fidelity mockups, we carried out a task analysis testing to gather feedback on the recent design changes before beginning the development phase. We asked 6 random individuals to participate in the testing.  
 

Objective

  • Users must complete these tasks:

    • Upload a story​

    • Search a story 

    • Edit a past story description  

  • Receive feedback on the designs 

  • Identify any struggles utilizing the prototype

Findings

  • 2 of 6 Participants were confused with the uploading page 

  • 4 of 6 Participants were confused about "series"

  • 2 of 6 Mentioned the application felt familiar to other apps, and it was easy to use ​

We decided to delete the "series" feature to scale down the project scope.

App Development

Our developer chose to use Flutter as it allows for the implementation of the user interface and backend.

Firebase was utilized for the backend to store audio files, stories, user data, and playlist information. 

a9d6ce81aee44ae017ee.png
1_eCcUQZ41KEymku16tSK6AQ.png

Conclusion

Audioasis: Transforming Storytelling in the Digital Age

Our team created Audioasis, a modern short story app designed to preserve the storytelling tradition. Through competitive analysis, we identified a market gap for user-created audiobook apps.

 

Our app features a user-centric approach, allowing individuals to both create and listen to a variety of short stories across different genres. Users can upload their own stories, explore and discover new content, and create personalized playlists.

 

Audioasis is a unique digital platform offering users a space to share, discover, and enjoy a diverse array of short stories.

Challenges and Limitations

Skill, Design, and Data Limitations

pen-tool.png

Limited Design

We had to use inspiration from a variety of platforms for design references. 

programmer.png

Developer Shortage

With only one developer in the team, we were unable to fully develop the app.

analytics.png

User Research / Data

We were unable to conduct thorough user research, including surveys with potential users to understand their needs.

Reflection

What I Learned: Development Process, Multiple Roles, Iterations

Development Process

I gained experience in integrating the entire development phase. Unlike previous projects that separate research, documentation, and design iterations, this project combined them together.

Multiple Roles

I learned to take on multiple roles simultaneously, managing responsibilities as a product manager, researcher, designer, and moderator, all at once. This taught me about each role's responsibilities and their importance in project development.  

Iterative Refinement 

An important skill was iterative refinement. As the project evolved and changed, I understood it was necessary to refine and improve all documentation through the iterations. This kept the project scope clear and concise. 

bottom of page