Talkerist Talkerist

Design of Buengo’s mobile App

Previos Post

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 on 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 a 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 organise 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 personal or on behalf of an organisation.

It also aimed to allow NGOs, schools or any kind of association to set up an organisation profile and let users create campaigns on their behalf. (For the MVP however, we decided to register organisations 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 organisations who would run their own campaigns and also let other users run campaigns on their behalf (organisation 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).

    User flows needed 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 to.
    Sellers Buengo user flow UX
    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 personal or on behalf of an organisation.Champions Buengo user flow UX
    In this case, to simplify the process for the MVP, I defined a single starting point for organisation campaigns (Add campaign) and discarded the option to search for organisations first and then adding 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, organisations, 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:Buengo_first_ version
    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:

Buengo UX main feed

I designed a two-tab homescreen 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 easy and quick 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:

Buy item flow UX Buengo

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:

Create campaign flow UX buengo

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 organisation, I placed a switch to give access to the organisation 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 organisation 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 organisation: campaigns had to be approved first. That’s why we worked on a functionality to allow organisation managers to receive campaign requests before being published on the app.

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

Campaign approval buengo ux

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 a version 2 of the app.

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

Previos Post Share Post :

More Posts