Blanc Connect

David Alandí
8 min readAug 7, 2017

--

Blanc is the Catalonia’s Graphic Design Fest, probably the funniest and more inspiring of its kind and I’ve made an app for it in two weeks.

Blanc Festival 2016 — video by koalitic visuals

The starting point of this project was to understand the needs of the attendants before, during and after the events and build a digital product to help them.

I had two weeks (from July 21 to August 4) to make a proposal so I followed some of the Google Design Sprint methodology mixed with more traditional Design Thinking technics.

EMPATHIZE

As a digital communications manager of the festival I already detected some communication needs during the festival from previous years that couldn’t be solved with traditional leaflets or stage announcements.

After reading some satisfaction surveys from 2010 to 2016 I listed some pains but I wanted to had more valid data so I designed a survey and an interview.

Also I checked the statistics for the past years and I could form a first approach of Persona with the average attendant. Woman of 30, freelance, graphic designer, Catalan and man of 40, self-employed in a studio, graphic designer, Spanish.

Lean Survey Canvas

Lack of space and time for networking was one of the biggest issues detected in the satisfaction surveys so I wanted to focus on networking and festival communication.

Quantitative data

The survey was sent to more than 3500 people but I only got 126 answers ¯\_(ツ)_/¯

The survey had two parts:

  • The first one asked about the festival communication along the year. What they like/dislike and if it is useful or clear enough. Communication from Festival to Attendant.
  • The second one asked about the communication during the festival. What they need, if the leaflets and stage announcements are enough and if they are willing to interact more with speakers, activities or others attendants. Communication from Festival to Attendant, from Attendant to Attendant and from Attendant to Festival.
  • I also spread some questions anticipating possible future problems like the misuse of the product (flirting), their use of smartphones during the talks or the convenience of using different social network tools than the ones they are used to.
I asked in a three different ways about the use of dating apps and the response was very clear. Of course people lie but not everybody! so the data vas valid enough to not be worried about this.

Qualitative data

  • In the interview I wanted to know more about their personal experiences in other festivals compared to Blanc, their goals in attending Blanc or sharing festival stuff on social networks and what are exactly the problems when doing networking during the festival.

Benchmarking

  • In parallel I did some benchmarking research among other apps and digital solutions for music, film and design festivals.

DEFINE

Affinity Diagram

I needed to synthesize all the data in order to turn it into actionable information.

I used Trello to disect that data in order to find insights and patterns.

  • I wrote every interesting input in a card in two columns (qualitative and quantitative)
  • Then I arranged them into four recurrent categories: Networking, Festival info, Surroundings info and Social Networks.
  • Using stickers I visually separated the pains from the opportunities, recommendations and ideas.
Affinity diagram on Trello

Lightning demos

I also used Trello to complete the benchmarking analysis, jotting down the recurrent features and detecting the ones useful for my product. It was like a Lightning demo plus deciding process.

Lightning demos

List of pain points detected

  • Lack of networking possibilities. The first seven years Blanc was located a village and now it is in the big city. People was isolated in the village so there was a sense of community and now people just go to the talks and leave.
  • It’s hard to meet people because there is no space and time due to the tight schedule. Also catalan people is closed.
  • People is shy to meet new people.
  • Schedule not clear.
  • Poor info about the talks
  • Poor info about surrounding services
  • Mistrust about geolocation
  • It’s hard to know people skills and profiles in advance.

Design opportunities

  • List of attendants, staff and speakers with profiles.
  • Space for collaboration (exchange, sharing rooms, rides, meals, profesional dates…)
  • Digital Q&A with speakers
  • Blog
  • Centralise info
  • Live notifications
  • Indoor geolocation
  • Show/Hide profiles
  • Neighbourhood/City guide
  • Unify conversation in social networks.

HMW & Brainstorming

  • HMW connect assistants in a professional way
  • HMW connect assistants to help each other
  • HMW make easy the reach of practical info of speakers
  • HMW make easy and confortable the process to ask questions to the speakers without wasting time in the fest schedule.
  • HMW get people to talk about the fest in social networks
Brainstorming created with bubbl.us

Mindmap

Mindmap created with bubbl.us

User Personas

Defining the persona was easy because I had the statistics from previous years and I knew the profile of the Blanc attendant.

User personas created with Xtensio

Empathy map

Empathy Map for persona build with RealtimeBoard

