Case Study: Select UI Design

Background:

Select is an app for swapping video games, the whole idea is that you can swap the videogames that you don’t use anymore with other fellas that want it and that have some games for you, it works with swipe left/right to say yes or no, and with geolocation. In the process of swapping games you might met people with similar game taste, so, besides being an app for swapping games it is a community of gamers.

Challenge:

So, the big challenge was to make something geeky but not nerdy, something funny but not stupid, something graphic but not childish, it had to be interactive and full of details.

Tools:

  • Paper and a pencil (Ideas, words, LD wireframing)
  • Sketch (HD Wireframing and mockups)
  • Invision (Prototyping)
  • Zeplin (Delivery)

Process:

Early Stage

The main concept was to make something funny and easy to use through good UI design and helpful micro-interactions in order to make the best User experience possible.

We started the iteration with some paper sketching writing down some ideas of what we wanted for the project and what people would need, the Personas excercise helped us with the Case Study an the Flow of the app.

We began to turned those ideas into Low density Wireframes and digitalized them in sketch.

Design decisions

So, one of the decisions we took in the process was to made the video games list to work with swipe left/right in order to make the app feeling real.

The video games are organized in cards which ratified the real sensation of throw something away.

Interested

If someone is interested in one of your games you will received a list with the video games of this user, if you find a game of your interest you can go and see it or just swipe right to say yes.

Match

When you have a match with another user you will have all that you need in the card, the cancel, finish, or chat button at just one tap, this make things easy and fast, which is one of the keys of the app, Like, Match & Swap.

IXD

Blank Slates:

Having in mind that the whole app look and feel needs to be memorable, funny and geek, we used the blank slates to help users use the app and make them happy about the funny and geeky memory.

Microinteractions/Dialogs:

In order to give users feedback about what they are doing or need to do, we create a couple of dialogs with funny illustrations that clarify what his/her action is doing.

Landing page

The main goal with the landing page was to show people in an easy way how does Select works, having a hero image, a copy and a Call To Action was the right choice to tell briefly at fist sight what Select does. Then, we let the users navigate through a web page full of features and in an on boarding style.

Blog

Besides the app we create a blog where people can keep in touch with all the community and the gamer’s news. This will help the client to grow the community and to give an extra service about this particular field.

Result:

We are currently finishing the coding and starting the marketing strategy, we will see how it goes after the launch.


Any Doubt or comments are more than welcome, and if you like this post you are welcome to share it.

If you want to keep in touch follow us on Facebook and Instagram

Have a happy daysign!