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.
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.
- Competitive landscape overview
- High level view of basic users
- Motivations & goals for initiating the redeisgn
- Information & resources available
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.
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
Current users experience confusion and frustration during the search, sign-up, download and save for later process.
The proposed solution centered around four key pillars - two focused on improvements and two on building out additional experiences.
- Implemented a navigational method that has a focus on filtering
- Use drop downs to drill down and explore
- 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.
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.
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.
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.
- 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
- 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
One of the major deliverables for this project was ultimately an interactive, clickable wireframe prototype.
- User Experience Design
- Interactive Design
- Clickable Prototype
- Strategy Presentation
- Invision App
- UX Design colleague
- Client’s Executive Producer of Digital
- Client’s Director of Marketing
- 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