Laughly Mobile App

Redesigning Information Architecture & Navigation

Overview

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. It was the first streaming app solely dedicated to stand-up comedy at the time, and some features that made this app unique from other streaming apps was their comedy-exclusive content, ability to create custom stations, specific recommendations based on historical listening patterns, profanity filtering, offline listening, material sorted by topic (i.e. dating, politics), timely new releases and joke sharing.

See the launch article on TechCrunch ↗

Role

Lead Designer and Project Manager. I planned and directed each phase of the project, conducted design studios, and facilitated internal and client meetings.

Team

I lead a team of 4 designers, and also collaborated with Laughly's sole designer

Timeline

4 weeks

Tools

Sketch, Abstract, Marvel

problem statement

How might we...

Improve the navigation and usability of existing features and also increase discoverability of upcoming new features and content?

Empathize

We knew going into the project that redesigning the information architecture and navigation would require a lot of research, especially since there were so many different features and types of content in the app. We began with a teardown of the existing app as it was to get a better sense of areas of the app that needed work.

Auditing

The first 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:

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.

Examples of different apps that users use to consume comedy content

Jobs To Be Done

After learning from the Laughly product team about their target demographic, 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.

Mapping out the Jobs To Be Done

Proto-persona created based on the descriptions from user research

Persona Development

Based on the existing examples from the Laughly team's user research, competitive analysis, and Jobs To Be Done brainstorm, we created a rough persona and storyboard to help us focus on the target user and visualize a scenario in which the user would use the app.

Storyboard

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.

Individual cards for all the content and features in the app

Results of an in-person card sorting session

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.

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).

Tree Testing

There were also some mixed results over where should live in the navigation. 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

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.

Design

With everything we learned in the research process, it was time to put everything together to bring the new information architecture and navigation to life.

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 Wireframing

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

Each designer took ownership of specific tabs and areas of the app, brainstorming and blocking layouts on whiteboard. We then designed the UI for our respective areas in Sketch using wireframe components - my areas of ownership were the Radio and Exclusive screens.

Selected screens for the lo-fi designs and prototype

Prototype of the lo-fi designs in Marvel

Lo-fi Prototype

After the team brought together the designs for their respective app pages, I consolidated the designs into the final Sketch file and put together the prototype using Marvel.

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

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. However, my team and I agreed that users should land on a home screen with content rather than land on a social feed - our hypothesis was that users were using the app to find and listen to comedy, and would not really want to see what their friends were listening to on their home screen.

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.

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 - we tackled these with some proposed design solutions and updated the hi-fi designs.

Final Deliverable

We delivered all our research, prototypes and final prototypes to the Laughly team after 4 weeks of going through the design process outlined above.

One of the hi-fi prototypes we tested with during the validation phase

TL;DR

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, and successfully delivered all research findings, presentations, hi-fi designs, and prototypes at the end of the 4 week timeline for this project!

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. 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.

Reflection

This project was a whirlwind, but a great opportunity to incorporate multiple design methods and research processes. Additionally, due to the short timeframe we had for the design process, we had to focus on communication and work together as a team. I was able to really flex my organization and project planning skills for this project, and it gave me a chance to expand on my stakeholder management and presentation skills.

Challenges

We only had 4 weeks to execute this full design process from research to hi-fi designs. The client wanted to reduce the research time and jump right into hi-fi, but based on our intuition, we knew that research and testing would be crucial for a proper redesign of something as important as the information architecture and navigation.

Learnings

Restructuring the navigation is not an easy task. Using multiple UX methods helped us to better understand users' mental models to create a new information architecture and navigation system. Also, it was really important to design an elastic system to give the app some room to grow, especially for new apps that are trying to expand functionality and introduce new features and content.

Takeaways

When in doubt, TEST. We testing 2 versions of the information architecture during tree testing, and also A/B tested 2 versions of the prototype when we were figuring out which navigation would be best. Although the testing process was much longer, it was worth it in the end.

Previous Project

Next Project

Let's connect 👋

Send me a message or connect with me and let's chat about how we can work together!