Designing the poster and the flyr

I have made a lot of roughs this month. My first idea was to make a manual to explain how to use BEIO. I was thinking of a a twelve pages document. I already had in mind  the way it would look like. But I knew it wasn’t my top priority and each week I was lowering the final version.

rough-1

rough-2

rough-3

This week I had no choice anymore ! I wanted to spend the weekend designing the document. Otherwise, it could be too late to print it. I decided to think precisely about the nature of my document:

  • what is its purpose ?
  • which part(s) of my work does it reflect ?
  • is it something that need to be remembered ?
  • and to whom will I show it ?

I wanted to create a document which graphically expresses my vision of the global concept. A strong, dynamic design, using my graphic elements. But it’s also a communication document that visitors of my booth will bring back. How could I combine the idea of a flyr with text, and a nice object people would like to keep ?

I split this concept in two: I wanted the recto to be the poster, and the verso the flyr. I had quite an idea of how to design the poster that’s why I immediataly decided to think about the flyr. The main idea was to reuse the concept of electronic circuits connecting diffrent parts of a device. So my main text blocks will be linked with my graphic elements. The “bacterias” [as I call them] are spreading on all the surface ! You even need a magnifying glass to see them because sometimes they are very small. The top part of the flyr explains the context, the rest explains my role as a designer, and the punchline of BEIO. The process here is simple: a fast sketch of the main idea, then a higher fidelity one, and then from iterations to iterations…

gif-flyr-2

For the poster I wanted to express the notion of ‘propagation’. I made a fast sketch to explain my analysis of propagation ; it comes from a center, then vectors lead the way [notion of direction]. Time is also a part of the propagation because the relation between distance, direction and speed creates the notion of duration [and velocity]. Finally, it needs a surface/volume ! It grows on something, like lychen on wood and the concept of symbiosis where two elements are linked and interdependant. Here, the smartphone is the surface. Bacterias are growing, eating, but they are also drawing the phone. And without the shape of the phone, bacterias are juste floating in the air… The dynamic is created by flux of bacteria crossing each other. Notice that the angle choosen is the same as the logo.

gif-serigraphy-fwells

The serigraph printing of the poster will be achieved by studio Fwells in the 13th district of Paris. I asked them to use 3 layers of colours: fluo green, fluo blue, and deep black on a 500g paper. I think the idea of using serigraphy perfectly matches with my concept. As I said, layers are like statums. Using inks with high density on a thick paper make them almost touchables.. The bacterias, the internet, the different phases of creation, use, and recycling.. I think that everything now becomes touchable, and the fluo ink won’t let you look another way. Also, as living things, each printing will be unique, with its own graphic accidents created by the ink and the blending of colors on the edges of the shapes.

App UX prototyping

In order to prototype a first version of the application after the service blueprinting, I decided to divide my process into X parts:

  1. The first part will consist in sketching the main screens
  2. Then I’ll create a fast prototype on proto.io with the material UI
  3. 5 friends will test it
  4. The fourth and last part will focus on making more detailed sketch and precise areas of interactions

It looks like it’s a strict process but it isn’t. In fact I decided to adapt and keep and agile method. Mixing hi-fi and lo-fi prototypes help me to highlight the main parts I need to work on. Using Material design UI helps me to avoid creating friction with testers saying “it doesn’t look like it’s finished” but it doesn’t corner the app in this type of UI. Then I choosed to test the main workflow with friends because they were aware of the concept and the context so it was easier to explain them the tasks they needed to achieve. Also, it made me rework the initial app workflow since some screens transitions didn’t work very well.

[su_custom_gallery source=”media: 657,656,658,655″ link=”image” width=”300″ height=”170″ title=”never”]

Creating those sketches prepared my work for the UI part. I was already aware of the screens that needed more contrast in order to draw attention on specifics actions.

Prototype 0.9

Last week, I went to Mon Atelier en Ville to create my prototype thanks to laser cut. I created an illustrator file with my design in it. Then, helped by Baudouin, the owner, I set up the machine to cut with different settings to try different results. Three prototypes were made:

  • on a “medium” wooden plank of 0.5cm
  • on a “medium” of 0.2cm
  • on a black plastic of 0.3cm

What a relief to see a concrete representation of something I have drawn a lot. Even if the Maker Faire required me to create this prototype, I needed it anyway. I needed to stop drawing it, picturing it in my head and just make it real to have it in my hands, to place it on my phone.

[su_custom_gallery source=”media: 577,576,575,574,573,572,570,569″ link=”image” width=”300″ height=”170″ title=”never”]

Service blueprinting

While working on the aspect of the object I also do need to work on the application. I divided intro different parts and followed this process:

  1. Listing all the objectives user can or must achieve on sticky notes
  2. Creating groups of objectives by gathering the notes
  3. With these groups, creating screens or linked screens
  4. Organizing notes to create a user journey
  5. Directly adding notes and rough to add features on the screens
  6. Using Lucidchart to create the user journey [from the purchase to the use of the app] and the technical journey

I consider this as the first prototype of the app. Now I should add more details about the different steps and create a rapid interactive prototype to test the link between screens and if users find it clear.

I'm using sticky notes to make the user journey and list goals.

I’m using sticky notes to make the user journey and list goals.

I use Lucidchart to make it interactive and to share it.

I use Lucidchart to make it interactive and to share it.