Design Process Example


Design Goal

Allow people to record and share their predictions about the future

Prototype goal

The prototype goal is to show and explain exactly how the service is going help people record and manage their predictions

Step 1 - Inspiration & Research

Before conducting interviews I made an assumption that making future predictions could be not only a fun thing to do, but also could help people of some particular jobs to gain more followers, revenue and media exposure.

After defining the target audience, I conducted short interviews asking the following set of questions:

  • How often do you try to predict future?

  • Why are they trying to predict future?

  • How do the come up with their predictions?

  • Have they ever guessed the outcome of events before they occur?

  • Would they like to be reminded of such predictions?

  • Would they care to be able to share the predictions they've guessed right on social media?

  • Would making correct predictions about the future help their career?



Step 2 - Converging to Target Audience

Next, based on the information gathered in during the inspiration stage, I've created three personas that would potentially benefit from using the new service:


Step 3 - defining Concept

service vision 

The imaginary service will allow people to predict future events through writing short paragraphs of text, called predictions, setting a due date to be reminded of them through email/phone notifications and then being able to share the outcome of those predictions on social networks.

Prototype scope

  • Create predictions

  • Create counter predictions

  • Upvote/Downvote predictions

  • Personal statistics for each user

  • Arrange information into future trends

  • Sharing on social media

Key Definitions:

  • Prediction is a paragraph of text with a name and a due date that describes an outcome of a particular future event.

  • Counter-prediction is a paragraph of text that describes a different outcome of an already existing prediction.

key characteristics of a prediction:

  • Spontaneous

  • Easily forgetable


Step 4 - Prototype architecture & basic Flow

For the first prototype I created two simple flows for creating a prediction and a counter prediction, assuming the user already has an account and is logged in, since the process of creating an account is not what I am testing right now.


Step 5 - Mocks and PRe-prototype

Based on the flows, I created a set of mockups for the prototype. Also, as predictions are spontaneous and ideas can find people anywhere anytime, people are far more likely to create their predictions via their mobile device. Thus our service should be designed with a "mobile first" approach:

Test results

  1. Include date of the last prediction editing session and warn people that the date on their prediction will change if they edit it

  2. Give feedback on the state of their prediction (saved/published/etc)

  3. Each prediction and counter prediction has a separate url

  4. Main page of the service should foster people's imagination and make them care to make predictions

  5. Design should incorporate the behaviour of both people, who do predictions for fun, and those, who uses them for business


Step 6 - Wireframes & Scenarios

It was a conscious decision to do scenarios after the first iteration of wireframes. The reason is, with this approach scenarios provide more value to me:

  1. They help me understand the desired flow for the service - their main goal.

  2. They test the flow I initially had in mind, when I was doing the wireframes.

scenarios and wireframes created after a pre-prototype are more to the point and provide more value

The first prototype gave me a lot of high level ideas about how the service might work. And I incorporated those ideas into the wireframes. Now scenarios took me one level deeper into understanding the service, the users and their needs and behaviours. And rather then starting doing wireframes now, I already have something I can tweak and build upon, which is far more efficient. I saw a lot of flaws in my initial high level ideas and now, when I proceed with wireframes, I am building upon something I already have rather starting from scratch.


Step 7 - Enhanced Mocks & Prototype


Step 8 - user tests

As the first part of testing I decided to match the scenarios with the current prototype to see if I like the feeling of how predictions and counter predictions are made. I left out "Log In Page" and "Register Page" on purpose as I consider those to be standard pages that should not be spent time on at this stage.

At the same time, I asked a couple of friends to go through the same scenarios as well as complete some minor navigational tasks. As they did that, I observed and asked questions about the current state of the app and how they perceived it. I also tried to give them little to none information about how the app works for the sake of pure first time experience.

From here we would iterate through roughly the same set of steps until we have a solid understanding of how the service should work