Vous êtes sur la page 1sur 100

FoodCarts

Eric Lo

Eric Lo

Table of Contents
I. Abstract - Statement of Interest - What is FoodCarts? II. Research - Industry - Unique Positioning Statement - Target Audience - Competitive Analysis - Comparative Matrix - Technical Specifications III. User Experience - Information Architecture - SSNiF - Personas - Task Walkthroughs IV. Development Process - Wireframes, Roughs, and Designs - Timeline - Future Expansion - How FoodCarts Works V. User Tests - Iterations and Changes VI. Style Guide - Moodboard - Typography and Colors - Logo VII. Personal - Autobiography 04

06

24

46

74 86

94

Statement of Interest
Carne asada street tacos. Thats what essentially brought about the whole idea for this project. Growing up in San Francisco, I have always loved to eat at taco trucks whenever I would see one on the road. Finding a new truck was a kind of adventure in itself, bringing with it a sense of fun and discovery. My love for street food has grown and matured along with the street food scene itself in recent years. Today, the Bay Area is home to a growing and thriving community of street food, with gourmet fare from all around the world available on any given day. Yet with all of these new food carts sprouting up, there is still no ideal way of locating them in real-time. With FoodCarts, I hope to solve this problem so that we can all find our own carne asada street tacos.

What is FoodCarts?
FoodCarts is an iOS app that provides real-time locations of street food around the Bay Area using an interactive map and GPS tracking. Food carts are inherently mobile and transient, making it hard for customers to find them regularly. FoodCarts solves this problem by providing one place to which food cart owners can announce their status and location, making it simple for customers to reach them. FoodCarts is the best way to find and discover street food.

Statement of Interest
Steamed buns and tea eggs. These are the things that essentially brought about the whole idea of this book and thesis presentation. I remember when I was a small child in Hong Kong, I used to see vendors selling food like this on the street from makeshift carts and stands that could be disassembled and transported away when the day was over. From a young age, I developed a love of street food that has lasted to the present day. I remember eating pan-fried noodles served from a cart on the side of a busy street in the Kowloon District of Hong Kong. Nowadays, I regularly go for tacos and quesadillas from trucks around the South of Market area in San Francisco. Today, the Bay Area is home to a growing and thriving community of street food, yet there is no ideal way of locating these food trucks, carts, and stands in real-time. With FoodCartographer, I hope to fix this problem so that we can all find our own steamed buns and tea eggs.

Research

7 7

Industry
In recent years, street food has been experiencing a huge surge in popularity. Since 2008, the number of registered food carts and food trucks in the Bay Area has increased from around 70 to more than 250. A recent search on Yelp for street food returned more than 400 results in the Bay Area. There are regular gatherings of street food vendors in San Francisco, collectively called Off the Grid. One major factor in this increased interest in street food is the recent economic downturn, which has affected both consumers and proprietors. In most cases, street food is cheaper than food at brick-and-mortar restaurants because of lower overhead costs like rent, utilities, and insurance. A $5 burrito at a taco truck can easily go for almost double at a taqueria. The economy has also affected proprietors. Opening a new brick-and-mortar restaurant in San Francisco can cost around $500,000. Starting a food truck, in contrast, costs around $50,000 to $100,000.

Comparison of start-up costs


Restaurant

$500k

Food truck

$50-100k

Industry
This growth in the number of mobile food vendors has also led to increased prestige and credibility of street food and its providers. Respected and established chefs have taken to the street food model and now serve gourmet fare out of carts and trucks. In a stark contrast to the cold sandwiches and hot dogs of years past, today's mobile food vendors serve cuisine like beef tongue sliders, ratatouille, and creme brulee. Even with this explosion of popularity in street food, though, there has not been a great way to track these vendors in real time. The following pages will discuss FoodCarts target audience, the various competitors that currently exist, and why FoodCarts will be a better alternative.

Unique Positioning Statement


