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.
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 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.
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
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
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.
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
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
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.
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.
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.
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.
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.
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.
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.
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.