Figaro

An App that brings together users and experts in various ?????

Red wave of

Role

Overview

Goal

Entire product design from research to conception, visualization and testing
Looking for quick, professional advice? Figaro brings together users and experts from any field without high costs and unnecessary bureaucracy
Make it easier for users to find professional answers without wasting time browsing various websites, dealing with bureaucratic delays, or paying large amounts of money

Design Process

Problem statement, Competitive analysis, User research
User personas, User journey, User flows
Information architecture, Card sorting, Similarity matrix, Sitemap
Wireframes, Prototype
Usability tests, Preference tests
Design systems, Iterations
Empathize

Problem Statement

Users need a way to get a quick and easy bit of advice from an expert about their daily challenges, without going through the bureaucracy needed. The ability to get the right professional support shaped to their needs whenever and wherever is necessary.

Possible Solutions

  • The App's UI and UX will mostly focus on the main features, such as finding the right kind of expert to talk about the concerns in very few clicks.
  • Users can also make appointments of different length (10 minutes to 3 hours), to discuss simple issues or just have somebody offer a professional hearing to them.
  • Users will have the opportunity to get in touch with experts all around the world.
  • By asking 3 to 4 filter questions at the beginning of every session, we will be able to offer a list of experts who can provide the service shaped for the user.
  • The app will comply with relevant data privacy and security regulations, such as the General Data Protection Regulation (GDPR).

Competitive Analisys

To better understand the market, identify the underserved opportunities and spot the weaknesses in the competitors’ user experience, I did a competitive analysis of the three leaders in the industry: Unobravo, an Italian platform (App and Web) bringing together therapists and patients.
Fiverr and UpWork, international platforms (App and Web) connecting freelancers to people or businesses looking to hire, encouraging a wide range of services in the tech industry.

SWOT Analysis of Unobravo, Fiverr and Upwork app
SWOT Analysis

User Research

One of the most important steps was understanding the user, I began with user surveys and conducted online and in-person user interviews.

Here the insights of the interviews:

Affinity Mapping

Insights

  • The interviewers have sometimes used apps that offers professional support/consulting on different life aspects, such as private or professional.
  • They would love to have an app they can rely on in their search for experts.
  • Advice form experts’ point of view is needed on a daily basis.
  • Users are ready to pay also for small tasks (E.g. translating or filling  documents).
  • Frustrations when searching for solutions without results.
  • The current apps on the market offer only specific help (E.g. psychotherapy help)
  • Users want a community where they can chat with other people.
  • A pay-per-task pricing model is what the user looks for.
  • Very detailed filters to guarantee a good match shaped for users needs.
Define

User Personas

Based on the user research, I created the following user personas as a representation of a typical Figaro-User.

User Journey

Defining the user journeys was a key step on the defining process. It gave me a better understaning on how to showcase the IA (Information Architecture) as well as the overall user experience in the app.

User Flows

To better empathise with my users, I created 3 journey maps as a tool to better understand the app and its functions.

Ideate

Card Sorting

After collecting all the data about the IA, I conducted a Card Sorting.
Wrote all the features in cards and asked my potential users to sort them into categories.

Main Features

Similarity Matrix

Similarity Matrix

Sitemap

With the data given from the previous tasks, this is how the Sitemap looked after some small adjustments.

Sitemap
Prototype

Wireframes

The Low Fidelity Wireframes were just sketches with a pen on paper.

Low Fidelity Wireframes

For the Mid Fidelity Wireframes I used Figma.

Test

Before proceeding with the High Fidelity Wireframes I conducted Usability Tests and Preference Tests with potential useres.

Usability Tests

On Figma, I've created a Prototype with the Mid Fidelity Wireframes and performed in person and remote Usability Tests with my potential users.
Here are the 3 main problems and solutions:

1. Many users have skipped the onboarding.

The main reason is the Jacob’s Law. Users use lots of apps on a daily basis. They assume to know how the app will work and therefore skip the On-Boarding on how the app should be used.
For a better experiance, Data-Collecting Onboarding was suggested and implemented.

On Boarding Process - BEFORE
On Boarding Process - NOW

 

NOW
BEFORE

2. The UI needs to be improved

Users found difficulties on differentiating buttons with other UI elements. In the High-Fidelity Wireframes I fixed the problem by following the A Design System rules (Material Design).

Here is the Book-an-appointment frame as referance: 

Notebook Feature

3. Add a shortcut for experts

Having a way to reach the experts as easy as possible would facilitate the use experience in Figaro. That’s why I added the Notebook feature where  users get easy access to the chats/favorite experts.

Prefence Tests

As the first frames introduces the app’s language and character, I opted for an A/B Testing Method for the Signin/Signup Frame:
1 being an animation, to make the app more appealing for the experience and
2 a picture reference to the opera “The Marriage of Figaro” (cit. "Figaro su, figaro giu, figaro lá, figaro qua"), also inspiration for the app’s name.

A/B Testing

Implement

High-Fidelity-Wireframes

With the data collected this is how the high fidelity wireframes looked like

SPLASHSCREEN  and LOGIN SIGNUP 
ONBOARDING

BOOK AN APPOINTMENT

JOIN AN APPOINTMENT