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

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.

Common Deliverables & Artifacts

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.