Life Done Different

Services | Front End Development, UX / UI Design, Visual Design, Branding

The Tools & Technologies | Adobe CS (Illustrator, Photoshop), HandleBars, MongoDB, Express, CSS3, ReactJS, & Contentful

www.lifedonedifferent.com

UX Design. Images of varying pages of the website on a computer, tablet and phone.

Life Done Different is an innovative podcast featuring individuals who have taken unconventional paths in life.

The podcast’s founder and production team are non-technical, with little IT experience. They wanted a brand that was indicative of their core values, would gain credibility with their guests, and connect to their listeners. We worked with the podcast’s founder to identify necessary deliverables to attract guest, increase listenership & audience engagement while elevating the brand and understanding the team’s technical limitations.

 


1. The Problem

Life Done Different envisioned a clean, engaging, dynamic branding and online presence, however their technical limitations stopped their vision from being executed. Before Out-of-the-Box, Life Done Different was forced to create simple, minimalist assets that came off as generic. Out of necessity, their original website was a standard WordPress template that also left a lot to be desired. It wasn't engaging, and when arriving at the site, it didn’t project 'New & Innovative Podcast!' Their images were rough, not optimized, and their entire web presence projected a corporate, stogy, conformist feel; exactly the opposite of their message. Out-of-the-Box solved this problem first by clarifying their vision and then bringing it to life.

Original Logo

UX Design. Images of varying pages of the website on a computer, tablet and phone.
Circle block baby quilt with owl and the 'Lone Rhino' logo and embroidered tag.

Original WordPress Site

UX Design. Images of varying pages of the website on a computer, tablet and phone.

2. Research & Identifying Business Needs:

In order to solve the problem, we first needed to learn more about the space. Since this was our first podcast project, we went to the masters: Serial, This American Life, Revisionist History, Hardcore History, and many others best-in-class podcasts to understand podcast business needs and the recipe for success. We looked at layout, assets, iTunes display, interaction design, and UX / UI. We brainstormed with our creative client on deliverables he needed for each podcast to make sure our goals and priorities for Biz Dev were also inline.

Serial Landing Page

Circle block baby quilt with owl and the 'Lone Rhino' logo and embroidered tag.

Serial Season 1 Page

UX Design. Images of varying pages of the website on a computer, tablet and phone.

Revisionist History Landing Page

Circle block baby quilt with owl and the 'Lone Rhino' logo and embroidered tag.

Business Needs for MVP

Circle block baby quilt with owl and the 'Lone Rhino' logo and embroidered tag.

The Goals:

After meetings, brainstorming, and lots of research, we agreed on four goals for the project:

  1. Create brand identity indicative of core values and business goals.
  2. Build a unique, bespoke site inline with other best-in-class podcasts.
  3. Ability to easily updates and manage content by non-technical creators.
  4. Increase interaction and listenership by:
    1. Surfacing content at multiple levels & multiple subscriptions points
    2. Facilitating interaction through listener comments & social media

3. The Branding ReDesign & Style Guide:

Life Done Different was created with a specific purpose and audience in mind. The creator wanted to illuminate alternative carrer paths / lifestyle design choices to young adults (college students and young professionals) that lead to success. The mood was investigative rather than proscriptive, and the tone was inquisitive, innovative, and approachable. The branding needed to mirror that same feel. We chose a variation on complimentary colors, orange and blue; blue was the calm, friendly and familiar, while orange was the surprise. Together they create an exciting duality that mirrors the feel of the brand. The color placement including the orange dot on the ‘i’ in ‘Life’ draws your eye through the image, and the lower case thin sanserif are relatable and clean. The implied square of the logo is ideal for iTunes cover art, and the abstract triangular icon illustrates a kite or window, to depict freedom, or a glimpse into a different world.

UX Design. Images of varying pages of the website on a computer, tablet and phone.

4. The User Flow:

