Making of

There are 22 posts filed in Making of ( this is page 3 of 5).

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.

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.

The Importance of Shadowing

Michael Flomen - Littoral Zone 11

At the end of March I made a survey where I asked several questions about environment, social networks and phone cases. One of my last question was:

Do you consider your phone case as:
a way to express your style?
a way to protect your smartphone?

I was surprised by the answer. 99% of the 80 people who took the survey answered that it was mostly a tool to protect their smartphone. Before, I really thought that it was a way to protect the smartphone but also a way to express our personality (colors, shapes, excentric cases). This made me think of considering the phone case I wanted to create as useful object to protect both the smartphone and the environment.

Recently I decided to pay more attention to the way people use their smartphones in the daily life: at home, in the street, while driving, in the subway, at work. My main motivation was that since I wanted to use the back of the smarthpone I needed to see if it was oftenly covered or hidden.

How are their hands placed arround the phone when they text of when they call someone.
How is their smartphone placed on the table ? Face down or up ?
What part is mostly hidden ?

I will try to briefly explain my reasearches.

First, a lot of people are playing with their smartphone when they have it in their hands. I mean, they are are not playing videogames on it, they are just playing with the real object. Sometimes it falls, sometimes it breaks. When they got a call, 50% to 65% of the back of the smartphone it covered by the hand. When they place their smartphone on the table, it’s usualy for two reasons. The first one is that they don’t want to damage the screen, which seems to be more important than the back. The second one [thanks Jonathan] is that they usually want to check on their notifications while chatting or working. These are constant reminders of their connected life. So they want to be able to tap on the screen, check briefly the title of the notification and go back to their activity if it’s not important.

I think that it would have been kind of a mistake to use the back of the smartphone. I was thinking that it was the most visible part, but I was wrong. Paying attention to people and the object they use everyday helped me to make really important choices for my project. I also found great opportunities ! It gave me the idea to focus on the screen and the phonecase covering the screen. Because this is the most fragile part of the phone for the users. If everything takes place here, then I don’t need to have a connected objects on the back using energy and think hardware. It could be very discrete and less intrusive, and it could just use some battery of the phone by displaying minimalistic informations. Another opportunity is that, by covering the screen or a part of it, I could prevent people from checking on their notifications. Maybe this little friction would make them to constantly be tempted to use their social networks at every time during the day.

Creating shapes

I determined a process to design the phone cases and my visual identity:

  1. create dot grids
  2. graphically express what “bad optimization”, “neutral optimization” and “good optimization” look like
  3. also think in terms of motion design
  4. print it at the size of my screen
  5. try different designs and get feedback from users

I made some roughs on the paper. I combined them with the idea of good and bad bacterias, the idea of something spreading. It can look lime an organic element, or it can look like the circuits of an electronic components. It can refers to the environment or to the environmental speech I’m trying to spreach.

Then, these shapes have different behaviors and colors, depending on the degree of optimization they refer to. For instance, a vivid red colored shape will express more explicitly a bad optimization.

I also thought about the evolution from the degree of optimization. If someone manages to transform a bad optimiation into a good one, then maybe the vivid elements moving very fast will flourish and slow down. On the contrary, the shapes color can fade.

Rough 1/2

Rough 1/2

Illustrator 2/2

Illustrator 2/2

Rough 2/2

Rough 2/2

Illustrator 1/2

Illustrator 1/2

Meeting with the WOMA Fablab

I met Guillaume, of the WOMA. It was a one hour meeting. We talked about my concept and the different prototypes I thought of. He was enthusiastic towards my idea. He told me I really need to have a less condescending speech to avoid sounding like someone criticizing people for the way they behave [and, of course, it’s not my intention].

I told him about the 3 prototypes I had in mind:

  • Animatronics phone case [back of the phone]
  • Phone case with LEDs [back of the phone]
  • Something like the HTC Dot Case [protecting the screen]

He was skeptical concerning the prototypes on the back of the phone because as I knew it would be thick and large. And the more I want think technologies and components, the more expansive it is. Even if he liked the idea of the muscle wire to animate the phone case, he told me that it was difficult to make an easy industrialized production and I was aware of the fact that it still needed energy and it couldn’t be thin. Concerning the proposition with LEDs, making it look like growing vines is cool but risk could be it to be considered as a vivid-colored computer or car [tuning]. Fact is, in both cases [pun not intended] it would require an arduino board with a bluetooth shield and a battery. It would be something like 500 to 600€ to prototype it [considering the fact that they would need to help me a lot because I think I wouldn’t be able to work a lot on the hardware and code].

On the contrary I explained him what I had in mind with this dotted case. We both agreed on the fact that it was better and it could really sell my idea and my serve my speech. With a simple thin piece of wood and an app, it’s possible to build a system to help people optimize their daily use of their devices and of social networks ! It doesn’t use a lot of energy, it can be discrete, it can be customizable and unique, and easy to produce.

I sent my presentation by mail to his colleagues and I need to give him news next week with a brief of the first prototype I would like to present.