research & Prototype Design

Audiyo!

Opportunity

When I was approached with this project, I really saw the potential in it. The way it was described to me was: Twitter, but instead of words, users express themselves with sound bytes, or Instagram, but instead of images, sound. The goal was to ultimately create an engaging iOS experience in prototype form to attract possible investors.

Objective

Design a prototype to demonstrate the full range of features and interactions present in successful existing social channels/apps.  The success of the project will be demonstrated by user base acquisition which will lead to the creation of the AUDIYO! social community.

Design Process

initial user test

The stakeholder had some screen flows designed. I tested those screens among my user base and also performed my own analysis of the screen flows. 

competitive analysis

I chose 4 social media apps that I thought researching would highly benefit the direction of this project:
soundbyte

An app that is a direct competitor of Audiyo! The premise is the same. Audiyo!, however will do it better with a more engaging experience and more appealing and effective UI design.

Twitter

If Audiyo! was going to be a Twitter but with sound, then I had to examine the experiences that made this social channel wildly successful. The core age group that Audiyo! is trying to reach is the same as Twitter's.

instagram

Again I had to dissect the user experience model to understand what goes behind the experience that will attract a large user base. Same core demographic.

Snapchat

Another successful image/video based social channel that has a large social community. Same core demographic.

competitive element analysis

analysis

Analyzing the elements helped me realize what features and functionalities I needed to consider to create an awesome social channel experience.

There has to be a home feed where the user can view posts, share posts, and comment. This promotes repeat app interaction which ultimately leads to a large user base acquisition. 

The user has to be able to find and add people, which will widen the users reach thus promote app engagement. Ability to explore and discover content to further app engagement.

competitive layout analysis

user acquistion

I used social media channels like Facebook and email to acquire a large user pool. I then used a survey to find out what channels they used and how much time daily was spent on these social channels.

The sweet spot is the 18-24 age bracket that are on the social channels 2 hours or more on a daily basis. It would be interesting to find out what elements keep them engaged, and what motivates their use.

user personas

I used the information I gathered from the user interviews; noticing trends in reasons for social channel usage, what engages them, usage goals, and pain points, to create personas that will use the app differently enough to demonstrate the robustness of features and functionalities.

primary persona

Elijah's User Journey

It’s a beautiful spring afternoon and Elijah is sitting on campus grounds with a small group of friends.  They’ve laid out a blanket on the grass and they’re sitting in a circle just talking about their day.  There are backpacks everywhere. One of Elijah’s friend is messing around on the guitar. 

Elijah gets a notification on his phone that 2 people are listening to his Audiyo. He taps on the notification to see who is looking at his posts. He turns to the girl that he likes to show her a cool Audiyo that he saved(saved is easier to access than seeing a whole list of likes). She laughs. Elijah asks his friend with the guitar to play something, he records an Audiyo of himself singing and posts it.

elijah's user flow

He taps on the Audiyo! notification.
After he sees who's listening to his Audiyos, he goes to his profile.
After checking his updated followers, he taps on his saved Audiyos.
He taps play on the first Audiyo! to impress his female friend.
His group of friends listen in and feel inspired to record their own.
He asks his friend with the guitar to start playing, as he taps record.
Elijah taps done once he's done recording.
He taps to add a photo
He chooses to snap a photo
The camera interface comes up
He crops the image easily
He finishes by naming the Audiyo!
After he taps Done, the new Audiyo! appears on his Home feed.

Ideation Process

features needed

Create Audiyo
View Profile
Notifications
List of friends who have listened
Favorites or Saved Audiyos
Select or Take picture
Comment - Text or audio
Share via Tumblr, etc
CoLab (ability to mix/edit up to 3 Audiyos)
Search
Recommendations
Inbox/Direct Message
Sound filters

FEATURES PRIORITIZATION MATRIX

elijah's screens features

wireframes

activity screen

1. Favorites icon is easily accessible.

1. Stakeholder wanted to try using a fire icon.

2. Adopted Instagram's layout style so that it would be familiar to users. Wanted to make it slightly different by using icons instead of words.
1. Using a more familiar icon for Favorites. Users didn't know what the fire icon was.

2. Users didn't understand the icons during user testing.

3. Using a brighter more vibrant green to continue stakeholder's color palette choice. Experimented with using brown to complement the vibrant green to provide contrast.
1. I decided on a purple to blue gradient for the main color to give the header/footer bar some depth and character. Users did not appreciate the vibrant green at all.

2. Decided to keep the green from the previous iteration as a complementary color.

3. Made the Create button more important with design treatment and size increase.

4. Incorporating logo to represent Activity.

activity screen

1. Chose a landscape image orientation to accommodate for the length of the sound wave from left to right.
1. Recommended that the CoLab feature made sense in the profile, because users receive CoLab requests in the Inbox.

2. Simplified stat icons.

3. Removed double line between Audiyos to fit more content on the screen.
1. Changed to Me, to help make the app for personable.

2. Simplified CoLab icon.

3. Added an Inbox notification view.

favorites screen

According to the interviews, my user pool they wanted the ability to access their favorite content with ease, so I recommended that the Favorites icon be placed at the top right in the header.
The stakeholder wanted to the ability to quickly "listen/(follow)".
I recommend having the stats in gray to give the Feed screens some contrast between elements.

Record Audiyo Screen

The first iteration of the recording process involved the user pressing the record button, the inner circle would then transition into a stop icon, then transition to a play icon.

The user needed the ability to import sound files from his/her device.

However, the stakeholder wanted the user to have the ability to record different sound segments.
Through user testing I found out from users what common practices they use/are used to for recording different segments of video/sound.

So here, the user holds down to record. Recording stops when they release. And hold down to record more.
I recommended occasional on-boarding messages where deemed helpful to the user. 

Add Podcast Downloads

Midway through the project, realizing the potential of this app to be more than just a platform to share sounds and recorded clips, I implemented the Add Podcast feature, so that familiar voices and influential personalities can be shared, adding more value to the app. Users really liked the addition of this feature and found value in it.

Audiyo Created Screen

Initial thought on the design of the sound wave: that it should be colorful and vibrant, full of life.When recording is finished, the user has options to record again or put a filter on the Audiyo.
1. Changed the Audiyo visual representation to something more organic and loose, so that when played it almost feels alive.

2. Recommended icons to replace text.

3. Implemented actions in circles to have better visual synergy with the Record button.
Dialed back the background image to better highlight the Audiyo wave and the actionable elements.

Sharing flow

Initial Sharing Flow

The initial share preparation process involved a rectangular image box to accommodate the Audiyo dimensions. The categorizing method would require the user to label the Audiyo with pre-selected categories. The Tag People and Add Location would behave in the same way. It would take you to a different screen and then back to the Share To screen.The user also could choose to post to Listeners to send a CoLab to friends by toggling the secondary navigation on top.

Final Sharing Flow

I tested this flow with users and although they didn't mind the initial process, they thought this was more a modern and streamlined approach.Users also thought having channels/categories was limiting and suggested using hashtags.In this flow, the user is able to:

  • Add People, Location, and post without leaving the screen.
  • The Share to other social channels option pops up as an overlay after the task is done.
View prototype
Back to the top