FoodCarts is an app that fulfills a real, current need in the industry. Street food has never been more popular in metropolitan areas around the US, and its growth shows no signs of stopping anytime soon. With this growth has also come a great need for passionate street food fans to find their favorite food carts and discover new ones. Though there have been several attempts at creating a way to reliably track the real-time locations of food carts, the closest competitors that currently exist still offer inferior user experiences and leave much to be desired. The coming pages will go into closer detail as to how this is so. FoodCarts combines a rigorously-tested user experience with a clean, aesthetically-pleasing visual design to create a product that solves a subtantial problem that has yet to be addressed in the industry. FoodCarts is the best way to find real-time locations of street food in the Bay Area.

Target Audience
I. Primary
Foodies who want a reliable and efficient way of finding and rating street food. Age: Gender: Tech Savvy: Key Factors: Behaviors: 20s to 30s 50% male, 50% female Moderate to high, familiar with iOS Convenience, fun Constantly connected, early adopters. Use Yelp and Foodspotting to find and share food. Stay up-to-date with social media (Facebook, Twitter). View food as a social experience, an adventure.

10

Target Audience
II. Secondary
Busy people looking for a quick, inexpensive, high-quality meal. Age: Gender: Tech Savvy: Key Factors: Behaviors: 20s to 40s 60% male, 40% female Moderate to high, familiar with iOS Cost, convenience Students, urban professionals. Time and money are both limited.

III. Tertiary
Street food vendors looking to reach more customers. Age: Gender: Tech Savvy: Key Factors: Behaviors: 20s to 50s 65% male, 35% female Low to moderate Convenience, enterprise Limited budget, but want to grow business. Have difficulty letting people know where they are.

11

Competitive Analysis
I. Yelp
Overview Yelp for iPhone is a popular user reviews and ratings app that provides information on all sorts of businesses. This includes street food, but searching for only street food can be difficult. Users have to manually filter between street food and brick-andmortar restaurants, and it can be hard to tell when a vendor will be at a certain location. In addition to reviews and ratings, users can view and post pictures, check in to businesses, and find exclusive deals.

Pros Huge database of user-generated content (reviews, pictures, locations, etc.). The most respected and well-known app for restaurant and business reviews. Clean, familiar interface.

Cons Hard to tell when street food vendors will be open. Difficult to narrow searches to street food only. Interface is clean and functional, but doesnt show much personality or individuality.

12

Competitive Analysis

Red is Yelps trademark color. This is one of the few places that displays Yelps brand.

Yelp uses the familiar Google Maps API.

This long menu screen illustrates the scope of Yelps database of businesses. This can be both a strength and a weakness. My app has a more narrow focus, with the goal of a better user experience.

13

Competitive Analysis
II. Roaming Hunger
Overview Roaming Hunger for iPhone is an app that aims to keep track of the locations of street food. In this way, it is the closest direct competitor to FoodCarts that is currently in existence. There are food maps for about two dozen major cities like Los Angeles, San Francisco, and New York. Its data appears to be generated both internally and by users. There is an area for users to submit locations of food trucks to the app.

Pros Seemingly addresses need of providing real-time locations of street food. The color scheme of red, white, and blue is used fairly effectively and consistently. The app provides a useful function of texting alerts to users when trucks are in their area.

Cons Difficult to understand the interface (navigating maps, browsing vendor pages, etc.) Graphics are of poor quality, appearing pixelated and poorly designed. The app doesnt seem to work very well, if at all. The live map for San Francisco is almost always empty, even when there are actually street food vendors around.

14

Competitive Analysis

The icon bar is at the top for some reason. I dont see how this is better than the accepted iOS standard of a bottom icon bar.

The slanted pictures show a sense of playfulness and personality, but its unclear if they are clickable areas.

The different design elements on this screen (blue buttons, all-caps labels) clash with each other, and dont match with the ones already established on other screens.

15

