Redesigning Barnraiser's Discovery Area

Building the foundation for a connected community of Mindful Munchers by fostering informed engagement.
Hero image of final design solution for Barnraiser Discovery

At a Glance

3 weeks
2 teammates
1 great client

Methods Used

Comparative Analysis
Heuristic Analysis
User Interviews
Affinity Mapping
Feature Prioritization
Usability Testing
Prototyping (Figma)

Project Overview

Barnraiser is the gathering place and marketplace for foodies, farmers, and futurists to discover the foods they crave and the community they seek. However, its website lacked a platform that connected these users.

My team’s task was to transform Barnraiser’s current Discovery area from a static listing of businesses into a connected community that allows users to not only discover a variety of content but also interact with each other.

Our Research

Understanding the Client's Needs

The project brief requested features including comment curation, push notifications, variety in content types, and interlinked topic channels that would lead users "down a rabbit hole." To avoid interpreting the brief too prescriptively, we set up an initial meeting with Barnraiser to become better acquainted with its mission and motivations.

Through that discussion, we learned about the value that Barnraiser places in all the stories behind our food—from the people who produce it to the origins of ingredients. These stories were the essence of Barnraiser and its Discover page.

The client agreed to let us explore the problem through our own perspectives and interpret the deliverables more loosely, rather than simply pushing pixels into the prescribed places. Still, to ensure that we never strayed too far from the client's goals, my team scheduled semi-weekly meetings to check in with the client about our progress.

Evaluating the Current Site

The existing Discovery area was an array of business profiles that lacked context and instructions. Below are some of the webpage's major pain points:

Feedback from usability testing reinforced my team's heuristic evaluation. Our design solution would have to fix these pain points before we approached the issue of a connected community.

User Research

We wanted to find out what current users would want from Barnraiser's new Discovery area, but no current users responded to our call for research participants. Given our timeline, we were not able to wait until enough participants responded. Although Barnraiser was the gathering place for "foodies, farmers, and futurists," the client did not want to limit the target users to any specific demographic or psychographic. The lack of current users we could work with were an obstacle.

I proposed that we take a step back to understand what Barnraiser wanted users to experience through the Discovery area—a "rabbit hole" of content discovery. The users would have passion and curiosity for the stories behind food, so I pivoted our research objective to understanding how people discover content they love.

We thus interviewed 12 people about hobbies they were passionate about, specifically the sites and apps they used to explore new, relevant content.

Our affinity mapping allowed us to distill our research findings to the following points:

  • The most commonly used sites/apps were visual heavy (Instagram & Pinterest) and/or less social (Google & Pinterest).
  • Most people last used Instagram to find interesting things.
  • Top motivations of using specific sites/apps are finding authentic & relevant information & being able to save this; being social and having tailored info is less of a motivation.
  • People are not comfortable interacting with strangers online and prefer to interact with close friends both online and offline.

Based on our research and the existing content on the Barnraiser website, we identified the target user as the Mindful Muncher, defined by the following characteristics:

  • cares about the sustainability and source of their food,
  • craves new and credible information that is relevant to their interests,
  • and supports independent businesses that have similar values.

With the target user profile in mind, we were able to define our problem statement and hypothesis.

PROBLEM

Because of the limited content & functionality in the Discover area, the Mindful Muncher cannot find the information they expect to stay informed (about food sources & choices) and thus engaged.

HYPOTHESIS

We believe that if we remove friction in discovering new information by providing more relevant content and functionality, we are likely to see Mindful Munchers engage with the Discovery area.

The Design Solution

Feature Prioritization

We showed the client our problem statement and proposed hypothesis in order to prioritize features for the minimum viable product.

Feature prioritization action photo

We decided to deprioritize social messaging/sharing capabilities, which would come later, so that we could focus on building a foundation with the following:

First row features must-haves, while second row features were nice-to-haves.

Comparative Analysis

Our research informed us that Mindful Munchers would be most familiar with sites like Google, Instagram, Tumblr, and Pinterest as primary tools for content discovery, the latter three being large social platforms that each houses innumerable smaller, niche communities. We looked to these sites to better understand how they allow users to discover and interact with content. The client also requested that we look at Behance and Dribbble for information hierarchy, specifically the sites’ presentations of categories and topics.

Ideation

Our preliminary sketches drew insight from comparative analysis, user interviews, and usability testing of the current site. We wanted to provide a variety of content types in a way that was clear yet conducive to discovery and exploration.

After design studio sketching, a mid-fidelity prototype, and 6 usability tests, we created our high-fidelity prototype that adhered to the provided style guidelines. The design would feature the following:

  • a clear page title at the top for clarity;
  • a box of topic channels for immediate access to diverse content;
  • a button for shuffling topic channels for additional discovery;
  • an engaging two-column format that features auto-playing videos in a zigzag order, in addition to a large full-width tile every third row;
  • an available but less prominent row of main categories from the current site's "Search and Filter" options to maintain visibility for producers;
  • and available but less prominent search & filter functions for users who want to begin discovery at their own specific starting points.

Below is a slideshow of how these key features (and the comparators that inspired them) were incorporated into our design solution. Our interactive prototype on Figma features the happy path for finding a sustainability-focused producer from California.

Results

During our presentation at the end of the three-week sprint, my team was able to successfully sell our design solution to the client. The next steps that we proposed included...

  • research and test how users want to filter content, e.g. the specificity of location;
  • research how to implement social features;
  • design detail pages for articles, videos, etc.;
  • A/B test the number of trending channels, the size of those buttons, and the terminology of channels (versus other words such as hashtags, topics, etc.);
  • and make the design responsive, to optimize the webpage’s appearance on tablet and desktop, in addition to mobile.

Reflections

Seeing our client's delight during our presentation was very moving, but the most rewarding part of this project was how well my team worked together. At the beginning of the project, we set a team charter and stuck to it. To avoid pressuring each other into "agreement," we strove for "alignment" instead, to ensure that if we ever were to have differing opinions, all voices would be expressed and equally weighted before the team made a decision.

Although we had 2 such discussions during the 3-week sprint, both were integral in keeping the team on track and on the same page, so that we did not diverge any further down the line. Thanks to this small but open-minded team of designers, this project has provided me one giant leap in my UX career.

— Feb 2020

PREVIOUS