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.

Think out of the box…

…to think about the box. Twice during the weekend, someone said that if I wasn’t there to explain what it was, the first thing the animation and the design of the phone case made them think of was something funny, playful. At the moment that I told them that it was related to the technology, the use of the Internet and the natural environment, they agreed the design was coherent and they liked it. But they were right: the packaging is very important because it is one of the first thing that the user will see so it needs to express the core of the project.

A weekend of feedback

I spent my weekend at the Maker Faire in Paris to present both the TeleMandala and my prototype. It was a great opportunity to meet people and to get feedback. My first impressions concerning the prototype were that 0.5cm is way too thick. 0.3 is okay, 0.2 is perfect. The next thing to test was the material: is it more interesting to have a wood render or a plastic render ? 50% of the people preferred the wood, 50% preferred the plastic. In my opinion, I prefer the wooden render but I think it could be an interesting idea to create both. Or maybe people preferred the plastic because of the black color and the contrast it made ? Meaning it could be made of wood but then tainted in black ? I think that this is a better idea than using plastic. Because it could be a great argument to sell the product but also a way to be more respectful towards the natural environment.

I met Cécile Quach, of the City of Paris. She told me that it would be interesting to take part in the “Hackging the de l’Hôtel de Ville” at the end of May. I also met members from the Innovation HUB of Epitech school. I told them about my project because there is a part I won’t be able to prototype fast enough because I won’t be able to mix a coded part with a prototyped part [with softwares like Pixate]. I just sent them a mail with the details of my project, I hope to talk to them soon.

The images below describe the fast prototype I made to test the interest of people ans their preference for a black phone case with colored animations or a wooden phone case with pure white animations.

Prototype Day 1 - Photo by Vassili Glezos

Prototype Day 1 – Photo by Vassili Glezos

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”]