BarterSugar is a service that aims to provide freelancers, startups, and small businesses a global marketplace where they can connect to trade goods, services, and spaces without having to spend money. 


 

Overview

 

My team partnered with Barter Sugar to design and develop a clean design solution for their website by creating a sense of trustworthiness and community through easily digestible content. We focused on the information architecture and enhancing the user flow by restructuring the user interface. Now, users are presented with a visually pleasing and easy-to-use marketplace where they can get what they need and trade with what they have. 

Our Contributions

User research

Strategy

Information Architecture

Branding

UX Design

UI Design

 
 
 

Role


 
  • User Researcher
  • Content Strategist
  • Lead Visual Designer
  • Interaction Designer

Working in a team of two, I played a large role in leading the user research, content strategy, feature ideation,  and creating the prototype.

 

 
 
 

01. Research


 

Understanding the brand:

We began the research by interviewing Barter Sugar's CEO to better understand what the business goals are to make sure our solution will be aligned with it as well as the users' goals. 

We asked the following questions:

 

  • What is BarterSugar trying to bring to the table for its users?
  • Why should users use BarterSugar?
  • What sets them apart from their competitors?

 

Business Problem: Barter Sugar gains an increasing amount of account registration but there is a low conversion rate between bartered goods and account holders.

Goals of Barter Sugar are to provide:

  • a sense of community & trustworthiness
  • friendly & transparent environment
  • a different platform

 

 
 

 
 

02. Defining the problem

 

User and Usability Interviews

Our interviews were primarily focused on two specific personas: Startups and Freelancers. Conducting interviews with these personas gave us better insight on:

  • What resources they need
  • What challenges they face
  • What interactions they have with other businesses
  • How they exchange business
 

From our usability testing with startup employees and freelancers, users felt the website lacked a sense of navigation. The majority had difficulties navigating and felt overwhelmed by unfamiliar terms such as 'sugar' and 'TC'. In addition, the content had no hierarchy, which makes it hard for users to locate where to focus.

 

What users said from the usability test:

"The pages are not consistent and I'm confused"

"I think everything competes with each other making it hard to focus on one thing."

"The seller's profile doesn't look trustworthy."

"What does TC mean?"

 

Furthermore, we identified three areas where users had most trouble with:

  • Gaining trust with the website :  How can we display information in a enjoyable way?
  • Product discovery :  How can asily guide users in finding the goods they need?
  • Bartering process (the exchange of goods) :  How can we positively engage the user to arrive to a barter checkout?
 

Understanding the problem through user journey mapping.

We summarized our findings into a journey map to highlight the different emotions a user goes through as they navigate the website.

 
 
 

 
 

03. Exploring the solution

 

Defining the problem helped us identify what our target solution areas are:

  • Information Architecture : Restructure the global navigation to create content hierarchy
  • User Flow: Improve the user journey by creating clear call-to-actions
  • User Interface: Refresh the brand design for pleasant navigation

Information Architecture

Proposing to restructure the skeleton of the website is an important step in our solutions strategy. This will define the navigation of the website as well as shape the user flows for each of the brand's persona.

User Flow and User Interface Design

Personas were used as a point of reference when we brainstormed features based the pains, behaviors, and goals of the user.

We headed to the drawing board with some ideas on how to target the problem. We had numerous sessions of design studio where we brainstormed on the whiteboard:

  • Information hierarchy with the information presented to the user
  • Easy registration process where not only startup companies and small businesses can sign up but also freelancers as well
  • Product listing page- we eliminated the redundancy of particular text content and improved it with valuable product descriptions
  • Barter process page- we reorganized the content to make it less overwhelming to the user as well as added clear instructions for the transaction
 
 
 

We tested our low-fidelity prototype with users to figure out what resonated most.

Sketches were refined to low-fidelity wireframes to be tested. We wanted to test how efficiently a user can navigate through the new content as well as observing whether or not our proposed solution would help them gain trust with the brand. 

 
 

 
 

04. Restyling the brand guidelines

 

As the lead visual designer, I wanted to ensure that our high-fidelity design solution embodies the welcoming, community feel that BarterSugar had established. Before I stepped into adding color and photos, I created a style guide to establish consistency with all the elements on the BarterSugar website.

The typeface was chosen for users to read effortlessly. The color scheme is based off the existing colors, it gives a sense of playfulness and friendliness. Everything presented in the style guide was chosen with the utmost care that translates BarterSugar into an inviting website that makes people want to explore more. 

 
 

 
 

05. Design iterating

 

Throughout our 3 design iterations, the area where most users showed confusion was the barter page. They did not feel well-instructed with the bartering process and the content layout was still overwhelming to them. In addition, there was fight between flat and skeuomorphic design when we added texture to the table. In the end, we opted for flat design to stay consistent and to maximize focus on the right areas of the bartering process.

 
 

Final Design

 

In helping Barter Sugar', our ultimate goal was to make a product that could serve the need for higher engagement and comprehension with the Barter Sugar website. We wanted to create opportunities and deliver a product that serves both user and business needs. 

View our annotated mockups

 
 

Browse more projects

 
 
 

GDPR Benchmark

Designed an assessment tool used to assess the readiness towards being GDPR compliant

SAP Ariba Brand Tool

Designed a new brand central for users to access the SAP Ariba brand assets and images.