Francis Benoit is documenting stuff.


Week 1

Early thinking about Storytelling.

I see interactivity everywhere – not only in web design or graphic design. This quite obvious statement brings me to think about interactivity and how relations and connections define who we are individually and collectively. In my eye, interactivity is within every design a project; it starts and finishes with a human. It is, therefore, my goal to bring every project in – and into – life.
In the scope of this course, I am investigating storytelling. This self-explanatory concept is now part of every day’s life with mobile applications such as Facebook, Instagram, YikYak, Snapchat, and much more. We share pictures, videos, broadcast ourselves live.

Brainstorming on applications.

The project of this course is to design and develop an application that will enable to create and share stories. This goal can be interpreted in many ways. Coming from the master's program, I will always have in the back of my mind my thesis subject which is to investigate a new methodology that promotes the use web browser as a tool. Storytelling might look quite off that topic, but it can nevertheless inform what I wish to accomplish for my thesis.
To get back on the interpretation of the project’s goal, I see “stories” rather as a process. The movement, the development of something. I looked back into what was the first storytelling when Man invented writing. It was often drawings on wall, slabs of rock, sheets of papyrus. Drawings would depict scenes, messages, trade history, etc.
I thought of an application based on the concept of the Exquisite Corpse. This application would enable people to make interactive and dynamic drawings, to share them with friends and to re-work past drawing made by other people. This application would be about the process of every creation.

Week 2

App analysis

Application 1: Draw Something

This application is a game that draws its concept from Pictionary. Ever turn, a player must draw a word, and the other player must guess what the drawing represents. This app is mostly used by people of all ages that wish to play with their friends. Every turn of the game are very short, so the use of the app is quick and straightforward – therefore used during micro breaks rather than an extensive period.
The visual appearance of the application is very lively. The use of bright colours and large buttons makes it very clear, but at the same time, very busy and tedious. The style makes it clear that it is a game application focused on drawing. The visual is making the navigation a little hard to understand because it is loud and mixes up the different buttons. It can be hard to know where to start when one opens the app. The navigation is not clear enough to point out where one must start to play the game.
However, the interaction is fluid, and once the users are familiar with the interface, they can manage many games at once. It becomes easy to interact with the game and other players within the in-game context.

Computer Arts: Visualator

This application is a drawing app that is quick to use, straightforward and promotes creativity within a restricted frame. The users of this application are mostly readers of the Computer Arts magazine, which is addressed to designers, artists and programmers. This application can be used as an exploration tool, but can be a little restrictive.
The visual aspect of this application for the today's is below expectations. It seems that the app had not been updated for the most recent smartphone generations because the screen ratio is smaller and the resolution is rubbish. However, it does not remove the fun in the tools it offers.
It offers two modes of drawing. The navigation is straightforward: once you select one of the two modes, you enter the canvas. Despite this simplicity, the interface of the toolbar is way too small to control all the variables precisely. Once the users are done with their drawings, they can save it on their phone or send it via emails or text messages to other people.


This application's goal is to share pictures and videos with friends in a temporary manner. Storytelling on a short term is one of its force. In fact, after the picture or video has been seen, it is deleted. It is one of the most used social media application and used by a wide variety of users. It is used to share moments, selfies and let people know what one is doing during the day.
Its visual appearance is minimal, putting the camera at the centre of attention. While it can be visually pleasing, the codes used in the application regarding the iconography and buttons are not explained. Users can only learn the codes of the app by using it many times. The visual makes the navigation pleasant. There is not a lot of depth in the level of navigation, which is good because users don't spend a large amount of time with the application. It is enough for them to check their inbox and to send new pictures.
The interaction is fluid and pleasant. However, the use of the camera can be tedious for some older phones. The face recognition feature of the application brings a new depth to taking pictures.

Autocad Sketchbook

Autocad is an application to draw. It is mostly used by professionals like designers and illustrators. It offers more complex and complete tools than most of its competitors. Users use it because it is one of the most powerful drawing tools offered on tablet and smartphones. The context of use is often in a professional setting, where productivity and efficiency are essential.
The visual is clear, and the iconography speaks for itself. There is no misunderstanding while using the application. The interface is simple and does not compete with the canvas space.
The navigation is straightforward: going right into the canvas to start working. All the tools are at the same level.

Auxy Music Studio