PROBLEM STATEMENT

People willing to connect with other attendants or speakers need a space to do it since normally there is no time and space or nerve to do it.

IDEATE

To start the ideation phase I wrote some of the user stories:

user stories

User Journey

main user journey

User Flow

user journey iteration 1 made with Draw.io

ITERATION!

After creating the first User flow I detected some flaws and I worked in solving the next problem:

How to connect the digital networking

with the real world networking

I did some Crazy 8s session to find the answer:

Crazy 8 sheet
Ideas from Crazy 8
User Journey iteration 2
User flow iteration 2 made with Draw.io

And before prototyping I designed the user journey for the On Boarding.

On boarding user Journey

PROTOTYPE & TESTING

Low fidelity

Drawing in paper templates and using Marvel as engine I did the first testings where I detected more flaws and ways to improve the experience.

LINK

Low fidelity prototype drawn in paper templates and uploaded to Marvel

Medium fidelity

I started using Sketch already, it was the right tool to use for the medium fidelity prototype.

Sketch file

While designing the medium fidelity prototype I was thinking in the final layout so I used the “Blanqueta” typeface, the official typeface of the festival. I wasn’t sure about this because it’s too bold and playful for little screens but it was kind of a commitment to use it in the project. Combined with a more serious and sans serif typeface for long texts and annotations could work.

Blanqueta typeface by Casasín

I conducted the test with Invision.

LINK

After some testings I could improve the product so I revisited the user flow once again.

user flow iteration 3 made with Draw.io

High fidelity

Before the final design of the high fidelity prototype I made a mood board with the festival characteristics and different graphic lines for the past years.

Blanc Festival has the perfect combination of crazy and serious. Photos by Martí Pujol & Marina Roca
Blanc graphic lines in 2009, 2010, 2011, 2012, 2014, 2015, 2016, 2017

I had a problem!

Blanc doesn’t have a regular graphic line, so I decided to use the sole recurrent element they have, Blanqueta typeface. Although some of the graphic lines didn’t used it.

I wanted to do a custom UI based on the forms of Blanqueta and since Material design is bold and playful already it was the base of my custom UI. I increased the radio in the round corners and thickened the strokes in the icons.

I talked with Raúl Ramos, co-director of Blanc Fest and with the Blanqueta typeface designer Joan Carles Casasín for recommendations in combining Blanqueta with others. The final choice was Museo Sans.

To solving the colour scheme I wanted to try something adaptive.

Chamaleon UI

So the basic idea is to have a UI in black shades with a bright colour for highlighting and when the new graphic line arrives its palette is applied like a chameleon.

Colour scheme for graphic lines in 2012, 2013, 2017 and 2015
Sketch file with all the screens

Details are the key so I thought about some empty and partial states:

Main screen ,empty state, deactivated state and loading state.

Applying the colour schemes from 2015 and 2017 graphic lines only to details and some navigation and functional elements would look like this:

Colour schemes from 2015 and 2017 applied

For the final prototype I used Flinto to show the flow, create the micro and macro interactions and the screen transitions.

Blanc Connect prototype build in Flinto

Blanc Connect is an app for increasing the opportunities in networking among the attendants of Blanc Festival and it has the following features:

  • Welcome On Boarding
  • Non-mandatory Sign Up and profesional Profile creation
  • Welcome Tutorial
  • Main feed following the #blancfest conversation on Twitter, Facebook and Instagram.
  • Filter the conversation through your social network interest.
  • Live indicator of your availability for networking.
  • Turn on/off your availability for networking.
  • Quick access to profesional profiles from the conversation.
  • Information about the schedule and surrounding services.
  • List of professional profiles.
  • Filters by attendant, line up, staff, favourites or custom by keyword, location or profesional activity.
  • Indicators for sharing home, car rides or moments during the festival.
  • Edit profile.
  • Indoor geolocation with beacons.
Thank you if you read it everything!! TLTR!!

Also I wanna thank to Raúl, David, Vicent, Rubén, Marina, Martí, Diego, Ximena, Mireia, Marià, Carmen, Luís, Dennis, Andrea, Eulàlia, Aida, Laia, Irene, Natassia, Elise, Kelly, Maribel, Hellen, Isaac, Alexis, Montse, Samuel, Eva, Joan Carles, Mariano, and Sandro for all the help they provided.

--

--