Assignment #12: Research Key Findings and Design Solutions

Updated test plan & script


  • “Thanks for taking the time to help us.”
  • About
  • Us
  • The course
  • Our product (flow)
  • The test
  • Permission to record
  • Please try to speak out loud about your expectations, reactions, feelings, and observations.
  • “Remember it’s the prototype being tested, not you!”
  • Please be brutally honest, don’t try to spare our feelings
  • Please be patient, no need to hurry

Background Interview

  • What is your general attitude towards biking?
  • What is your experience with biking in the Bay Area?
  • How long is your daily commute?
  • How come you are (not) biking to work/school?


  • Task 1: Find and open the Shoal app
  • Task 2: You’re at the gym. Take the safest route to grandmother’s house.
  • Task 3: 24 hours have passed and you are back at the gym. Today you want to go to People’s Park. Select the safest route.
  • Task 4: You have arrived safely at People’s Park. On your way you reported two potential dangerous conditions though. Tell the Shoal community that one of the reports was a road construction.

Follow-up questions

  • What is your overall impression of the app?
  • Do you have any concerns?
  • Is there anything else you wish it could do?

Brief user profiles (age, gender, relevant background info)

Age: 22
Gender: Female
Relevant background info:

  • Has a bachelor’s degree in journalism
  • Is visiting from Australia
  • Has only been biking since she arrived in January
  • Bikes to work every day
  • daily commute is 15 minutes there and 30 minutes back.
  • She bikes because there is no pt, good exercise, too far to walk and has no car.

Age: 26
Gender: Female
Relevant background info:

  • She lived in Mountain View for two years and has been living in Berkeley for one year. Hasn’t biked since she was a kid before moving to the bay.
  • She commutes to school almost everyday (15 min each way) to school
  • She sometimes goes on longer rides (eg 20 mile ride on Saturday)
  • She would not bike if it’s raining or if she needs to dress up
  • She puts her phone in her bag if know where she’s going, otherwise, she’ll put it in a bag attached to her bike handlebars

Age: 28
Gender: Male
Relevant background info:

  • He uses bike to commute to school (10~20 minutes), loves biking
  • Used to bike in the city, didn’t like it due to high anxiety about car traffic
  • “Felt constantly fight for space with the cars”
  • “if everyone’s respecting the bike lane, that might be okay”
  • “muni buses don’t really care about anyone”
  • Bought a bike when moving to SF
  • Would not bike if the weather condition is bad (rainy or too cold)
  • He puts his phone in his pocket while biking, really likes the idea of “patting the phone”

Age: 25
Gender: Female
Relevant background info:

  • She bikes to get around nearby places or goes to grocery, she has a basket in front of the bike to carry stuff
  • She commutes from home to school (10 min walk or 5 min bike)
  • She had some negative experience of almost getting hit
  • She wears a helmet while biking, and also equips a light on her bike
  • She would use a more quiet road because she feels safer
  • If she thinks a car didn’t see her, she will stop
  • She puts her phone in the bag, and doesn’t have the need to look at her phone while biking

Age: 27
Gender: Female
Relevant background info:

  • Biking earlier on in the week, not super frequent biker, still depending on the bus, still sort of new
  • Always wears a helmet, parade of bikers at a neurological institution reminds her of the risk of not wearing one
  • Dealing with lots of variables, traffic on Telegraph, waits for walk-button, doesn’t make left turns because of cars,
  • 10-15 minute bike commute

Age: 31
Gender: Male
Relevant background info:

  • Expert biker, commutes by bike and takes bike out on weekends for long rides > 50 miles.
  • Very assertive rider, knows when to be aggressive and take up lane.
  • Feels confident in his ability to navigate the city.
  • He uses Strava, a mobile app for route tracking, to document is rides
  • He’s tried other apps including mapmyride but doesn’t like the clutter of the tool although it has some good features.
  • Doesn’t ride on the side of the road because gravel and debris settles there.
  • He will ride in the road with cars or ride the bike lane line if there is one.

Top 10 findings and design recommendations

1.) The safety rating was ambiguous to the users, causing problem of understanding (ex. some users think the more ‘helmet’ a route has, the more              dangerous a route is; while some feel the opposite) Safety helmet icon is confusing

Suggested design solution: find a bike helmet icon or something else like a star, could be yellow, Use traffic light metaphor instead of discrete             icons (red = stop/danger, yellow/be careful, green/all is good go!

2.) Comparing alternative routes: Most users were not able to find alternative route, swiping interaction was unclear

    Suggested design solution: Present alternative routes in a listview like saved routes.