Competitive Analysis
III. Foodspotting
Overview Foodspotting describes itself as a visual guide to good food and where to find it. Like other food searching services, it alows users to search by location and food type. One of its distinguishing features is that instead of simply reviewing restaurants, it allows users to recommend their favorite dishes and see what others have recommended. In this way, it promotes a strong sense of community and interactivity. Users can post pictures of specific dishes from restaurants, along with short blurbs. Pros Clean, innovative interface that shows a lot of personality, with well-designed icons and a good use of textures. Simple, clear iconography and clean layouts that make the most out of the limited mobile screen. The community aspect is a smart way to keep users engaged and active. Cons Small number of results in the app in general The map view function appears broken. The user-submission system of specific dishes also is not the most effective way of rating restaurants.

16

Competitive Analysis

A nice use of texture in the title bar gives the app a sense of personality and branding.

The meaning of some of the icons, such as the globe and the star, arent immediately clear.

Well-designed icons, with the larger Spot icon in the middle clearly indicating which is most important.

Good use of colors and scale to create a type hiearchy.

One possible weakness is that users may inadvertently make dishes look bad with poorly-shot photos.

17

Comparative Matrix

18

Technical Specifications
How FoodCarts Works
I have designed FoodCarts to take full advantage of the iPhones hardware capabilities while harnessing APIs to do the heavy lifting on a variety of tasks. The mapping portions of the app would use the Google Maps API, as it is not only built in by default into iOS devices, it is also the industry leader in acceptance and usage. Food cart locations would be populated by the food cart owners themselves. A food cart owner looking to announce his location would first have to register his smartphone with FoodCarts and have it be verified. Then, using his phones GPS capabilities, the owner would use the business-side version of the FoodCarts app to broadcast his location, again by using the Google Maps API. FoodCarts also has features that use different functions on the iPhone. When a user writes a post and wants to attach a picture, the camera on the iPhone is launched from within the app. If the user wants to attach a picture that has already been taken at a previous time, FoodCarts accesses the camera roll from within the app as well. Similarly, users can also send a food carts location to a friend via text message or email directly from the app. The app uses submissions from owners and users to build and maintain its database of information.

19

Technical Specifications
Interactive Prototype
In its current state, FoodCarts is an interactive prototype of an iOS app built using HTML5, CSS3, and JavaScript. I aimed to create an experience that was as true to using a native iOS app as possible, without actually building out a fully functional app and submitting it to the iTunes App Store. As my goal is to be a front-end UI designer and not an app developer, I focused my efforts on creating interactions and designs for an interactive prototype, rather than coding a native app using an iOS SDK, Objective-C, and the Google Maps API for the backend. In order to make the app feel as much like a native iOS app as possible, I added a number of touches to mimic the iOS look and feel, including: iWebkit JavaScript library that allows for fullscreen browsing, eliminating the top and bottom bars in Safari:
var iWebkit;if(!iWebkit){iWebkit=window.onload=function() {function fullscreen(){var a=document.getElementsByTagName(a); for(var i=0;i<a.length;i++){if(a[i].className.match(noeffect)) {}else{a[i].onclick=function(){window.location=this. getAttribute(href);return false}}}}function hideURLbar() {window.scrollTo(0,0.9)}iWebkit.init=function(){fullscreen();hide URLbar()};iWebkit.init()}}

20

Technical Specifications
iOS icon to launch app:
<link rel=apple-touch-icon href=images/homeicon.png/>

Splash screen when launching app:


<link rel=apple-touch-startup-image href=images/splash.png />

iScroll JavaScript library for iOS-style scrolling, eliminating rubber-band effect:


