How I Designed an Obsolete Card Game: Whot!

Florence Dairo
usable
Published in
4 min readSep 7, 2017

Do we all remember how Whot is played?

Design Duration: 2 months

I thought this project will take a maximum of 2 weeks but I spent exactly 2 months. Most of my time was spent iterating, iterating and iterating the design. I’m glad I was able to pull through.

I decided to take up this project to put into practice and understand all I’ve been learning about UI/UX design.

Check out my first official UI/UX design project!

WHOT 101

What is Whot? How is this game played?

Whot is a type of card game played in suits, usually five. They are square, circle, triangle, cross and star. The minimum number of players is two (2). The first player that plays all his cards, wins the game. The game starts with a 4-card deck.

In my design, the card deck comprise of cards of three shapes, circle, square, triangle and a fourth special card. The special card, which is the Whot card itself (with the number 20), allows players request for any shape they intend to play.

My Design Process

My design process from Research > User experience (user goal, user flow and information architecture) > Wireframing > Prototyping > Iteration

Research

I carried out a series of research about the game itself — How it is played (both online and offline), the rules & regulations guiding the game and how a typical card mobile game is designed. I explored and drew feedback from users of various Whot applications.

User Experience

Who are my customers?

This game can be played by everyone. No age limit. A major requirement is to own a mobile device that allows you have access to the internet.

What major goal can users achieve with this app?

They can play a card game on their mobile devices against friends or unknown opponents.

User Flow and Information Architecture: Here’s a brief sketch of major screens

User flow

Wireframe

Low Fidelity: A low fidelity wireframe of major screens sketched based on the user flow, above.

Wireframe and prototype of major screens

Mid Fidelity: I took note of all the elements on each page and designed a mid fidelity design of the app.

Screenshot of mid fidelity design of the app

High Fidelity: Here is the high fidelity design of the app.

Screenshot of High fidelity design of the app

Icons and Colors used

Iteration

I believe iteration brings a design closer to perfection.

A large fraction of the time spent while designing this mobile application was on iteration - tweaking the visual and user experience design and testing users interaction with the app. I shared the interactive design with random testers to get feedback in order for me to iterate some more.

Mock up of Whot app

Whot

Click here to interact with the mobile application.

At the end of the day, I feel like wonder woman

Yass! I’m wonder woman!!

I learned a lot while working on this project. Iteration and User Testing in UI/UX and product design is extremely important.

I’ll love to hear from you

I’ll love to know what your design process is. Feel free to share your view points about this design and UI/UX designs.

Don’t forget to 👏 or leave a comment below 👇

I’m eager to learn more and open to corrections.

Thank you for reading. 😊

Special thanks to Ohans Emmanuel for the support and guidance while working on this project. You’re the best. Thank you.

--

--

Florence Dairo
usable
Writer for

Senior Product Designer at Toptal | Design Strategist | Technical Writer