3.) Map visualizations are not self explanatory. The green dotted line has been interpreted as bike boulevards, alternative routes etc.

    Suggested design suggestion: follow conventions from Google Maps and Waze, make a visualization hierarchy/legend. Different things to                  visualize: bike lanes, selected route, alternative routes, the Shoal, reports (incl. stretches and intersections)

4.) People like the idea of tapping the phone during bike ride to record something along the way.

    Suggested design solution: None

5.) … but female respondents didn’t keep their phone in their pants pocket because they are non existent or too small. They keep it in a backpack instead.

    Suggested design solution: Arrival reporting

6.) Recent / saved route confusion: How are the routes saved and named?

Suggested design solution: Routes automagically saved after finished, allow users to edit or create aliases for destinations.

7.) Are the routes suggested on the landing page saved or recent routes?

    Suggested design solution: After completing a new route the app automagically saves the route to recents for display when need or in relevant          context (ie. user looking for route from same starting point)

8.) The report dots are ambiguous (but clearly tappable)

Suggested design solutions: use exclamation marks, the report dot icon should be changed after specified to a certain type of report

9.) Route abstraction confuses some users, some prefer the route review on the map

Suggested design solution: Make route review on map, maybe an option to toggle between the two

10.) Route selection. Go button for each route seems redundant

Suggested design solution: Have one static ‘Go’ button on top of the route list. After choosing the route, the ‘Go’ button and the route on the             map get highlighted

Assignment #9: Apply Visual Direction to Key Flows

Shoal splash screen 2 landing search map1 map2 during after click_on_report report_detail

We discovered a way to customize the Google Maps view. We’ve found a tool for creating a scheme from scratch and a collection of presets. For now we’ve decided to go with the preset called Light Monochrome. Choosing a simple map view will allow our data to stand out.

Assignment #8: Mood Board

Brand attributes

Safety, Caution, Attention, Fun, Empowerment, Community, Party, Gathering, Responsible, Eco-friendly, Calm, Danger, Secure, Easy, Tracking, Together, Unity, Connect, Amass, Crowd, Assert

Mood board

Moodboard   Google Drev 1

Moodboard   Google Drev 2Moodboard   Google Drev 3

Font face


Geo Sans Light Font

Color schemes

Option 1

Color wheel   Color schemes   Adobe Kuler 2

Option 2

Color wheel   Color schemes   Adobe Kuler

Assignment #7: Animation/Sound annotations and Usability testing recruitment plan

Usability testing recruitment plan

Target User
Commuters (average or expert) and/or potential commuters

Recruiting Plan

  • Commuters
    • Friends from the previous interviewees
    • Biking community e.g. Critical Mass San Francisco Facebook group & San Francisco Bike Coalition Facebook Group
    • Criteria: Use bike to commute for more than x days in a week
  • Potential commuters
    • Students living in the International House
    • Students from other faculties at Berkeley
    • People from Craigslist
    • Criteria: Consider biking for their daily commute but have some concerns withholding them

High-level Script

  • Introduction
    • “Thanks for taking the time to help us. Today we’ll be showing you a prototype…”
    • About us
    • About our product
    • About the test
  • Background Interview
    • What is your overall opinion on biking?
    • What is your experience with biking in the Bay Area?
    • How long is your daily commute?
    • How come you are (not) biking to work/school?
  • Tasks
    • Task 1: First-time user experience
      • You are a (potential) biker and you want to ride more safely so you downloaded this app. This is the first time you open it. When you start the app, the following screens appear. Read and understand the directions. (Show the tutorial screen)
    • Task 2: Find a safe route from A to B
      • Imagine you are about to bike from A to B, and you are not familiar with the road condition (which road has less cars, which intersection has accidents often etc.) in this area. You want to know the safest route from A to B. (Show the map screen)
    • Task 3: Report a dangerous spot while riding
      • Imagine you are on the road biking. You found a dangerous spot and decide to report. Tap your phone 3 times and you’re done.
      • Would this procedure work for you?
      • Would you find it useful to get live directions in headphones or on a smartwatch?
    • Task 4: Categorize a list of reported spots and rate the route
      • At the end of a day of commuting between office and home, you decide to open the app, rate the route you’ve been through and specify the reported spots you’ve made earlier today. (Show the reported screen)
    • Task 5: Find a used route 
      • You are satisfied with the route you rode yesterday from A to B. You are going to use the same route today. (Show the map screen)
  • Follow-up questions
    • What is your overall impression of what you saw today?
    • Do you have any concerns?
    • Is there anything else you wish it could do?
    • Would you want a sharing feature on Facebook or Twitter?


