UX/UI — Giver.be App

An app to connect who needs help with who wants to help.

Hugo Manhani
UX Station

--

Giver.be is an app that connects volunteers to people who needs them. Users can offer help as a giver, or ask for help as a receiver, and be found by others.

Problem

When we look into social media platforms there’s no big meaning behind the feed scrolling, other than liking photos of other people life. Based on that our client found that people need a place to create real connections and help them pursue their passion through social media.

Goal

The Main goal is to connect people that want to practice their passion or gain experience by volunteering with the ones that cannot afford to pay for professional help, transforming the act of scrolling in something that makes real connections and help people achieve their goal and passion.

Design process

Research

The research stage consisted of two parts. The first was conducted with the purpose of having a deep understanding of the project and client needs. It consisted of a kick-off meeting, in which the client presented the project; and a co-creation workshop to refine specific aspects of it.

Giver.be Website

The second stage consisted of competitive/comparative analysis of 2 similar apps (Simbi and Fiverr) that the client pointed to us and we agreed their relevance, as well a survey and user interviews, to gather as much qualitative and quantitative data as possible.

Simbi
Fiverr
User Interview Findings
Survey

Research Findings

In the competitive/comparative analysis, we found that Simbi was not exactly what the target audience needs, the app is too overloaded with information without prioritization of information or tutorial to learn how to use it, which goes against the goal of a having the experience simplified and focused on key actions. At the same time Fiverr showed an organized and simple interface what makes the experience of connecting people way easier.

The User Interview and Survey results brought really interesting findings that helped us to come up with really interesting ideas for the prototype, the most important are:

The majority of people would practice their passion as an unpaid activity.

The 3 main triggers to people start volunteering was passion, gain experience or the love of helping others.

People are more likely to help after been helped.

Planning

To begin the planning stage, we worked on an affinity map to group all the gathered information, detect patterns, and find insights. Then we designed personas and mapped their journeys, which allowed us to use additional tools such as Scenarios, Use Cases, and User Flows.

Affinity map
User Personas
User Journey Map of Mark Business Owner (Receiver)
User Journey Map of Sarah the cook (Giver)

Scenarios:

  • Mark is a technology startup owner who is searching for a trustable and proactive junior designer to help him build his company website in a tight deadline and at zero cost. So he can start making business.
  • Sarah is a very good cook and she would love to use her skills to help kids, but she doesn’t know how to find the right place to do it.

Use Stories:

  • As a startup owner, I want to access the LinkedIn of the candidates through the app, so that I can select a committed and talented junior designer to help me in my business.
  • As a busy professional, I want to quickly post the project requirements, so that I don’t waste time searching and the right candidates can reach out to me.
  • As a busy professional, I want to get notified about the interested candidates as soon as they select me so that I don’t need to check the app many times.
  • As an employer, I want to access LinkedIn using the app to recommend people that helped me, so they can get exposure to more job opportunities.
  • As a volunteer, I want to search on a feed with a lot of options so that I can find the perfect place to help.
  • As a volunteer, I want to be able to highlight my skills by in hashtags so that I will be able to find a place the suits me.
  • As a volunteer, I want to filter the location of the places I will be volunteering so that it more convenient and saves my time.
  • As a volunteer, I want to get reviews after helping someone so I can build a trustable profile and other people can get my help.
  • As a volunteer, I want to share my experience so that other people also feel volunteering.
Mark User Flow
Sarah User Flow

Design, testing & demo

During the early design stages, we explored different navigation styles, gestures, tested key features and identified opportunities for improvement. First, we did a quick rebrand refresh to make the app look and feel represent the mood our findings brought up.

We used paper prototypes as a way to quickly test our ideas and iterate over them. Our mid and high-fidelity prototypes were developed having in mind key interactions, features, and paths we wanted to keep testing. The versatility of each screen was also directly related to specific actions we wanted users to try.

Sketches

To start, the user can create an account using Facebook, Gmail or LinkedIn, it makes the process of signing in easy and quick, as well as add trust to the app. After login in, the first use is approached with an on-boarding showing the main features to start using the app, such as filters, tab to filter giver, receiver and all, and create a post button. During these screens, we highlighted the words related to giving help in green and receiving help in purple, to the user start getting familiar with the color code in the app.

On-boarding screens

After the on-boarding, the user will set up their interests, location, and availability, based on that, the feed will show people looking for the same interest and near the user location. The main idea was to have a feed where people can easily see opportunities to help or get helped, so we used cards with different colors representing givers and receivers, and the user has the option of posting on the feed using an image or not to create a nice visual environment.

Availability, Interest & location screens.
Cards separated by colors and with or without an image.

We added a tab on top of the feed screen where the user can switch between giver and receiver, what basically filters the feed showing only what the user is looking for.

Filtered feed (tab: Giver | All | Receiver)

On the main feed, the user has quick access to their favorites, filters and posting button, we decided to keep favorites and filters side by side after testing and realizing that people were lost looking for the favorites screen. Once help is requested, the person offering help (giver) can see the post in details and send a pre-set or personalized message to show interest in helping the person asking for help (receiver), who will get notified and be able to accept the giver that suits best their needs.

When the receiver selects a giver, he will get a message on the inbox chat to start chatting with the person asking for help (receiver). After volunteering, both can finish the action and will be able to suggest new activities to keep the chain of help which is the main purpose of the app.

Later the giver can ask for reviews and choose to publish it on other social media.

Filters, favorites and create a post.
Post view, chat, and chain of help.
Profile (edit and view) — Post detail with the button to end action.

Translating the user needs into features.

  1. People that are willing to help others want the flexibility to do at their own terms, so we have the set up of availability and location at the very beginning so the feed will tailor the user needs.
  2. On the survey we had an open-ended question to know what people would do as an unpaid activity, came up that the answers were really different from each other. So we decided to use hashtags to define interests other than having to select in a list.
  3. People don't have time to learn a complicated app, and especially in the case of Giver.be that the purpose is creating a circle of users to help and get help, it needed easy navigation and to have the act of scrolling. That's why we used a feed and tabs to easily filter from giver to receiver.
  4. When we talked about connecting with someone that will be meeting in real life to help others, trust was a huge thing. So we used profile verification where people can add their social media to add a personal fact when choosing the right candidate to help.
  5. The people interested in gaining experience to build a new career want to show to the world that they're involved in volunteer work. Having feedback and being able to post recommendations on LinkedIn is a really useful tool for this type of user.

See the clickable prototype video below:

Thank you for reading :)

--

--