Coffee Break: mobile app

Being a freelancer in this world is not easy!
Keeping up with networking events, finding the right people to work with...a struggle!


Coffee break is an app for networking, that I decided to design to help freelancers find their perfect team and build amazing projects.

MY ROLE: UX/UI designer

TOOLS: Figma, Illustrator

DATE: July 2020

The problem

For freelancers it's more difficult to build work relationships and create a network.
They also need a place to create this connections.



Reading posts on the social networks like “Anyone would like to meet somewhere and work together? I’m a graphic designer and you?” I realised that I wanted to work on a way to help freelancers to connect with each other.

Analysis of the market

I started my research with an analysis of the market. Was there actually something missing in the scenario?
For starters, I saw the post I mentioned in the introduction on Facebook.

Facebook:
- many people use it, therefore it's great to create connections, although it's not work-related
- it's possibile to create groups and pages, but in a very generic way
- it's also possibile to upload pictures of a portfolio, but most of people actually use facebook for pictures of their holiday

Behance:
- it works well for visual portfolios, but for other professions (like the IT developer), it just doesn't fit
- there's the possibility to leave comments and like others' work, but it's definitely not a social platform

Bumble Bizz:
- it's not meant to share portfolios
- it's possible to create single connections, but it's not meant to create work groups nor to search per category

Linkedin:
- it's not very used by freelancers, it's more used by people working fro companies
- it's not the best platform for showing an overview of your portfolio, it's more meant to share content about topics of interest
- it's possibile to chat, but not to find other people in your area and create a group or an event

MeetUp:
- it's meant to be used for events creation, but it's very generic
- it doesn't give the possibility to search for people, have an overview of their work and connect with them

...


What was missing was something that put together WORK and SOCIAL LIFE!

Survey

To have a clearer picture, I launched a survey among 25 people and made some interviews.
That allowed me to get to know Dirk: my user persona.

How might we...?

HMW help freelancers find networking opportunities quickly and easily?
HMW connect with others based on their interests and industry?
HMW connect them to shared or private spaces?

UX

To start working on the structure of the app, I focused on Dirk, my user persona, and try to understand his thoughts and feelings.

It was also important to think of a good way to exchange information and share data like the address in a proper way: it's good to build a network, as long as it is also safe!

Experience map

Now I was ready to build a scheme of the app structure!

App structure

Sketches

Once I had the structure clear in my mind, I started doing some rudimental sketches.

Wireframes

Testing

The most important and crucial actions the user can do through the app are finding other freelancers to work with and create a work group. So, here we go:

How would you find new freelancers to join your project in a specific field (i.e. Photography)?

How easy was it to find other freelancers to join your project?
(1= not easy, 7= very easy)

81% answered 7
12% answered 6
7% answered 5
Average time: 8 seconds

How would you create a work group?

How easy was it to change the location? (1= not easy, 7= very easy)

78% answered 7
13% answered 6
9% answered 5
Average time: 26 seconds

Branding and UI

The name of the app recalls the moment in which we take a break and spend some time chatting or just having a cup of coffee, because I wanted the app to be bounded with the idea that networking, even if stressful, is also fun.
Therefore, I decided to stick to the idea of a coffee break also for the branding.
Here my first sketches for the splash page.

Color palette, splash page and icon

Thinking of coffee, the color palette couldn't be but based on warm colours: dark brown - of course, a nice shade of yellow, to bright it up and ivory to create the perfect background.

The colour palette was perfect, I really liked it! It made me think of the Seventies, so I started working on a retro style logo.

Font

I chose the font Roboto, its readability makes it one of my favourite fonts. This time tho I wanted to gave it a retro twist: playing a bit with the Figma features, I made a bold version, with just the outline and the shadow.

Screens

Time to have fun with the screens!

Dark theme

35 screens were created