var myScroll; function loaded() { myScroll = new iScroll(wrapper2, { snap: true, momentum: false, hScrollbar: false, onScrollEnd: function () { document.querySelector(#ind > li.active).className = ; document.querySelector(#ind > li:nth-child( + (this. currPageX+1) + )). className = active;} });} document.addEventListener(DOMContentLoaded, loaded, false);

21

Technical Specifications
Fixed viewport width and scale to maintain proper size and orientation:
<meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes/> <meta name=viewport content=height=device-height, user-scalable=yes/>

Retina display Screens and images were created using 640x960 resolution to take full advantage of the Retina display:
<img src=images/login.png width=320 />

22

Technical Specifications
Prototype Limitations
Though the aforementioned code snippets do a passable job in creating a nativelooking prototype, there are limitations. The biggest one is the lack of a backend, which makes passing information on to the next step impossible. One more limitation is that the prototype does not actually use the Google Maps API. It is also not possible to access functions like the camera and iMessage with this style of prototype. On the visual side, one noticeable limitation is the lack of iOS animations such as page transitions and button pushes. It was also difficult to maintain the portrait positioning, resulting in occasional, unintended orientation changes.

23

Activity

Browse

Profile

Vendor

All food Browse Browse

Favs

Filter

Alerts

Statement of Interest
Steamed buns and tea eggs. These are the things that essentially brought about the whole idea of this book and thesis presentation. I remember when I was a small child in Hong Kong, I used to see vendors selling food like this on the street from makeshift carts and stands that could be disassembled and transported away when the day was over. From a young age, I developed a love of street food that has lasted to the present day. I remember eating pan-fried noodles served from a cart on the side of a busy street in the Kowloon District of Hong Kong. Nowadays, I regularly go for tacos and quesadillas from trucks around the South of Market area in San Francisco. Today, the Bay Area is home to a growing and thriving community of street food, yet there is no ideal way of locating these food trucks, carts, and stands in real-time. With FoodCartographer, I hope to fix this problem so that we can all find our own steamed buns and tea eggs.

User Experience

25 25

Information Architecture
Vendor Login Vendor Page

Launch User Login

Map

Activity

Browse

Profile

Filter

User Posts

Vendor Posts

All Food Browse Carts Browse

Favs

Posts

Vendor Browse Pages Browse

Filter

Alerts

Current Status

Announcements

Awards

Posts

Menu

Write a Post

26

SSNiF
STAKEHOLDER
User - Hungry techie.

SITUATION
Is hungry and wants food now. Wants something more substantial than a fast food burger. User is hungry and only has five dollars on her.

NEED
to find what food carts are open around him right now.

FEATURE
Live map showing real-time results of what food carts are open near the users current location. Filter to show food carts that are known for being cheap and tasty. Live map showing real-time results of what food carts that serve food quickly.

User - Student on a budget.

to find a food cart that serves cheap and tasty food.

User - Busy worker at lunchtime.

Hungry, but no time to go to a restaurant. Wants something better than a cold sandwich from the lunchroom. User has heard about a food cart called ABC Tacos, but doesnt know much about them.

to find a food cart that can serve a hot meal quickly.

User - Curious taco lover.

a way to read what people think about ABC Tacos.

A vendor page showing what people have written about ABC Tacos, and what awards people have given to it. Write a Post function.

User - Satisfied taco customer. User - Planning for tomorrow. User - Taco lover.

User wants to review her experience at ABC Tacos. User wants to find out food carts what will be open tomorrow. User wants to see all of the taco trucks in the database and find out which is tastiest. Owner wants to reach more customers.

a way to write a review.

a way to see upcoming food carts. a way to browse all of the food carts serving tacos, and then sort by tastiness. a way to let customers know where his food cart currently is.

Schedule function.

Browse function, then Filter and Sort functions.

Food cart owner

Announcement function.

27

Persona #1
David, the White-Collar Forager
I need something quick and easy on my lunch break. Age: Gender: Occupation: Location: Tech Savvy: Key Factor: 32 Male Engineer San Francisco, CA High Convenience

Behaviors:

Early adopter, techie. Well-educated, fairly affluent. Reads tech and design sites like Mac Rumors and The Verge. Enjoys watching sports in his free time. Married, has a newborn child. Uses apps on iPhone daily to help with his busy life. Loves his job and works hard, but hardly has any time to eat.

28

Persona #1
David is an engineer working in the Potrero Hill district in San Francisco. He frequents the local eateries during his lunch break, and has been noticing more food carts around the area recently. He likes the variety and convenience they offer, and would find it useful to be able to see which ones are open around him during his lunch break. David uses his iPhone all the time in his daily life. He is used to looking up restaurants on Yelp and getting directions on Google Maps. He appreciates technology that makes his life easier.

Davids Tasks:
Task #1: Locate a particular food cart and find out more about it. Task #2: Call ahead to the food cart to place a to-go order.

29

Task #1
Scenario: David sees on the map that ABC Tacos is open just a few blocks away. He has heard about them, and wants to read what people think about their food. Task: Locate ABC Tacos and find out more about it.

Splash

User login

Map

Tap correct pin

ABC Tacos vendor page

Posts

30

Task #1

31

Task #2
Scenario: After reading more about ABC Tacos, David decides he wants to try them out. Hes on a tight schedule and wants to avoid waiting in line, so he decides to call the food cart to place his order ahead of time. Task: From within the FoodCarts app, call ABC Tacos.

Map

ABC Tacos

Read Posts

Back to...

ABC Tacos

Call

32

Task #2

33

Persona #2
Sandra, the Starving Student
Id rather pay $2 for a street taco than some junk at Taco Bell.

Age: Gender: Occupation: Location: Tech Savvy: Key Factor:

22 Female Student San Francisco, CA Moderate to high Cost

Behaviors:

Full-time student in her senior year at SFSU. Works part-time as a waitress. Single, no kids. Loves going to concerts when she has the time and money. Cant afford a car, so she walks, bikes, and takes Muni. Just got an iPhone, and enjoys using location-based apps. Loves food and cooking, but rarely eats out because of cost.

34

Persona #2
Sandra is a full-time student at San Francisco State University. Like most students, she lives on a tight budget and is always on the lookout for deals. That is why she loves food carts, as they provide quality food at affordable prices. Sandra loves her iPhone and is generally very comfortable with technology. She follows some food carts on Twitter and uses Yelp for ratings and reviews, but would like a way to aggregate all of that information into one place.

Sandras Tasks:
Task #3: Browse the list of food carts and filter by all of the ones tagged as Mexican, then view ABC Tacos. Task #4: After eating at ABC Tacos, write a post about them.

35

Task #3
Scenario: Sandra loves Mexican food, and wants to see a list of all the taco trucks in the database. Task: Browse the list of food carts and filter by all of the ones tagged as Mexican, then view ABC Tacos.

Splash

User login

Browse

Filter

Tap Mexican

Tap Awards

Tap Tasty

Apply Filter

Filtered Results

ABC Tacos

36

Task #3
1 3

37

Task #4
Scenario: Sandra has now eaten at ABC Tacos, and wants to tell the FoodCarts community what she thought about it. Task: After eating at ABC Tacos, write a post about them. Write a comment, mark ABC Tacos as Favorite and Tasty, and attach the picture of tacos that she took earlier on her phone.

Splash

User login

Browse

ABC Tacos vendor page

Snap photo Write a post Comment Awards Attach a photo? No Yes Or Choose photo

Submit

38

Task #4
2 1 3

39

Persona #3
Cameron, the Adventurer
Food, like many things in life, is an adventure. Age: Gender: Occupation: Location: Tech Savvy: Key Factors: 28 Female Art Director San Francisco, CA High Fun, adventure

Behaviors:

Art director at AKQA. Single, no kids. Bachelors degree, fairly affluent. Enjoys snowboarding, hiking, and rock climbing. Users her iPhone to share her experiences with friends. Values experiences and memories over physical things. Loves traveling to new places and trying new things.

40

Persona #3
Cameron is an adrenaline junkie. In her spare time, shes traveling the world in search of new areas to explore and new sights to see. Shes been to five continents and plans on getting to all seven before she turns thirty. She lives for fun and adventure, so its not surprise that she loves street food. Tracking down a never-before-seen food cart to try out its offerings is as exciting to her as visiting a foreign country. Almost.

Camerons Tasks:
Task #1: Text the location of ABC Tacos to her friend. Task #2: Set an alert for ABC Tacos to receive a push notification when its in the area.

41

Task #5
Scenario: Cameron is looking for a food cart to meet her friend, Florence, for lunch. She comes across ABC Tacos. Seeing that its open and nearby, Cameron wants to send its location to Florence. Task: Text the location of ABC Tacos to her friend.

Map

ABC Tacos

Send to a Friend

Send as Message

42

Task #5

2 1

Message

43

Task #6
Scenario: Cameron is blown away by ABC Tacos and wants to be notified when it will be open again nearby. Task: Go into the Profile section and set an alert for ABC Tacos.

Profile

Favorites

Alerts

Turn on for ABC Tacos

44

Task #6
2 3 1 1

45

Statement of Interest
Steamed buns and tea eggs. These are the things that essentially brought about the whole idea of this book and thesis presentation. I remember when I was a small child in Hong Kong, I used to see vendors selling food like this on the street from makeshift carts and stands that could be disassembled and transported away when the day was over. From a young age, I developed a love of street food that has lasted to the present day. I remember eating pan-fried noodles served from a cart on the side of a busy street in the Kowloon District of Hong Kong. Nowadays, I regularly go for tacos and quesadillas from trucks around the South of Market area in San Francisco. Today, the Bay Area is home to a growing and thriving community of street food, yet there is no ideal way of locating these food trucks, carts, and stands in real-time. With FoodCartographer, I hope to fix this problem so that we can all find our own steamed buns and tea eggs.

Development Process

47 47

Wireframes
Startup Sequence

48

Wireframes
Picking a food cart on a map

49

Wireframes
Writing a post

50

Wireframes
Writing a post (cont.)

51

Wireframes
Browsing food carts

52

Wireframes
Browsing food carts (cont.)

53

Wireframes
Profile

54

Wireframes
Profile (cont.)

55

Rough Designs
Startup Sequence

56

Rough Designs
Picking a food cart on a map

57

Rough Designs
Activity page

58

Rough Designs
Writing a post

59

Rough Designs
Viewing a post

60

Rough Designs
Profile

61

Final Designs
Startup Sequence

62

Final Designs
Picking a food cart on a map

63

Final Designs
Activity page

64

Final Designs
Activity page (cont.)

65

Final Designs
Browse page

66

Final Designs
Browse page (cont.)

67

Final Designs
Writing a post

68

Final Designs
Writing a post (cont.)

69

Timeline

SPRING 2011
Interactive Design Scope Concept Market Research Midpoint Book

SUMMER 2011
UX1 Market Research Competitive Analysis Task Flows Wireframes

FALL 2011
Visual Design Mockups iOS App Design Logo and Branding Typography

SPRING 2012
UX2 Competitive Analysis SSNiF Task Flows Wireframes UX Testing Final Thesis Book

Midpoint Review

Digital Capture Photography

Type Forms Typography

Final Review

70

Future Expansion
If I were to continue working on FoodCarts, I would take the leap into building a back end and actually making it a functional, native iOS app. This would involve using the iOS Software Development Kit and coding in Objective-C. A Google Maps API will also be necessary for the mapping function. A Twitter API would eventually play a part in populating the FoodCarts database when food cart owners tweet their location. In addition, I would need a server to handle all of these requests.

Nationwide Expansion
If FoodCarts were to become a successful app in the Bay Area, a logical next step would be expansion into other cities. Large metropolitan areas like Portland, Austin, Chicago, Miami, and New York City have thriving and robust street food scenes that rival (if not exceed) whats available in the Bay Area.

71

Future Expansion
Business-Side App
If FoodCarts were to eventually become a functional, native iOS app, there would need to build a business-side app for food cart owners to use. This business-side app would let food cart owners announce their location and see what users are saying about them, allowing them to reach more customers and grow their business. Owners could also potentially offer discounts or promotions on certain days in order to attract new business, or view map data to see which areas tend to draw more customers.

Business-side vendor page

72

Future Expansion

A map showing where user activity has been occurring.

Awards can be tracked from month to month and viewed in graph format.

73

Statement of Interest
Steamed buns and tea eggs. These are the things that essentially brought about the whole idea of this book and thesis presentation. I remember when I was a small child in Hong Kong, I used to see vendors selling food like this on the street from makeshift carts and stands that could be disassembled and transported away when the day was over. From a young age, I developed a love of street food that has lasted to the present day. I remember eating pan-fried noodles served from a cart on the side of a busy street in the Kowloon District of Hong Kong. Nowadays, I regularly go for tacos and quesadillas from trucks around the South of Market area in San Francisco. Today, the Bay Area is home to a growing and thriving community of street food, yet there is no ideal way of locating these food trucks, carts, and stands in real-time. With FoodCartographer, I hope to fix this problem so that we can all find our own steamed buns and tea eggs.

User Tests

75 75

User Tests - Round 1


Date: February 22, 2012 Location: AAU Usability Lab Number of users: 3 Observations: - There were some issues with maintaining a steady wireless connection on the test device (iPod touch). This affected the loading of JavaScript on the pages, causing scrolling and display errors. I will have to make sure to have a steady connection for future tests. - The Activity section was confusing. I will have to define what this section does more clearly. - On the vendor pages, users wanted to see more of an emphasis on current information.

Ratings

Problem: User didnt understand the ratings system, thinking it was a score out of 100.
76

Solution: Replaced the word Ratings with Awards and added number of posts.

User Tests - Round 1

Problem: No timestamp to indicate when posts were made.

Solution: Added a timestamp.

77

User Tests - Round 1

Submit

Problem: The Submit button appears even when the post cant be submitted yet.

Solution: Grayed out the button until Comment and Awards sections have been completed.

78

User Tests - Round 2


Date: March 8, 2012 Location: AAU Usability Lab Number of users: 1 Observations: - The buttons in the top bar are hard to press. I will adjust the CSS to make the tappable areas bigger. - When going through the Write a Post task, the user found a dead end through a broken link. I will have to check my links more thoroughly.

Problem: User didnt understand that the map automatically shows what is open now.

Solution: Added a status bar that displays what is currently being shown.
79

User Tests - Round 2

Problem: User was confused as to what should go in the comment box.

Solution: Added placeholder text to guide the user to write a comment.

80

User Tests - Round 2

Problem: User had a hard time finding the Write a Post button at the bottom.

Solution: Added a button at the top right to write a post in addition to the one at the bottom.

81

User Tests - Round 3


Date: March 22, 2012 Location: AAU Usability Lab Number of users: 1 Observations: - The wireless connection was very unreliable during this test. I may have to move future tests to another location. - The user had some difficulty understanding that the prototype was not fully functional, especially when writing a post. Ill try to make it more clear in the test script.

Problem: From a post, user expected to be able to go to the discussed food cart.
82

Solution: Made food cart name in title bar a link to the vendor page.

User Tests - Round 4


Date: April 8, 2012 Location: Private residence Number of users: 1 Observations: - This test took place at a private residence in San Francisco. The wireless connection was much stronger here, and the previous problems were avoided. - The user was very familiar with how prototypes and fully functional apps work. He understood that there is no backend to my demo, and went through the tasks accordingly.

Problem: User thought that Activity only referred to what food cart owners were doing.

Solution: Added tabs to the Activity page to differentiate between user and owner content.
83

User Tests - Round 5


Date: April 19, 2012 Location: Microsoft Usability Lab Number of users: 1 Observations: - This test took place at a usability lab at the Microsoft office in Mountain View, CA. - The user had an iPhone and was familiar with prototypes. She understood that there is no back-end to my demo, and went through the tasks accordingly.

Problem: User tapped Filter, expecting to see a list of open food carts.
84

Solution: Added a List View that displays the same information, but in a list format.

User Tests - Round 6


Date: April 23, 2012 Location: Design studio Number of users: 1 Observations: - This test took place at a design studio in San Francisco. - The user was a visual UI designer who specialized in iOS design, and therefore was exceptionally familiar with apps, prototypes, and visual design.

Problem: When using Browse, user couldnt tell what kind of sort had been applied.

Solution: Added a status bar showing how the data is being sorted.
85

FoodCar

Statement of Interest
Steamed buns and tea eggs. These are the things that essentially brought about the whole idea of this book and thesis presentation. I remember when I was a small child in Hong Kong, I used to see vendors selling food like this on the street from makeshift carts and stands that could be disassembled and transported away when the day was over. From a young age, I developed a love of street food that has lasted to the present day. I remember eating pan-fried noodles served from a cart on the side of a busy street in the Kowloon District of Hong Kong. Nowadays, I regularly go for tacos and quesadillas from trucks around the South of Market area in San Francisco. Today, the Bay Area is home to a growing and thriving community of street food, yet there is no ideal way of locating these food trucks, carts, and stands in real-time. With FoodCartographer, I hope to fix this problem so that we can all find our own steamed buns and tea eggs.

Style Guide

87 87

Inspiration
Path
Textures, activity feed, photos

Oink
Icons, tone of voice, colors

88

Inspiration
Foursquare
Activity feed, tabs, type hierarchy

The Chop Shop


Typography, colors, type hierarchy

89

Moodboard

90

Typography and Colors

Helvetica Neue
THE QUICK BROWN FOX JUMPS OVER THE GLAZY TACO TRUCK the quick brown fox jumps over the glazy taco truck 0123456789

Archer (Bold)
THE QUICK BROWN FOX JUMPS OVER THE GLAZY TACO TRUCK the quick brown fox jumps over the glazy taco truck 0123456789

Archer (Bold Italic)


THE QUICK BROWN FOX JUMPS OVER THE GLAZY TACO TRUCK the quick brown fox jumps over the glazy taco truck 0123456789

Archer (Medium Italic)


THE QUICK BROWN FOX JUMPS OVER THE GLAZY TACO TRUCK the quick brown fox jumps over the glazy taco truck 0123456789

91

Logo Explorations

Sketches from the exploration stage of the FoodCarts logo.

92

Logo
Final Logo iOS App Icon

Color Variations

93

Statement of Interest
Steamed buns and tea eggs. These are the things that essentially brought about the whole idea of this book and thesis presentation. I remember when I was a small child in Hong Kong, I used to see vendors selling food like this on the street from makeshift carts and stands that could be disassembled and transported away when the day was over. From a young age, I developed a love of street food that has lasted to the present day. I remember eating pan-fried noodles served from a cart on the side of a busy street in the Kowloon District of Hong Kong. Nowadays, I regularly go for tacos and quesadillas from trucks around the South of Market area in San Francisco. Today, the Bay Area is home to a growing and thriving community of street food, yet there is no ideal way of locating these food trucks, carts, and stands in real-time. With FoodCartographer, I hope to fix this problem so that we can all find our own steamed buns and tea eggs.

Personal

95 95

Autobiography
I was born in Hong Kong and moved to San Francisco when I was four. I grew up in the quiet and foggy Sunset district, just blocks away from Ocean Beach. After studying linguistics at UC Santa Cruz and International Christian University in Tokyo, I moved back to San Francisco and began working for a tech company. After several years of wearing different hats at my job, I discovered that I had a passion for design and decided to enroll in Academy of Art University to pursue my Masters degree in Web Design & New Media. The past three years here at AAU have been challenging, educational, at times frustrating, and most of all, rewarding. AAU has taught me countless skills that will guide me in my design career. But being a full-time student while working forty hours a week has taught me things as well: how to manage my time, balance priorities, and function on very little sleep. With my journey at AAU coming to a close, I look forward to many things: graduation, the next step in my career, and finally being able to get some sleep. Eric Lo May 2012

96

ericlo@ericlo.net www.ericlo.net

Vous aimerez peut-être aussi