Interaction Design

Capstone Project

Cyril Mouzeler

--

At the beginning…

Design an application is not difficult, design a good UX application (have a look on the what is UX) is difficult and challenging but fun! That’s why I take the decision to learn basics to accomplish this task. Let’s see how I made it. First of all, to develop an application I need an IDEA. To get it I observe in my office people, not about the tasks they complete but how they run their working day. I asked some of them and I noticed that for lunch they text message, phone, chat several times to find where and with who they will go for lunch. Gotcha! I have my IDEA : provide an Mobile App to find a place from favorite restaurants and invite friends or colleagues quickly and easily. Let’s design it, now.

Design decision

At this step, I started to list features of the App under bullet points form. I wrote all ideas I got, good or bad, it did not matter.

Storyboard — At the beginning

After I draw stories with people to define the usage of the App, to define the context, the feelings of involved people. I got several wonderful pages with great drawings… (I am not a really good painter :( ). So, I was in hurry to create my first paper prototype : I took a sheet of paper, a pen and scissors. I defined a smartphone, I draw a rectangle with a label “Find”, I cut it and I got my first button. I got a basic welcome page with a “Find” button in front of me.

First paper prototype screen - version 0.1

I produced several elements and then I configured them to create screens to relate 2 stories I selected previously. At this point a lot of questions popped out but previous courses helped me. Then to design the “Home” page I focused to elements for informing users: I put a text to the top of the screen, I put a big button at the center of the screen, thought about personalised features I would like to provide from the App, then a “login” element, then a “create account” element. Then I followed the storyboard and created another screen and another.

More complex paper prototype screen

I reviewed the App add some text to give information to user, correct some elements to be consistent. I got a lot of fun and to be honest I was little bit proud of me I had my first paper prototype in front of me ;-) It was time to validate it.

Iterations

Round 1: I applied heuristic evaluation on this great paper prototype and I became humble again … I listed several violations like “user feedback” : a validating message was missing after user action… Another violation is about “user freedom”: the user can not go to menu for freely navigating. Then I refactored my paper prototype.

Round 2: I proposed my second version to a user with some explanation about the App : LunchFinder and with more user feedbacks. We simulated together a real usage of it and again some designs issues appeared. I corrected them and I moved from paper prototype to digital prototype.

Round 3: I gave the digital prototype to 2 new testers with some explanation I did a video record of each and I got more feedbacks: I got the feelings of the users using my prototypes. At this step, I made some improvements to my prototype.

Result list

For example, in the result list, I designed convenience actions to edit or delete restaurant in this result list but testers did not understand the purpose of them in this screen. Another example is about login action : there is no way to know if the login was successful. I corrected some issues, improved a little bit the design but it remained some questions. A/B Testing will help me [here, more information about it]. I created two versions of screens and then I got two prototypes to test.

Round 4: Prototypes have been tested by 4 testers using A/B Testing through UserTesting website [this is a great tool]. After these tests I got answers to my design questions and more.

Latest version of Home screen

Then, for example, I keep a larger button than a higher one in the welcome screen. Testers and their videos were very useful. I noted that tester clicked directly on the “Find” button on “Home” screen then they did not login and they were not able to invite friends. I completed text on the “Home” screen to explain the advantage to become a member.

My last version was made with the help of them. I was really happy because all testers said that the navigation is very easy and the App is very simple to use then I think I reached my goal: provide an App easy to understand and providing freedom to navigate through it.

Users teach me…

Testers took the application in their hands and used it in real condition. This process seems easy and trivial but it brings a lot of information. It allows to understand the way they use the App and to confirm if the design is correct or not. We can see if the objective of the App is reached and difficulties for using it. During tests users express their feelings and it allows to change some “colours” (it is like some flavours multiplying good feelings) and detect if navigation of the application is easy. Users teach me that they think differently, that their interests and focuses are different, that their logic is different. All differences have to be managed in the App and UX design has to address all : that’s the challenge of UX Design! And finally users want always more! That’s good because they provide ideas to enhanced the application. For my App, they would like to see the today’s special and the menu list. They reverted that the App can be used for diner and not only for lunch as well.

Result

In few days, I designed a Mobile App from observation to digital prototype using great tools like InVision and UserTesting based on Interaction Design courses. I thought it was just an exercice but now I will complete the prototype and I would like to develop this App and publish it on stores!

--

--