How to Make a Prototype in 3 Days

Rapid prototyping a mobile weather app with user experience design practices

Jean Bae
7 min readJun 21, 2015

Process

Day 1: Research & Synthesis
Day 2: Ideation & Design
Day 3: Testing & Iteration

Tools: Pen, Paper, iPhone, POP (beta, free)

Research

User Interviews

With only one day for research, its is was important to move quickly in this phase. Before interviewing potential users, my initial approach started with three questions in mind. I interviewed six individuals throughout the day.

“What decisions do you make based off the weather?”
“What applications or websites do you use now?”
“How often do you check the weather?”

Initial Findings

  • Users — Two general personas or types of user groups
  • Context — A shared common time of use, checking weather in the morning
  • Behaviors — Checking weather is part of the morning ritual and centered around preparing for the day; secondary and more distinct needs center around planning for weekends or travel
Two user groups identified during research analysis

User Interviews…continued

To get into the nitty gritty of discovering user needs and goals, I continued research with my six interviewees and utilized the “4-lists” method. This method gives the user four consecutive blocks of time to list out as many thoughts as possible on each area:

  1. Pains — What is frustrating or difficult about checking weather?
  2. Pleasures — What makes a good experience and how can it be even better? What does it look and feel like when things go well?
  3. Context — Where or when do they check the weather?
  4. Behaviors — What are they doing or feelings when checking the weather?

Synthesis

Data into Insights

After conducting interviews, I collected the user data and mapped pains and pleasures against immediacy of need to identify common sentiments or user affinities. This helped guide prioritization of features.

Affinity map based on user interviews inform initial thoughts on user goals

Findings to Features

Problem: Users must have quick access to relevant weather information centered around three modes of use (1) preparation for the day, (2) immediate check of current conditions, and (3) planning for future events.

  1. Users check current conditions first thing in the morning to help decide what to wear and what to bring. → main screen should prominently display precipitation in addition to temperature and inform conditions for the next hour; notification feature
  2. Users need a full day view to accurately prepare for the day → secondary importance, but consider including an hourly with clear indication of precipitation
  3. Some users need to know whether to take allergy medication → Include a display of today’s pollen severity and consider this information for extended 3-day or week view
  4. Users got wet when conditions suddenly changed → include a notification option that alerts users in case of inclement weather or impending rain
  5. Planning for the weekend or travel required more than just a 3-day or 5-day view → a module should be included for extended time period
  6. Users liked being able to quickly check various locations — should include additional locations with quick swipe or drop down access
  7. Users commuting by bicycle or moved about the city needed to know whether it was precipitating on that route → a module should be included to enable A-to-B routes with conditions between
  8. One user described painful travel stories about “weird weather in that area” that he simply wasn't informed about → consider a module dedicated to advisories or tips for general climate information for current location
  9. Weekend planning and missing out of opportunities to enjoy good weather was a common pain point whereas enjoying outdoor activities when weather is good a source of pleasure → consider a module dedicated to a quick look at this or upcoming weekend

Design

Why hand-sketch?

In coming up with initial concepts for the design based on my findings, paper and pen were used. The value of hand-sketching is speed. I can mock-up at least 10 different ideas in the same amount of time it might take to commit one idea to digital mock-ups.

Prototype 1 sketches — emphasized quick display of current conditions and include features discovered through interviews

Prototype 1

A screen from first iteration

Using an application called POP (Prototyping on Paper), which is currently in beta, I was able to turn quickly hand-drawn wireframes to interactive prototypes.

I’m ready to begin testing.

Testing

Testing — Round 1

Two scenarios were provided to some of my volunteer testers. They were provided with an iPhone displaying the POP prototype. I observed their actions and reactions as they performed each task.

SCENARIO: “Imagine you have just woken up. You’re beginning the day and want to know what the weather is like. Can you show me how you’d do that?”

SCENARIO: “Imagine you’re thinking of attending an outdoor concert this weekend, but don’t know what the weather would be like. What would you do?”

Findings to Iteration

  1. Users had to perform a number of scroll or tap gestures to get to the relevant areas and then have to mentally process the displayed data to determine the desired information (e.g. how hot/cold is it, do I need an umbrella)
  2. While observing the first round of testing, I slowly realized that I had a missed central point; weather is something we have to plan around to enjoy life.

“How can we maximize the enjoyment of good weather and minimize the discomforts for bad weather?”

Testing helped to reframe user goals

A Vocal Interface

Having new-found insight, I realized the first aspect of my original problem statement was in itself worthy of singular focus — it represented an overlapping common need between all my testers. This is was in inflection point in the design.

The user’s goal is to make an informed decision, primary what he/she needs to wear or take (e.g. umbrella or route) and whether to pursue an action/activity.

So I decided focus on core user goals and pivot the design. This lead to another round of quick sketching and ideation for the design of prototype 2.

Prototype 2

The concept, tentatively called “Little Birdy,” centers around a one-touch vocal interface that dictates a personalized set of current conditions upon open or while in the application. The prototype included an on-boarding flow that learned your name and preferences.

This new design removed the need for scroll or for mental processing of data to get to the information the user actually needed.

Testing — Round 2

Two scenarios were provided again and testers were given additional tasks for app customization. Initial feedback came back positive.

Next Steps

Given the opportunity to further refine this prototype, my focus for next steps would include:

  • Additional user research and testing
  • Refined UI — how could the main screen be even more simple?
  • Additional priority features, such as notifications for inclement weather and prompts when outside for preferences modification
  • Implement a tutorial
  • Test for a skipped intro/on-boarding option
  • Explore of paid-for features (e.g. voice options, added modules)

I also note that this project was centered on the user experience design process and not necessarily for build; if were it actually intended for market, market and competitive analysis would have been conducted.

Challenges & Takeaways

  • Approaching this project from a UX perspective, it was important to set clear goals first for effective research preparation and to guide the collection of my own data (also, it would certainly would not hurt to have access to larger collection of analytics data such as demographics for similar apps as well as platform specific data).
  • With only three days to create this prototype, time is limited resource so setting time blocks for each step was helpful. The use of hand-sketches was key in getting to a workable prototype quickly.
  • The ubiquity of the weather app (with some eight-thousand search results in the Apple App Store) made for a tough challenge in fending off my own personal biases going into the project.
  • One of the key habits I want to enlist for the the future is improving my documentation skills by keeping a daily, detailed record of research methods and results (including annotation of designs, quotes from users during the interview, and photos along the way), which can save a lot of time later when revisiting or defending design decisions.

Lastly, feedback is welcomed. Thanks for reading :)

--

--