Animation/Sound annotations 

Search for a route


Toggle overlay


First-time tutorial


Assignment #6: Key Flows

Brainstorming Session

1 2 3 4

Key Flows


View Larger workflow


Assignment #5: AppMap & It-Screen

Brainstorming Session

sketch-all whiteboard



Link to large view:



Assignment #4: Personas, Scenarios, Storyboards

Brainstorming Session

foto 1

foto 2


  1. The novice

Brie is an 18 year old college freshman studying sociology at USF. She recently moved to San Francisco where she lives with her aunt for financial reasons. Currently she is commuting to class by bus, but the bus stop is not close to her house and she has to transfer mid way. She got a bike for her 18th birthday, but has had a few bad experiences on the heavily trafficked streets of SF. Although she has acquired safety equipment such as helmet, lights and rear view mirror she feels unsafe commuting to school every day. She finds this very annoying since she likes to be in control of her own life and time and biking would save her around 40 minutes a day in transportation.

  • The average


Patrick, a 30 year old college graduate, works in downtown San Francisco as project manager at the Red Cross. He has been working there for 5 years and has been commuting back and forth from his apartment in Northern Visitacion for the last three. The ride takes him 35 minutes each way and he is comfortable riding on his usual route. Lately he has felt a bit bored by his daily routine and wants to explore alternative routes for the views and different impressions. He has tried to change his route a couple of times in the past but every time he has run in to unexpected traffic or dangerous circumstances making the experience less pleasant.

  • The expert

Alexis is an attorney in her mid 30’s living in Sausalito and working in downtown SF. She spends most of her time during the week at the office, so when the weekend arrives she wants to spend her time outside exploring and exercising. Ideally she would have the time and the money to practice extreme sports, but she finds biking to be a good alternative. Most weekends she bikes between 40 and 90 miles with or without her bike savvy friends. No matter what she never forgets to track her bike rides with various apps keeping her smartphone in the back pocket of her biking jersey. She also wears her biking outfit and uses her sports bike on her long commute to work. She describes herself as an aggressive biker and knows the conditions of practically every street of SF. Biking has become a big part of her identity and she is very keen to share her biking experiences trying to get the people she meets to start biking.

Scenarios & Storyboards (Motivation, Context, Distractions, Goals)

  1. Brie, hates to commute by bus because she has to switch buses and it takes more than 40 minutes. She also wants to exercise but doesn’t have time. So she decides to bike to school. However, she heard stories about how biking in SF is dangerous. She downloads the app and finds a safe route to school. Now she is enjoying her time commuting to school everyday and she lost 10 pounds in 1 month.

  1. Patrick, commutes every day to his office but he is bored with his route and doesn’t think his route is safe. One day, he decided to explore a new route that is more interesting, refreshing and safe. He checked google map and started biking with his instinct but there were too many cars on the street and the road conditions were terrible. He downloaded the app and found better (fun and safe) route with more bikers. The app also showed a group of bikers that commute everyday together. The group guided him on the route so he didn’t have to stop and check the route when he got lost. Since there were more bikers biking together, cars were aware of the bikers and Patrick felt safer. 

  1. It’s one of the usual day that Patrick has to commute to his office. However the bike lane he is used to ride is under construction today, so he decides to change to a new route.  It’s a nice day and he’s riding on the road next to the coastline where he can see the Bay Bridge. After Patrick gets off his bike and arrives the office, he wants to share this beautiful route with other bikers. He feels wonderful to share amazing things with others.

  1. It’s a sunny early Saturday morning, Alexis is on her bike for a 40 mile-biking which she does it every weekend. The road condition is good, fresh air, and there’s almost no other bikers biking on this route at this time. Suddenly she sees there’s a pothole in front so she has to slow down and passes by. When she slows down she pats her mobile phone in her front pocket twice, so the phone would tag this spot as a pin point. After she finishes her ride, she opens the app and tag the pin point with a dangerous mark and specifies as a pothole so other bikers would know to be more careful or to simply avoid the route. Alexis feels satisfied by providing helpful information to others.