Laughly

Information Architecture and Navigation Redesign

About Laughly

Laughly is an audio streaming app for standup comedy, and it boasts the largest library of stand up comedy as well as tons of exclusive content and live-stream shows.

Scope

Redesign the information architecture and navigation to improve usability of existing features, as well as increase discoverability of new features and content.

Role

I was the Lead Designer and Project Manager, leading a team of 4 designers. I planned and directed each phase of the project, conducted design studios, and facilitated internal and client meetings.

TL;DR

The goal of the project was to improve usability of existing features as well as increase discoverability of new features - this meant a complete overhaul to the existing information architecture and navigation. We combined multiple UX methods to ensure that we captured as much data as possible for restructuring the IA, ultimately testing 30+ users throughout the project. With a small team we were able to execute and deliver quickly on the short timeline.

As the lead designer, I managed the timeline and execution of each phase of the design process, led design studios with the team, and facilitated internal and client meetings.

Process Overview

In 4 short weeks, we performed market research, conducted card sorting, tree testing, and validation testing on 30+ users, and incorporated multiple rounds of feedback from the Laughly product team in time to deliver final designs before their major app release.

Empathize

Competitive Analysis

We began with competitive research to understand how users currently listen to standup comedy. This helped us to get an understanding of the current comedy landscape and get a feel for some of the conventions and design patterns that other comedy and audio consumption apps were using. The Laughly team identified their top competitors, and we also researched other apps that users could use to listen to comedy. The features we wanted to research specifically were:

Below are a few slides from the extensive competitive analysis deck:

Jobs To Be Done

After learning more about their target demographic from the Laughly product team, we created job stories to brainstorm the different types of users that would use the app and what would motivate them to use it in different situations.

Persona Development & Storyboarding

Based on our research and Jobs To Be Done brainstorm, we created a persona and storyboard to help us focus on the target user and visualize a scenario in which the user would use the app.

Teardown

The next step was to map out the existing content and information hierarchy of the app and take note of any usability issues to tackle in the redesign. Below are a few examples of the issues we found in the app:

Card Sorting

In order to understand users' mental models about how content should be organized, we started out with an open card sorting exercise.

First, we catalogued all the content and features in the app and wrote them out on index cards. We also included new content and features on Laughly's product roadmap, which they told us would be released in the next couple months. Any high level navigation labels were left out so that users could group cards without bias.

We tested 5 people who had never used the app before and asked them to group the white index cards in a way that made sense to them. After they completed organizing the cards, they were then instructed to label each group of cards on their own on colored index cards so that we could see what they would instinctively label them.

The results showed that most users created similar categories for their groups of cards, but also revealed some confusion around certain labels that were used in the app (i.e. users did not associate Channels with Radio).

There were also some mixed results over where On Demand content, Radio stations, and Favorites should live in the navigation.

Tree Testing

Based on the results from card sorting, we created 2 versions of the information architecture to test how easily users would be able to find features, and see which placement of the On Demand content, Radio stations, and Favorites was the most intuitive for users.

Define

SYNTHESIS

After completing card sorting and tree testing with users, we analyzed the results to identify all pain points and determine the information architecture we were going to use for the low fidelity prototype.

Information ArchitecturE

The results of the card sorting and tree testing helped us to determine the best information architecture to use in the lo-fi designs. We ultimately decided on 5 high level categories that would make up a bottom tab navigation in the app - this tab bar would replace the hamburger menu and allow persistent access to multiple sections of the app.

Ideate

Design Studio

I led a Lean UX design studio for the team to ideate on designs for the navigation and UI. After rapid sessions of sketching, presentation, and critique with the team, we converged on the best ideas and sketched the rough UI on the whiteboard.

Lo-Fi Prototyping and Validation

Lo-Fi Wireframing

Using the information architecture structure and the sketches from design studio, we worked together to create low fidelity wireframes in Sketch.

Lo-Fi Prototyping

We used the lo-fi wireframes to create a clickable prototype in Marvel - check it out below!

Usability Testing

After creating the prototype, we conducted usability testing to validate our early designs before going into hi-fi. We tested 5 users and scored their actions based on how easily they were able to complete each task.

The results showed that users had no problems finding certain features such as profile, saved content, social feed, and top comedians. However, users had difficulty finding/following friends, searching for radio content, and discovering emerging comedians and live-streaming. 

We addressed these pain points by hypothesizing why users had difficulty and iterating on the design to improve the usability.

Hi-Fi Prototyping and Validation

Hi-Fi Mockups

We created high fidelity mockups of the app in Sketch and incorporated the design iterations from lo-fi testing. In addition to these changes, the Laughly product team wanted to test how users would respond to a social feed as the home screen. My team and I agreed that users should land on a home screen with content rather than land on a social feed, because our hypothesis was that users were using the app to find and listen to comedy, not see what their friends were listening to.

In order to test our hypothesis, we decided to design 2 versions of the high fidelity mockups and prototypes and conducted usability tests for each version.

After several rounds of feedback with the Laughly team, we included more changes to the hi-fi design:

After creating 2 versions of the navigation for the hi-fi mockups, we validated the designs through usability testing for each version.

All users who were tested for V2 (social feed as home screen) explicitly mentioned that they did not expect the social activity to be on the home screen. Also, most of the issues we found in lo-fi usability testing were resolved, but additional issues were found during hi-fi testing.

Final Deliverable

We delivered all our research, prototypes and final prototypes to the Laughly team, and they were very excited with the results. You can play around with one of the hi-fi prototypes we used in validation testing below:

Next Steps

The redesign of the information architecture and navigation was challenging, but by utilizing multiple UX methods and thoroughly testing our prototypes, we were able to deliver a design that improved the usability of existing features and discoverability of content. Additionally, we created a system that was elastic and future-proof for any new features and content that Laughly planned to add in the upcoming months. Some of our designs have already been implemented into the app - download it here to check them out!

Takeaways