purp planet pink planet purp planet pink planet purp planet blue planet glowing aura blue planet glowing aura

TricksToGo

case study

bulb

Context

We were 4 students and we wanted to create an app about empathy. An app that can help people in their life. So we asked around us : “what kind of problems do you encounter in your work?” The most common answer was the lack of time. Of course, it’s impossible to create more time. We are web designers, not wizards. But what if... what if we create an app that can help people waiting for the most precious time of the year, the holy Graal we all crave for? Yes, you know it:

Holidays!

We had our app idea: a countdown to holidays, so our audience can know exactly how many days till their well deserved break. Do you remember when you were a child waiting for Christmas? When you opened the boxes of the advent calendar, dreaming of all the presents you will get?

Our app uses the same principle. Well, advent calendars are all about chocolate, so let me be straight: our app has nothing to do with sweet delicious food. Sorry. At least it won’t make you gain weight. It will rather tell you some cool tips about your holiday destination. Everyday. How cool is that?

advent calendar
pen

UX Process

We had the idea but we still had to define what exactly the app will do, what kind of features we wanted, what will be on our different pages. We discussed about features, and sort them between the essential and the dispensable ones :

Essential features:

  • Daily Tricks page
  • Calendar
  • Favorites
  • Limitation in number of trips
  • Limitation in duration before trip
  • Setting daily and weekly notification

Dispensable features:

  • Ability for the user to create tricks
  • Choosing color associated with holidays country
  • Login Page

Architecture of information

Now that we have set the main features, we need to organize how the user will access them. The structure of the app: which pages are linked together? The application is quite basic, so we didn’t spend so much time on the architecture of information.

Prototyping

Let’s draw! For me, this is the most important step of UX process. Make some basic drawings of the app, test it, make other paper wireframes, then let someone else test them. Change the wireframes, make them test again. And again an again, till we have something the user is not lost into. It’s important to ask different types of people for User Testing because something can be obvious for some people and really complicated for others.

some paper wireframes

Design

We now have a good idea of the app look, but what about colors, buttons style, types of icons, illustrations ? That’s what we’re working at now! We wanted to make a colorful and easy to use app. We decided to use some design guidelines from Material Design. It helped us a lot! Thanks Material.io !

After several tests we decided to use a panel of colors from blue to orange and no gradient. Yellow was a color we loved because it reminds people of the sun. Unfortunately, it’s quite unreadable with white text.

  • #f44336
  • #e91e63
  • #9c27b0
  • #673ab7
  • #3f51b5
country selection screen abandonned login screen

At first we made the mistake of not making any style tile. We were 3 working on design so everybody had something quite different in mind. We shared our ideas and then we made a style tile. I won’t do the mistake of forgetting the style tile again, it’s very important!

style tile
add country screen another add country screen
final design screens final design screens

Coding

All the wireframes are done. Let’s get coding! We’ve been using BEM method for selecting element in css. I was doing the code of the landing page and another person from my team coded the demo app. You can see a picture of me working on the code below!

Axel Neven coding landing page of TricksToGo