Auxy is an application to make music in the way of a synthesiser. It is used by music amateurs and also by music professionals seeking for new tools and experimentations. It offers an minimalistic interface to build tracks of many different instrument in order to create music pieces. The context of use can be casual, as well as a professional context to create new sound.
The visual appearance is pleasing, very straightforward as well as communication well every function. It does not follow the Apple Interface Guidelines, but does not feel out of this world either. The visual is appealing enough to invite the users to explore the application by themselves. If one does not understand the codes of the application, a tutorial is easily reachable and understandable. The visual appearance makes the navigation pleasant and reduces the complexity of use. The users go back an forth between the main view of their creation and the settings of single elements of their composition.
The interaction is fluid. It uses a programmatic approach, where the users enter prompts in order to generate a sound. The sum of the prompts entered is the result of the music composition. Decisions have to be made before the processing of the information.

Week 3

Design Brief

Storytelling and sharing stories are too often bound to photographies, videos and texts. Meanwhile, stories evolve at the same pace people do. The images people shares today are instantaneous, grasping only this little time. They became ubiquitous and mundane as social media constantly feed us. This application seeks to address the problem of the monotonous and instantaneity way storytelling can be today.
In the scope of this course, I am investigating storytelling. This self-explanatory concept is now part of every day’s life with mobile applications such as Facebook, Instagram, YikYak, Snapchat, and much more. We share pictures, videos, broadcast ourselves live.

The objective of this application is to emphasise creativity through the creation of interactive drawings to share stories with friends. The application will put creativity at the forefront of storytelling and sharing. The application seeks to nurture the creativity of users and help them develop an alternate vision of conventional storytelling.

The application will offer an environment to create interactive drawings based on predetermined programmatic process that users will have to design before drawing anything. Once a drawing is created and shared, other users can contribute to it by following the same process that the original creator designed.

On a timely basis, users will be invited to participate in challenges aside from their creations that require many users to achieve.

On a long term, users will be able to follow the progress of a drawing and their creative skills.

The application will unveil to the users an alternative understanding of creativity; that can be revealed in the choice one is making before the action is made. In the meantime, the application shall demonstrate that collaboration and the notion of play can fuel creation and maintain the interest towards making, sharing and participating in stories.

Week 4

Low-fidelity Wireframing

I've started to draw the first wireframes for this week. We welcomed two Facebook designers last week. They provided great insight about my project and opened me to new tracks. They also brought to light some questions I already had in mind such as "what would be the hook that will keep users to come back?" and "What would be the incentive to use my application?"

This productive meeting propelled the sketching of my first wireframes. I drew two sets that offer different ways of navigations and interaction. I feel that I did not draw loads of different windows. However, I feel that I cover the main "workflow" of the application. I will go more in-depth to detail the process of designing rules, the drawing phase and the collaboration phase. With hindsight; I will probably merge features of the two sets to get a complete experience.

Week 5

High-fidelity Wireframes

The high fidelity wireframes display the main workflow of the interaction and use of my application. The flow to complete the main task is short, which I believe is beneficial to the users. One can use the application quickly and concentrate on what is important, design rules and draw sketches. Through the wireframes, I wanted to highlight the fact that I have put aside all features of social media such as "friends", "likes", and commenting elements. This choice was made to put an emphasis on the process and the sketch. It does not matter where did the challenge comes from or who designed it. The goal of the application is to spark creativity and challenge users.

Not adding any social media features also breaks a comfort zone where one would only interact with his or her friends, and at some point, conceal the potential of creativity (for never leaving this zone). This leaves the users with a great choice of sketches to contribute without judgement about who did it - concentrating on the process.

Week 6

Click-through Navigation Prototype

This week, I worked on the first prototype of the application. This first iteration consists in a quick click-through of the main workflow of the app. The first looks at the navigation and interaction of the application were very insightful because it questioned the initial design choice I made for the wireframes. I was able to examine if the font size, button size and other elements were the appropriate sizes for a proper navigation. The first prototype provided me insight with the semantic of my buttons and the visual cues of my elements. Even though the visual aspect of the application isn't set yet, I believe it is important to look at the associations and cues that the visuals offer are significant because they play a big part in the learning curve of the application for the users.

Update on the documentation website: Lightbox galleries have been installed to see more properly images and give them context. Feel free to look at the work of the past weeks.

Week 7

High-fidelity screens, first iterations

This week, I developed an identity and visual look for my application. It needed to be minimal and discreet not to compete with the visual of the content users would generate. I have also quickly created a logo for the application. The refinement of the wireframes into more tangible screens was another round of prototyping. I looked at the buttons, the interaction and the navigation again. With the help of the Sketch App and its mirror function with the phone, it was very easy to iterate different elements of my prototype. Sketch was new to me before this project, so there was a learning curve. I'd say that I am pretty comfortable with it today. It is a very nice tool, but it will not replace my Adobe CC in my heart, alas.