After creating the core assets and working pieces of the brand, we move onto prototyping the website. Our first stage in the web app was to understand the core experience, flow of the site, and how the users would interact with the media. We pulled a lot on our research for comparables and identified necessary screens for the app. We also knew the core content was the episode audio files; this needed to be dynamically populated and scalable as the number of episodes would increase over time. Because of the expanding nature of the site, we wanted to keep the core flow, different types of pages, and UX to necessary information and as minimal as possible.

Handwritten Wireframing

UX Design. Images of varying pages of the website on a computer, tablet and phone.

Prototyping UserFlow

UX Design. Images of varying pages of the website on a computer, tablet and phone.

5. The Mockups & Wireframing

Starting with the Cards.

We really designed with the user in mind and considered what was the most important content for people visiting the site: audio files. Users came to listen to episodes and find out more about the podcast. That is why we chose to surface audio on many layers, instead of burying it multiple clicks deep. We did this through designing episode cards; from our research, shows like Serial and Hardcore History did similar approaches to graphically contain and give information on each episode. We followed Serial’s model and even let users play every episode of the season from a single page (All Episodes) on the podcast card.

Sketch

Circle block baby quilt with owl and the 'Lone Rhino' logo and embroidered tag.

Prototype

UX Design. Images of varying pages of the website on a computer, tablet and phone.

Design

Circle block baby quilt with owl and the 'Lone Rhino' logo and embroidered tag.

Moving onto Individual Screens.

We designed the podcast cards first, and used them as a jumping off point for the individual screens. We wanted consistency and cohesiveness between the pages; we used the same images and wrapping on the Individual Episode Pages as we did for the episode cards on the All Podcast Page. The audio player took higher prominence in the Episode Page, and we gave a lot more information on the episode as a whole. Additionally, like other best-in-class products, we allowed users to engage via comments on these pages. This helped accomplish one of our goals of engagement while siloing pertinent comments and information to specific episodes.

Sketch Individual Screens

UX Design. Images of varying pages of the website on a computer, tablet and phone.

Design Individual Screens

UX Design. Images of varying pages of the website on a computer, tablet and phone.
UX Design. Images of varying pages of the website on a computer, tablet and phone.
UX Design. Images of varying pages of the website on a computer, tablet and phone.

6. User Testing

We next put our mockups and wireframing through user testing. Initially, we didn’t have a splash / landing page for Life Done Different, and the home page was the All Episodes Page. This initial design was created to reduce clicks, barriers to entry, and burying content. However, the experience was “off”; some users described it as out outdated, or entering into the middle of a website rather than the beginning. When we reexamined our research, we realized most podcasts have a clear entry point; a landing page. The Landing Page sets the tone and usually only has two action choices to enter the site: subscribe and episodes. We added a splash page, mirroring the same paths which improved the UX and interaction for users.

Circle block baby quilt with owl and the 'Lone Rhino' logo and embroidered tag.

7. The Deliverables

After completing User Testing it was time to build. Our small team initially built the application using Handlebars, Express, and MogoDB to store the data. We also created an administrative one page for the client to upload a new episode to the backend that would dynamically populate on the frontend. This worked great initially, but editing a previously published episode needed to be handled by the Out-of-the-Box team. We fixed this in December by refactoring the entire application into React and Contentful (a headless, API driven CMS); now, our client can completely manage, edit, and upload all of his content independently. Our client is thrilled with his bespoke frontend, that’s optimized for cross-platform use, and indicative of his unique brand. We delivered on our four goals, and our client has seen an increase in listenership of over 3000 downloads over 3 months.

UX Design. Images of varying pages of the website on a computer, tablet and phone.
User using the platform on a tablet and selecting 'standard block quilts' to view.
Stack on Lone Rhino business cards - front and back - with rhino logo and contact information.
Stack on Lone Rhino business cards - front and back - with rhino logo and contact information.
UX Design. Images of varying pages of the website on a computer, tablet and phone.
User using the platform on a tablet and selecting 'standard block quilts' to view.
Stack on Lone Rhino business cards - front and back - with rhino logo and contact information.
Project Website: www.lifedonedifferent.com