The Project: Design of Buengo’s mobile App

Buengo aims to disrupt the way non-profits and individuals raise money for the causes they care about.  I joined the project in its very early stages to help produce an app where users could buy & sell used items and donate the proceeds to good causes.

Date: September 2017 – March 2018
Company: Buengo
Team:
Oufela Hughes – Co-founder & CEO
Alex Hancock – Co-founder & CTO
Hana Gausfain – UX/UI Designer
Katie Eldred – Marketing Manager

The Challenge

When I joined the project, the two founders had already produced the first unfinished version of the app, with plenty of room to improve in terms of user experience and aesthetics.

I took the responsibility then to start from scratch, rethink and redesign the whole information architecture, interactions, and UI elements, with a user-centered approach.

The goal: transform the app into a useful and usable tool for buyers, sellers, and causes.

Step 1: Defining the information architecture

I started by focusing on understanding the different user flows. What were their goals, jobs, and actions to be taken within the app, and how we should organize them? The challenge was to combine two completely different features into one single product:

1. Buying and selling second-hand products locally
2. Launching fundraising campaigns and donating to causes

Buengo aimed to allow users to create a personal profile to sell their products, buy products and launch fundraising campaigns, either personally or on behalf of an organization.

It also aimed to allow NGOs, schools, or any kind of association to set up an organization profile and let users create campaigns on their behalf. (For the MVP however, we decided to register organizations and enter them manually).

Since Buengo is a very ambitious project in terms of the number of different actions that can be performed through the app, we will focus only on the three main jobs to be done: buy, sell, and launch a campaign and how it affected the new IA.

• Buengo users definition:
  
  To define the best navigation I needed to understand the different Buengo users. Based on previous research, we identified three main users according to their goals:- sellers (sell their products)
  – buyers (buy second-hand products)
  – fundraisers (raise funds for a cause)

  Within buyers and sellers, we could differentiate between those who were invested in a particular cause and wanted to raise funds or donate to it (engaged users), and those who simply wanted to declutter or look for a good deal (unengaged users).

  Among fundraisers we could also subdivide between particulars, who ran their own fundraising campaign (personal campaign), and organizations who would run their own campaigns and also let other users run campaigns on their behalf (organization campaign).

  From that user analysis, I was able to work on the different user flows, navigation, and screens that were needed to craft the best possible experience for each kind of user.

• Local second-hand marketplace flow:As we just saw, we defined two types of marketplace users: those who were invested in a particular cause (engaged), and those who were more interested in selling or buying the products (unengaged).

  The user flows need to portray that difference. Engaged sellers would look for a particular campaign first, and then upload their product. While the unengaged would focus on uploading the product first and then selecting a campaign to donate the proceeds.

  
  Regarding buyers, the unengaged ones would be looking for a particular product and then maybe check where the money would go to. Engaged buyers, would first look for a campaign they wanted to support, and then look for a product that they would be interested in.

  

• Fundraising platform flow:
  As we mentioned before, for the MVP organisations would register through another channel and then the team would introduce their profile into the app. That’s why we will focus on the campaign champions flow. Users that want to raise funds for a cause, either personally or on behalf of an organization.
  In this case, to simplify the process for the MVP, I defined a single starting point for organization campaigns (Add campaign) and discarded the option to search for organizations first and then add a campaign.
• Previous version of the app:Before I got involved in the project, the app consisted of a main feed that would mix different kinds of postings: new products, new campaigns, new users, organizations, etc., with no hierarchy. Users would be able to filter by type of posting by accessing the hamburger menu on the bottom navbar and selecting an option:

  
  Filters also worked by swiping right and left from the main feed, but there was no visual cue that indicated users they could swipe, or what information they would see once they did. This type of navigation placed every single piece of posting at the same level, overwhelming users with information that was not relevant to their interests or helping them achieve their goals.

Step 2: Producing wireframes and prototyping

From the user flows, previous research, and an extensive competition benchmark, I produced wireframes of the different screens to have a basic outline.

As I will explain in the next step, I then put together a prototype with the wireframes and ran a user test to get insights and iterate designs.

To better explain the screens and flows I will use final design mockups.

• Main feed:

I designed a two-tab home screen to change between the products feed (Items in the app) and the campaigns feed. Each one with its own filter and search button to easily find a specific product or campaign, and an “add” floating button to quickly create a new posting.

I also placed all the main screens in a bottom navbar, instead of the hamburger menu, to have faster access to the different sections. The idea was to let users reach their goals, and see relevant information as easily and quickly as possible.

I introduced a two-column layout for products and decided to show the related campaign category in each of the product cells. This way uninvolved buyers would have an idea of where the money would go without going too much into detail.

• Product purchase flow:

The product detail screen contains all the basic information of the product and the seller, as well as the related campaign so that the buyer can see where her or his money will go to.

Buengo charges a small fee for every sale made through the app. Since we wanted to promote transparency, I designed a screen with the payment breakdown carefully explaining every line to help avoid frustration from the buyer.

• Campaign launch flow:

On the add a new campaign form (and the one for a new product too), I worked on the copy to make it more conversational instead of the usual “Name” and “Description” placeholders.

To show that campaigns could be either personal or for the benefit of an organization, I placed a switch to give access to the organization list.

Step 3: Research & Iterations

Before producing the final mockups, I ran a test with two different kinds of users: second-hand marketplace consumers and charity employees.

I prepared two different prototypes to be able to test as many screens and functionalities as possible: the purchase of a product from a specific campaign and the launch of a new organization campaign.

From the test, we got valuable feedback that confirmed that users found the app intuitive and easy to use. Buyers would look for the product both by filtering results on the product feed and by searching first on the campaign feed, which confirmed the buyers’ flowchart I had defined.

Charity employees provided very important feedback regarding the creation of a campaign on behalf of an organization: campaigns had to be approved first. That’s why we worked on a functionality to allow organization managers to receive campaign requests before being published on the app.

I then modified the campaign launch flow accordingly, changing the “Launch campaign” button to “Continue” when an organization was selected, and showing an information message to let the user know the posting was on hold.

Next steps

Once all screens were designed, I worked on the final mockups for the onboarding flow and the visual and copywriting content for the app stores.

Before the launch, I worked as well managing the QA testing phase, producing the different test scripts, and analysing feedback in order to iterate designs for version 2 of the app.

Thank you for reaching this far, any comments or questions?