Laugh.ly

Information Architecture & Navigation Design

Laugh.ly is Spotify for stand-up comedy.  The platform has the largest digital library of stand-up comedy content. The app currently has on-demand and radio features, but will soon also include exclusive content such as comedian interviews, live-stream events, and social features.

The Challenge

The app has and will become increasingly difficult for users to navigate due to numerous content-types and features being organized inefficiently.

  1. The only way to navigate the app is through the hamburger menu – mix panel analytics noted over 50% of users did not interact with this menu
  2. Ineffective organization of content – e.g. 8+ carousels on the main content page

Role

As the design lead, I led a group of 5 designers to perform a complete redesign of the iOS application with primary focus on the navigation and information architecture. The goal was to allow for better findability of content while also improving the general usability of new and existing features.

Empathize

USMO

We gathered some user demographic data from Laugh.ly and leveraged this information to better understand the general problem space and the app's value-added to the user by going through a USMO exercise. USMO is a process based on the 'Jobs to be done' framework to help develop job stories.

User Personas + Story Boards

After gaining a general understanding of use-cases, motivations, and expected outcomes, we materialized our findings into user personas. We created personas for general users as well as super-users (not shown).

Define & Analyze

Teardown

We performed a quick teardown of the current app to map out the existing information hierarchy and take note of any issues.

In addition to the current content, the client also had a number of new content categories and features that were not yet in the app but needed to be implemented into our design.

Card Sorting

With the inventory of content-types and features, we created a deck of cards to be used for card-sorting.

 

We utilized open card-sorting with 6 comedy fans within the demographic of a typical Laughly user to understand how they would organically group the content and features. Test participants were asked to group the content into related groups and provide titles to each of the groups.

Tree Testing

Based on our results from card-sorting, we hypothesized and created two new information hierarchies to improve content findability and navigation.

We validated the new hiearchy via digital tree-tests with 12 comedy fans. Analyzing the results showed us what was difficult or easy to find, and we used this information to design our lo-fi screens.

An example of a scenario and the pertaining answer to one of the tasks in our digital tree-test:

Ideate & Validate

Design Studio

With a clearer vision for the new IA, we held a design studio to brainstorm and converge on ideas for the layout and interface of key screens.

By the end of the design studio, we had selected the best ideas to move forward with and turn into lo-fi mock-ups.

Lo-Fi Prototype + Validation

We created a Lo-Fi prototype and tested the findability and usability of 12 content-types and features with 6 comedy fans who were unfamiliar with the app.

Users' responses were rated a 1, 2, or 3, depending on whether they were unsuccessful, indirectly successful, or directly successful at finding the content. The ratings were averaged across users to assign a "findability rating" to each of the content-types tested.

For the three difficult scenarios, we came up with potential solutions design to validate in the Hi-Fi phase:

Difficult Scenario #1 – "You know your friend John Smith is on the app and you want to find and follow him.  How do you do that?"

* - 'Search’ replaces ‘Saved’ in the tab bar, but we were confident that users would be able to find ‘Saved’ under profile, as we validated that in one of the versions of our tree-tests. Further, we planned to revalidate whether our hypothesis holds true during hi-fi validation.

Difficult Scenario #2 – "You know there is a comedian live-stream event coming up and you want to learn more about it. How would you do that?"

Difficult Scenario #3 – "You want to listen to a popular comedy station, where do you go to find that content?"

** - We further hypothesized that it was due to the framing of our scenario that some users did not find the ‘Radio’ option; we avoided leading the user by not explicitly asking them to look for “radio”. Thus, some users were happy with finding content on the ‘Explore’ tab.

Ideate & Validate (again)

Hi-Fi Prototype + Validation

We created a Hi-Fi prototype, implementing changes to address the issues discovered through Lo-Fi validation. 

With the prototype, we performed usability tests with 10 comedy fans; each of the tests included 10 scenarios, which focused around validating findability and usability of content either not tested or was difficult for users during Lo-Fi validation.

The results were really good: 10 out 10 content-types tested were either highly findable or moderately findable for the average user tested.

Please see below how the results improved in Hi-Fi for the three scenarios that were difficult for users in Lo-Fi:

Scenario #1 – "You know your friend John Smith is on the app and you want to find and follow him.  How do you do that?"

Scenario #2 – "You know there is a comedian live-stream event coming up and you want to learn more about it. How would you do that?"

Scenario #3 – "You want to listen to a station with popular jokes, where do you go to find that content?"

*** - It may have been due to the framing of our scenario which led users to not find the 'Radio' option; for users that heard and registered the word "station", it automatically triggered them to look for 'Radio'. Other users found content in the 'Explore' page that seemed to be popular, as they were more triggered by the word "popular" in our framing of the scenario.

Prototype

Check out my live prototype!

This is a version of the hi-fi prototype that we used for validation.

Tip: Try to play Myq Kaplan's "Vegan Mind Meld" on the home page to check out the media player

Conclusion + TLDR;

We tested 32 total users between card-sorting, tree-testing, and multiple rounds of validation. What we ended up with was an interface design with all-new navigation and information hierarchy that not only better organizes the existing content and features, but is also future-proof as we were meticulous with designing in consideration of features that were to be released in the future.

Our validation tests during lo-fi and hi-fi tested for 19 unique content-types, features, or functions, and all 19 passed our minimum-tolerable findability, which meant they were all at least moderately easy to find for the average user.






Our design has since been implemented into the Laugh.ly iOS app and is currently live in the app stores. Check it out!

Previous: MercariNext: Zara