laughly web.jpg

Laughly Web Experience

 
 

Laughly Web Experience (Beta)

 
 

Adapted Laughly's iOS experience to web, including the homescreen, album pages, player, search, and discovery

Currently running tests in beta

 
 
 

Before

After

 
 
 
 
 
 

Landing Page Before I Joined

 
 
 

This was the web landing page before I joined.  I completed a heuristic review and noted:

  • Lack of clear CTA - There were at least 6 CTAs, and the main CTA "Get Started" button had the same styling as comedian names
  • Distracting Visuals - Busy visuals are crowded next to value props on one page, without sufficient breathing room. The images also automatically refreshed every 30 seconds, further distracting from the CTA.
  • No Responsiveness - The site had awkward large gaps on large screen sizes and would cut off comedian faces on small screen sizes
 
 
 
test goals icon.png

Through conversations with stakeholders, we determined that an improved landing page would emphasize:

  • Sign-up/Registration over Login, since we're a startup focused on acquisition
  • More variety of value props that differentiates us in the market, through copy and screenshots
 
 
 
 
 

Landing Page Explorations - Designed by Me

 V.1

V.1

 V.2

V.2

 V.3

V.3

 V.4

V.4

 
 
  • In the 1st phase of clean-up, I proposed a short-term solution keeping the mosaic but locking it into one state that doesn't animate. This version also provided more room for the CTAs to shine. Our value prop was clearly displayed with the largest font in a different styling than other text
  • In the 2nd phase, I explored versions with a parallax scroll, dominated by large images of famous comedians, and space to show more value props and Laughly screenshots. Some versions of parallax prompted users to search for comedians so they can explore Laughly's catalog before registration. 
 
 
 
 
 

Current Landing Page Design

 
WebLandingAnimation_700width.gif
 
 

After expanding our color palette and brand styling, I was able to approach the current landing page with a more modern take. This brought it in line with the style of our comedian portal and umbrella corporation landing site. The five main sections covered: 

  1. Recognizable comedians and one clear CTA
  2. Three value props that differentiates Laughly
  3. Second tier value props and screenshots
  4. Quotes from media reviews
  5. Availability on a variety of devices
 
 
 

As we ramp up web advertising and transition to a subscription-only product, we need to closely track how this landing page converts to 7-day trials. I'll have the chance to test a variety of value props and comedian faces to see which ones drive more clicks. 

 
 
 
 
 

Homescreen Designs Before I Joined

 

I started with testing and teardown of the existing homescreen design, which identified many issues including: 

  • Visual distractions: Top half of screen is used for promos and automatically refreshes. Large logo in middle of the page takes up valuable real estate 
  • Break with familiar patterns: The player is placed in the middle of the screen, not following familiar patterns of other media players
  • Odd information architecture: Inconsistent IA and important info like comedian name is put last. Comedian and album images are too small to be recognizable
  • Complicated navigation: Navigation hides core functionality and layers of nesting requires many clicks to get to content
  • Confusing icons: use of unrecognizable, unlabeled icons
 
 
 
 
 

 Homescreen Blocking - Designed by Me

 V.1

V.1

 V.2

V.2

 V.3

V.3

 V.4

V.4

 V.5

V.5

 V.6

V.6

 
 

First, I explored versions keeping the player in the middle and making best use of space above and below the middle divider, but the division made the screen's scrollable area too small.

After an analysis of media players on the market, stakeholders felt comfortable exploring a top aligned player (bottom row of designs). Less important elements were able to be further condensed into the player and under navigation, giving the content in the middle space to breathe.    

 
 
 
 
 

Homescreen Version Tested

 
Homescreen testing version.png
 
 

With web, I could bury functionality and icons that only appeared on mouse-over, putting less choice in front of the user in the discovery phase. Compared to the previously existing version, I also relied more heavily on visuals to pull the user in and greatly simplified the navigation nesting. 

Users still found the left bar a little too cluttered, so we sought to simplify it in the current version... 

 
 
 
 
 

Current Homescreen Design

 
 
 

Once we're able to direct advertising toward Laughly's web product, we'll be able to do more testing on conversion and retention. Our main challenge so far has been maintaining and growing web in stride with the rapid pace of mobile development.