Yasar Habib

Idea to Prototype

How do I take an idea from my head and turn it into something tangible?

I start by unpacking the idea, and understanding the challenge.

Then I make a prototype and collect feedback.

The Idea

An online game where you assemble virtual teams of real players of a professional sport.

To win, you work towards attaining maximum points and the highest rank on the leaderboard.


My dad and I started picking virtual teams over email in 2014. At its core, the object of the game was to predict which 5% of players will dominate 95% of a cricket match.

Cricket is a team sport, a duel between bat and ball. The ball collects wickets, and the bat scores runs.

Earning Points

All the possibilities of getting runs and wickets.

Point System

Quantifying Quality

Calculating quality points of every run and wicket.

Consider the two options:

Although the numerical value is identical, the context of the match determines a qualitative value of scored runs.


Repeatedly asking three questions, I’m able to group answers and uncover the true need and motivation behind the idea.

Why does this app need to exist?

So people can easily and regularly play the game.

Who is this app for?

People interested in playing online fantasy-sport.

What can you do with this app?

Join a game, assemble a team, view results and add friends.

Set Compass

At this point, I establish a hypothesis that can be tested. It also serves as a guide when making design decisions.


If it’s easy to assemble a team, then users are likely to join a game, because they want to play and rank on the leaderboard.


I collect just enough information to see if there is a potential market. I also check available demographics data to build a user persona. Later, I’ll come back to this and use it as a starting point for further research.


The number of fantasy sport players has nearly doubled in the past decade (source: wikipedia).

Growth Chart

Currently there is no model to generate revenue, however there is potential value in the prediction data.


In this phase, I focus on a single persona from the demographics data. Personas help me create products with a specific user in mind.


Persona Highlights:

This user is very likely to have 5+ years of internet experience and earning a ~ 94k yearly income. Likely to consume alcohol & fast-food regularly. Interested in airline travel, video games, and athletic shoes. Typically spending $200 / yearly on fantasy-sports.



I used the answers from What can users do with this app? to map out user interactions. This will help me later on when I’m ready to begin prototyping the user interface.

Interaction Design Map

Rapid Prototyping

After mapping interactions, my mind is primed to think of countless solutions for the user interface. I use a technique called rapid-prototyping to get all of these ideas out of my head and onto paper.

The 6-8-5 Method

I sketch 6-to-8 solutions in 5 minutes. I set a timer, and repeat this for each interaction.

6-8-5 Design Exercise

Grouping Patterns

After getting all the ideas out on paper, I grouped similar UI patterns. This helps me identify common themes in the interaction.

6-8-5 Design Exercise


I used Sketch to design prototype, ready to be tested.

Selektor App


Now that I have a prototype of my original idea, I want to see if my designs decisions meet the mental model of potential users. It’s time to plan a usability study to test my hypothesis.

Usability Planning

At this stage, I want to test the prototypes’ interaction design. I want to see how users to navigate around the app to perform these tasks:

The testing sessions will be held at a near-by cafe. Each session will be ~ 20 minutes.

The equipment I’ll need:


Subjective: Before starting a session, I’ll be asking a background questionnaire. During the session, I’ll gather ease and satisfaction feedback after each completed task. After the session, I’ll ask the participants about the overall ease and satisfaction of the experience, and if they are likely to use or recommend the app.

Quantitative: I’ll be using screen and audio recording to process these data points after the sessions are complete:

Recruiting Users

I’ll be recruiting 8 users who meet the following criteria:

Fees: Each participant will be compensated for their time. Recruiting users for prototype tests can cost anywhere between $30-100 / hour.

Running a Test

I’m ready to get feedback and test the prototype. Before I go into a real test session, I run a pilot test.

This is a mock test I perform with a family member, friend or colleague. This is a great opportunity to test the equipment, questionnaire and test script - making sure all is as intended.

Now I’m ready to test.


Unpacking and understanding ideas is critical.

Establish a hypothesis to test your idea.

Many methods/tools can be used to build a prototype.

This process helps me sort through ideas, letting go of bad ones and moving forward with the good.