I also have put some more elaborate animations between the screen to enhance the comprehension of the different features. Some are still quite glitchy. Hopefully, they will look great by next week.

Next week I will provide a more polished look on the screens and tweak them to make the interaction and navigation as fluid as possible.

Week 8

High-fidelity screens, second iterations

Last class, we had peer reviews, which highlighted few details that needed my attention in order to enhance my prototype. The visual itself revealed to be clear and understood by my peers. I didn't rethink the whole visual look of the application. However, some additions had to be made. The major improvement I did was to integrate a button on the dashboard that would toggle the different sketches. It would enable the use to look at his dashboard, his creations only, and the sketches he contributed. This feature would help users to differentiate what they see, and also how they wish to use the application. Some would like to interact with other while some would like only to pick up challenges they made.

I had the question "How can we control the contributions of other in my sketch?" To that, I answer that the application must trust the users. In turn, the users must contribute to the best of their creativity. In the situation that someone intentionally screws up a sketch, the sketch would not appear anymore the feeds of other users because it would not be "hot" anymore. Another scenario would be that a user could pick it up and try to fix it, and open it up to new opportunities (and push the boundaries of his creativity!)

For this prototype, I decided to present it with inVision, since my Flinto free licence expired. I started to experiment with Origami Studio and thought about the micro-interactions I wanted to add throughout my application. I will wait to Tuesday when the Facebook Design team will visit us to present Origami to learn as much as possible and get some insight about my prototype.

Week 9

Micro-interactions, first week

This week, I have been developing my prototype to include micro-interactions. Last week the Design team at Facebook came in to give us a workshop on Origami Studio (which was cool) and to give new input on our project.

I am not quite satisfied with the work I have done this week because I'm still in the learning curve to master Origami. I know what I want to do and working hard to make it happen. Until now, I have completed the flow of the creation of rules, which is the main chunk and also the most complicated to integrate all the micro-interaction. I am not entirely satisfied, again, but we get the sense of it quite well.

Week 10

Motion UI & Micro-interactions

I finally made my way out of Origami Studio! In the end, I still encountered issues, but I asked people on the Origami community on Facebook, and they quickly helped me. I find this tool very interesting, and I look forward using it again.

Once I got comfortable with the intricacies, I was able to make all the micro-interactions I wanted rather quickly. Unfortunately, I wasn't able to accomplish one animation in particular, so I had to think of something else (the animation where I tap on the "Toggle" button on the dashboard). Else than that, I'd say it went well. Origami is made to experiment with new animations and interactions, and throughout the process, I had the opportunity to try things that I didn't plan at first and eventually looked nice. The idea about the physicality of the circle elements on the dashboard was not successfully executed because Origami lacked a "gravity" feature. That is the best I could do to make them live in a space where the user could move through. As you can see, the app is barely able to process the movement of every element. (It crashed on me numerous times)

I was able to animate all the screens of my application. You'll be able to see all of them in the video.

Week 11

Final Vision: progress

This week, I worked on the final vision website that will present my application. It is a one-pager that shows the main features of the application. The website is pretty straightforward but gives the viewer a good idea of the app with short descriptions and videos. I even added some Java that simulates sketches progress, dynamic and variations. It feels quite "empty", but at the same time, I don't think there is much more to say.

I will also make a series of posters (3 to 5 different ones) that will promote the application's feature while showing iterations of the same sketch.

The link to the final vision in progress is here.

Week 12

Final Vision and reflecting on the past semester

It's the final week! I'll take this last entry to reflect on this semester in Advanced Topic in Interactivity. But right before, please see my final vision of my website right there. I also did a poster series that are based on the same content featured on the website. They display the progress and variation of a single challenge. On this documentation website, the colours are fine, but for obvious reasons, the colours of the printed posters were off because I cannot print in RGB gamut.

I had to fight my way out to put videos on my final vision. At first, I integrated Youtube videos, but the native bounding box wasn't nice. So I tried to compress my original videos to host them directly on my site, which revealed to be a difficult task, but in the end, it worked. The only thing is that the videos will appear only when you go to another tab, then return to the final vision's tab. It is still a mystery why it does that, but at least it works.

Reflecting on interface design

After a semester in Advanced Topic in Interactivity, where I met designers from Facebook, Google and passionate students for digital medias, I wish to reflect on interface design. I learned a lot from a field of study that I have barely touched before. It served me very well to give some thoughts on my thesis work and for my practice in general.