Sustainable Brands Media
Content Consumption Model for User Enjoyment
and Revenue Generation

Web-based content library redesign & digital strategy.

The Sustainable Brands website is a learning, collaboration and commerce community of over 348,000 sustainable business leaders from around the globe. Their mission is to educate, inspire and equip individuals and companies in the ways of sustainable branding.

UX Research

Stakeholder Interviews

We started the project by interviewing our two key client contacts, Ben and Nikkos, to gather as much information as possible. They provided us with a list of users who had opted in to feedback contacts, access to the Google Analytics dashboard, and prior marketing surveys.

Interview Insights

  • Competitive landscape overview
  • High level view of basic users
  • Motivations & goals for initiating the redeisgn
  • Information & resources available

Persona Development

We developed two primary personas as artifacts to promote empathy. We constantly referred back to Pamela and Marco throughout our design process, ensuring that whatever decisions we made were true to their needs.

To begin to build the picture of our users, we used three primary methods:

  • Google Analytics: determined who the primary users are, how they get to the site, and how they use site
  • User Survey: helped us determine likes, dislikes & primary search patterns
  • Card sorting: identified user pain points and preferences.

Storyboard Creation

Storyboards were created to capture our users' mental models, humanize the pain points of our personas, ideate possible user flows, and discover tasks within these flows.

Existing User Flow

Pamela's Existing User Flow

Pamela goes to the Sustainable Brands website, and clicks into the Research Reports navigation item from the main navigation menu. After finding the individual report she wants, she clicks through to the detail view page to read the article. She tries to save the material to read it later and realizes that she is unable to do so. The end result is that of frustration.

Open Card Sorting Activity

An open card sort revealed the following insights:

  • Confusing top-tier navigation
    • too many menu items
    • confusion with the labelling
  • User top four search criteria
    • by topic
    • top collections
    • brands
    • events

Current users experience confusion and frustration during the search, sign-up, download and save for later process.

Experience Strategy

The proposed solution centered around four key pillars - two focused on improvements and two on building out additional experiences.

Navigation

  • Implemented a navigational method that has a focus on filtering
  • Use drop downs to drill down and explore

Sign-up

  • Provided a contextual sign-up process at time of download

Save for Later

  • As we saw earlier, the idea of the feature is there, but the functionality is not.
  • This feature is crucial to get people to build engagement.
  • To solve this issue we built the “save for later” buttons on the detail pages of all library items and associated flows

Paid Content Wall

  • Important to evolve towards monetized content.
  • Non-intrusive pay wall screen that makes it easy to get started and clearly indicates the pricing structure.
  • Added premium content flags to content tiles
  • Made it a freemium model where we wouldn’t restrict anyone’s access, but would require either a free trial or registration
  • By having a pay wall pop up on clicking the content we maintained the ability to view, review, save and share content before being prompted to login.

Design Guidelines

Before diving straight into problem solving ideation, we wanted to be sure that we clearly outlined what the paramaters of our solution should include. Given the compacted nature of our design sprint, we had to be clear about what we could do and use our creativity to find feasible solutions from there.

UX Design

Sketching & Paper Prototyping

Sketching and paper prototyping allowed us to explore alternative layout concepts that could shift towards a more visually dominent and engaging page layout rather than the previous text heavy layouts. This process was very iterative, and followed a pattern of divergance and convergance between my project partner and myself. This allowed for novel idea creation as well as the emergence and synthesis of of design solutions.

Wireframes

1st Iteration

Our first wireframe iteration introduced the navigation schema using select menus as filters. Though users liked the idea of being able to sort with filters, the ui buttons confused them and many were unsure of what they could expect by clicking on them.

2nd Iteration

  • Refined the drop down filtering menu concept in a way that was clearer and better received by users
  • Save for later bookmark feature was added to detail page templates

3rd Iteration

  • Major promotional Call to action widget areas were moved from the sidebar area into the main content area for prominence and to create a more scroll-inducing page feel, successfully tackling our goal of funnelling users to both events and newsletters

Clickable Prototype

One of the major deliverables for this project was ultimately an interactive, clickable wireframe prototype.

View Prototype

Project Details

Role

  • User Experience Design
  • Interactive Design

Key Deliverables

  • Personas
  • Wireframes
  • Clickable Prototype
  • Strategy Presentation

Agency

General Assembly

Tools

  • Omnigraffle
  • Photoshop
  • Invision App

Project Team

  • UX Design colleague
  • Client’s Executive Producer of Digital
  • Client’s Director of Marketing

Duration

3 weeks

Key Tasks:

  • Enhance browsability
  • Increase findability
  • Add ability to save content for later
  • Improve engagement
  • Improve lead generation, conversion, membership
  • Provide a path for a paid model in the future
  • Improve Navigation
    • Confusing Top-tier navigation
    • Navigation vs Filtering
    • User-suggested top-tier navigation
    • Requested functionality

Jacob Swift - Digital Craftsman

Listen. Act. Trust.

jacob [at] jacobswift.com

©2017 Jacob Swift | Powered by WordPress & Reactor

About Me

I am Full-Stack UX designer: a strategy-minded user experience designer who conducts research, writes code, and does visual design.

Core Expertise

  • HTML/CSS/Sass
  • Visual Interface Design
  • Experience Design
  • Interaction Design

Core Tools

  • Text Editor
  • Browser Inspector
  • Photoshop
  • Pen & Paper
  • Omnigraffle
  • Invision App

Common Deliverables & Artifacts

  • UX Artifacts
  • Live-code Styleguides
  • Hi-res screen comps
  • Production-ready front-end Code
  • WordPress Themes
  • Clickable Prototypes
  • Final Launched websites

Outside of my Wheelhouse

  • Engineering, Programming, Back-end
  • Javascript Frameworks
  • Illustration & Graphic Art
  • Motion Graphics

UX Design Immersive

During Summer 2014 I was lucky enough to be able to participate in a ten week, full-time, immersive course specifically focused on User Experience (UX) design. The course is crafted by top practitioners in the field, with a specific focus on honing students in their path to a UX design career. Through 400+ hours of face-to-face instruction, presentations, discussions, guest lectures, interactive lessons, real-world client projects, and personable mentoring, the course provided a rounded understanding of the entire UX process. The focus was on core skills, tools, and intensive design sprints encompassing the entire user experience design process. From research and ideation to prototyping and testing, we solved design problems utilizing a industry-proven set of skills and methods.