Grid

About the workshop

Reboot Factory is a workshop organized by my professors and it is a based on building an application and various designing & developping activities, in only 11 days while working with a team of students.

The interviews

Before receiving our briefings, our first task was to interview different people about the way they interact with technology and the problems they experience in their daily lives at their job. I have interviewed two people, a nurse and a business man. Obviously, both of them have very different experiences at work, but the common problem they both have is direct communication. They feel like everything is a boring routine.

When asked about web design, they said that it should be user-friendly, neat, and there should be simple and logical ways of navigation. For them, the most important thing is to know something about the product and if they like the product, they should be able to reach the product through a simple design. The people I interviewed don't have any favorite websites, but they both visit Wikipedia and other websites like such, on a regular basis, simply because they offer a great source of information and they like to learn and discover new things and facts.

In my case, both of the people use Whatsapp, Skype, Calendar and Reminders a lot on their smart phones. They both need to be in permanent contact with their clients and they need to schedule important dates for their meetings. As they say: “These applications help me because they're mostly about communication, a short and efficient way of communicating with people, be it through Whatsapp or emails. Also, they help me for my time management, like optimizing it and remembering my tasks.”

Pros & cons

When asked about the pros and cons, they said these applications are rather a powerful and informatic tool, very compact and mobile which you can always have with you. The cons, in general about electronic tools, are the security and losing your device. If you lose it, get hacked or there’s a problem with your device, you feel helpless.

Empathy

As a team, we put all our interviews together and we realised that the common point between all the replies that we got is the communication. The problem is very much on a social level. So, we decided to base our application on empathy. Empathy is the ability to understand and share the feelings of another.

mindmap computer

More research

Firstly, we tried building an application which ressembles a social network for professionals between employers and employees. But doesn’t that make you think about LinkedIn? We canceled that idea and we did even more research. Some of the team members decided to have a walk in the city of Namur (wow, designers go outside?) and interview even more people, while the others were already writing content. By talking to different people, we noticed that they are generally bored and not very content. So, we thought, why not make an application which can lead people to become more social and nice towards others… in real life! We really started liking this idea for our project and we created little challenges for our users and they can choose to do them or not. We would like to offer people freedom, we don’t want them to feel obligated to do anything they don’t want to.

paper prototype

Building the application

We started building the information architecture on a paper and then we transferred everything into the computer by using a mind map. This helped us visualise the tasks which we will integrate in the application. Later on, we drew a few sketches and prototypes of what the application will look like, how we will organise the content etc. It is a very important step.

tasks list doc

After we discussed our ideas with the professors, we created a to-do list so everyone knows what they have to do. While we were working on the wireframes, we were also researching a good name for our application. Our first suggestions were “Say Hi” and “Hello World”, but in the end we decided to go with “Goals” because our application is based on challenges which the user can accomplish every day if they choose to. These challenges will make the user more sociable in real life.

tasks list doc

The design, the feel

Later on, we created our style guide which is mostly based on warm colors and we had already put the design of the application together. The warm colors represent communication and empathy through people. The illustrations inside the application are specific to UI Flat Design which gives our application a very fun, interesting and colorful feel. We wanted an application which is vibrant and funky. In the mean time, we also designed the landing page of the app. The colors were coordinated together.

logo evolution

For the logo, after we kept on trying and trying and trying many suggestions, we finally decided thata trophy would be the best idea. It is perfect. The trophy represents the challenge side of the application and it makes people feel like they are rewarded if they manage to accomplish the challenge. In the beginning, the background of the application was using real photos of people, but we changed it with illustrations drawn by me, for more of a funky and personal feel. The landing page was also mostly done.

style guide

The illustrations

Later on, we created our style guide which is mostly based on warm colors and we had already put the design of the application together. The warm colors represent communication and empathy through people. The illustrations inside the application are specific to UI Flat Design which gives our application a very fun, interesting and colorful feel. We wanted an application which is vibrant and funky. In the mean time, we also designed the landing page of the app. The colors were coordinated together.

illustration evolution

I have drawn the illustrations by representing the gesture. Instead of drawing an entire person, I drew a hand doing the action which expresses the point of the challenge. For the font, firstly we tried using Muli, but since we were developing the application for Android firstly, in the end we used Roboto.

loading page

How it works

Once you open the app, there is a loading screen showing the logo and the phrase “Challenges make you alive”. You will also be asked your name. The application will welcome you and show your name. Then, you will get some questions, like a mini interview. These questions will establish your social level. In the beginning, the application was written in French, but we decided to switch it in English for more of an international level. We tried to give as much sense to questions in English, as they had in French. Every user has their own profile, where they can see their name, their social level and the history of their completed challenges.

loading page

Finishing touches

Nowadays, gradients are very popular in web design and applications, which made us to believe it was a great choice for the application’s interface and also for the landing page. Once we finished the design of the application, we also made a small video showing how the app works and placed it in the landing page.

Thanks

I would like to say thanks to all my professors for their support and to my awesome team mates for making this project possible: Kathleen Beyls, Steven Berquez and Jean Will.

goals app phone

Test the app

view symbol