P
PRO C ESS BOOK by Esmeralda Ruiz
P
P
GR 360: Nature Of Interaction Taught by Anne Kitzmiller Fall 2015 | Modules 1-15
TA B L E O F C O N T E N T S
01 FINDING THE PROBLEM Design Brief Research Brief Personae 09
APP CONTENT User Journey Design Principles Sections & Elements
15
ELEMENT COLLAGES Element Collages 1- 3 Final Element Collages
21
INITIAL SKETCHES Screen Sketches Paper Prototypes Prototype User Testing
31
INVISION PROTOTYPE Invision Prototype
37
VISUAL DESIGN CONCEPTS Visual Design Concept 1 Visual Design Concept 2 Logo Design
47
VISUAL DESIGN Visual Design Refinement
53
FINAL DESIGN Final Visual Design
61 FINAL PRESENTATION Slides
P
P
P
P
FINDING THE PROBLEM Who is the target audience and what are there needs?
P
P
P
P
DESIGN BRIEF
I am building... An app that guides its users to public spaces For... Adults that are searching for a public area that can be useful to their immediate or current needs. In order to... Make individuals lives easier and feel more in control of taking care of their needs when it comes to being in unfamiliar locations. In a world where... More socially driven spaces are popping up and the government is making more of an effort to support families as well as communities. For example, parklets, family bathrooms and dog parks.
RESEARCH BRIEF
SCREENER + + +
20 - 60 year old Own a smart phone That travel at least 100 miles away from their home
OBJECTIVES + Figure out first what is the main public space they look for most while in an unfamiliar area +
Then ask if they figured it out by asking locals or by using an already existing app
+
If it was an app, was it successful and an easy experience. If not what was it that made it difficult.
+
Also make sure to find out if they prefer speaking with locals rather than using their phone. It could be that they like the human interaction more.
+
Ask if there are certain things about the place that they would like to know. For example safety, cleanliness or if there is electricity/wifi available. Make sure to ask if pictures posted by other users would be helpful when searching.
Any additional insights would be great too.
+
INTERVIEWS
Katie Ayala, Stay At Home Mother 27 years old living in Main, US
Anne Marie, Receptionist 25-30 yrs. old living in California, US
Joel Ford, Student 29 years old living in California, US
Karen Ford, Computer Analyst 54 years old living in Maryland, US
Allen Roberts, Stay At home Dad 57 years old living in Maryland, US
SCRIPT Hello, my name is Esmeralda Ruiz and thank you very much for taking the time off your busy day to give me a few minutes to talk about finding useful public spaces. I am working on a design project about finding public spaces in a location you might be unfamiliar with. First I would like to know how you find public spaces like a dog park or bathroom in unfamiliar parts of your town or a new city. Then I would like to find out what your experience has been and how it can be improved. What are the most common public spaces that you find your self using? (In case) Public space could include a bathroom, park and even beach. When you are away from home and find your self needing a public space how do you find it? Do you prefer to ask locals or find it through an app? What are you currently using and is it successful? If not, is it difficult to use or what makes it frustrating? When searching for this particular space, what about it do you think you would like to know? What would be an easier way to find these places? After you find them do you remember them or do your write them down somewhere for next time? Would you like to share your experience of the place so that other can also enjoy it or even to warn them to stay away? Do you have any additional thoughts that on how it would be easier to find public spaces? Thank you for your time and have a great day.
nature of interactions
3
FISHING ENTHUSIAST
PERSONA’S DETAILS + 57 years old + Retired + Father of two + Short Distance Travel HIS TOOLS + Google maps (reads it does not let the map tell him where to go) + Word of Mouth + Government Websites HOW HE DOES IT + Looks for common brand gas stations to stop by to be safe + Searches government locations on Google maps before he visits the location. FEATURES FOR HIM + Picnic areas + Bathrooms + Fish cleaning areas + Handy cap + Up to date fishing reports WHY HE WOULD LOVE IT + Navigation + Up to date useful information + Images by users + Community based + Reviews by users
“It is all about having up to date information about fishing reports and handicap availabilities” He wants it because... He will know what the place offers the best fishing that day and if we will be able to get around with his wheelchair. ALLEN ROBERTS Mr. Roberts loves fishing and now that he is retired does it all the time. He uses Google maps to read a map not so much to be told where to go. Government website are a great tool because they let him know information about the places services like parking, bathrooms, fish cleaning stations and if there are handicap availabilities. He wishes that the sites would inform him about fishing reports for the day. They seem to be out of date by a couple of months. When his children were young he never found changing tables for his children. In fact he would have to change them in his car or wait till they were home. He says that family bathrooms are found a lot more now and doesn’t see it as big as a problem like when his children were young. difficult for men now than when he was a young father.
OUTDOORSY MOMM Y
PERSONA’S DETAILS + 27 years old + Stay At Home Mother + Part Navy Wives + Long Distance Travel HER
TOOLS + Facebook (Navy Mommy Groups) + Google + Word of mouth
HOW SHE DOES IT + Checks mommy groups on facebook + Comments on them if she has questions + Posts places she recommends FEATURES FOR HER + Real moms posting + Pictures posted from users. + Its relatable and human + Very up to date information WHY SHE WOULD LOVE IT + Navigation + Useful information + Images by users + Profile based + Community based + Reviews by users + Available in many cities
“It’s about having good sized family bathrooms and is my family going to be accommodated” She wants it because... She will know what the place offers and if it is family friendly. It is also important to know what other moms think of it. ELIZABETH JONES Is part of the navy spouses groups on Facebook. Her hectic lifestyle of moving from town to town every few years makes it difficult to really get to know a place. When her family moves she checks on the locations navy spouses Facebook groups, to find the best grocery stores, (dog) parks and bathrooms. These women post warnings about where to stay clear from and recommend places to one another to make their lives easier. This eliminates using Yelp and other search engines all together. Google is still used for those special occasion but some of the important information that a mother needs is not always provided in Google. For example, changing tables in the bathrooms or if they place is family friendly. Her hobbies include walking on public walkways, going to the park and reading books when her little boy is a sleep. Most of her days are filled with everyday chorse and keeping up with her almot one year old son.
nature of interactions
5
D O G LOV E R
PERSONA’S DETAILS + 54 years old + Computer Analyst + Mother of three + Does not travel much HER TOOLS + Word of Mouth (talk to other dog owners) + Website Humane Societies + Google HOW SHE DOES IT + Looks online for a good dog park + Asks friends + Feels safer in brand name places when traveling a lone (bathroom) FEATURES FOR HER + Picnic areas + Bathrooms + Drinking Fountains + Sand, dirt or grass for the dog + Up to date information on big dogs vs. little dogs WHY SHE WOULD LOVE IT + Navigation + Up to date useful info + Images by users + Community based + Reviews by users + Different dog sections
“It is all about knowing if the dog park is safe, has amenities for the dogs and a place to sit.” Se wants it because... She will know if her dogs will be safe in that dog park. It is also important that she knows if there is shade, a siting area and a bathroom close by. K ARINA FORD Mrs. Ford takes walks her dogs at various dog parks. She usually finds these places through word of mouth. In the past she has fostered dogs in her home and its very important to know that the place she is taking her dogs and her foster dogs is safe. For example, if there are two or three different sections for different size dogs. Is the place close to a bathroom, does it have trees that provide shade and do they have water fountains for the dogs. When her children were young she had a difficult time finding places where both her and her husband could change their kids diapers. It would mostly be Mrs. Ford’s responsibility to change them because of the lack of facilities. Now that she is older she is seeing more public family bathrooms and thinks it would be wise to know if they are clean before walking to wards them. It is even more important now that her daughter will soon give her a granddaughter.
P
P
P
P
APP CONTENT User Journey, Design Principles, Sections and Elements
P
P
P
P
USER JOURNEY
AWARE + OUTDOOR ADVERTISEMENT - Posters on bus, bus stops, BART - Billboard, News Stands - Community Benches, Building Walls + INTERNET ADVERTISEMENT - Blogs, Google ads, Online Shopping ads - Pinterest, Facebook, Twitter, Podcasts - E-magazines, Online Newsites + OTHER APPS - Ads on app games, App Store + PRINT - Magazines, E-magazines, Newspaper - Press Release, ACQUIRE/SET UP + DOWNLOAD APP - Read app info on App Store +
WELCOME SCREENS - Read and watch welcome screens
+
SIGN UP - Use social media to sign up or email
+ CREATE PROFILE - Add profile Picture - Type in personal Information - Answer questions like: What is their favorite public spaces? Ex. Handicap availabilities, family bathrooms - Allow App to use GPS locater - Change App settings - Accept or reject App alerts FIRST USER + EXPLORE - Look through home page Familiarize with icon menu selections,
+ SEARCH - Look for a public space to see how the app works - Read some reviews posted by users +
HOME PAGE Look through top rated (by users) public spaces in the area. - Check out recommended locations - Find out the filter options - Look through photography catalogs of best locations to visit
FULLY ADOPTED + SEARCH - Uses the search and filter options +
CHECK IN - Checks in and posts pictures of their experience and the location.
+ CONTRIBUTES - Adds information about the space on the space’s profile (like Wiki) +
POST REVIEW - Leaves a review on the locations profile, posts a rating and recommends it.
+ SHARE - Shares his review and rating in social media + INVITE - The user invites friends/family to visit this new found location, which also invites them to use the app. +
BADGE WINNER - Checks out and shares all the badges he/she has won over the time the app has been in use.
DESIGN PRINCIPLES
THE CONFIDENCE YOU NEED We are living in an era where travel is done for both work and pleasure that constantly exposes us to areas that are unknown. In order to escape our fast paced lives we visit public spaces to distress and enjoy what our surroundings have to offer. Being certain of where to go and what it offers, makes us more confident about stepping out into the unknown. LIVING AND FEEL COMFORTABLE With us you will never feel out of place. People will know the free wonders these new places have to offer. The confidence we bring, will push you to feel right at home, know where things are and what to expect before getting there. This gives you time to relax, mingle with the locals and bring out your inner explorer. Its all about the simple things in life.
COMMUNITY UR Block Zone Scope Ambit
Localei Local i
Domain Range
Sector Haunt
TO ARRIVE Niche Site
Catch
Go to
bob up
SPACE Spot Reach
SEARCH Sift Dig Suit Scoop Seek Scan Scout Spade
HERE FOR YOU, AT HOME AND AWAY Our mission is to be there for you, your loved ones and, yes, even your pets. We believe that you should always feel comfortable and in control, whether you are in your own neighborhood or traveling. Life is hectic enough to have to wonder if the public space you are visiting will be able to accommodate your needs. MADE FOR ALL SORTS OF EXPLORERS Its not about being a traveler but rather living without barriers and concerns. Finding places that will make you happy, ease your life and help you feel certain about your chosen locations, is what we are all about. The more you explore the bigger your world will get and eventually you will also help others find their way to those perfect public spaces.
nature of interactions
11
SECTIONS & ELEMENTS
DASHBOARD - Search by name, location, amenities - Info on users favorite public spaces - Top public spaces voted by users in the area - Friends they recommend the user to visit - Up to date news or warnings on certain public spaces posted by users/or government FRIENDS -
Recommendations Friend Search Friend contact list Invite Message Meet Ups Who is near you search. Delete/Block Friends Profile Contact information
USER PROFILE - Profile Picture - Personal Information (name, date or birth) - Questionnaire
Ex: What is your favorite public spaces?
Are there any specific amenities you require?
Ex. Handicap availabilities, family bathrooms
- Badge collection
Won with check ins, reviews, and recommendations
- Favorite places - Photo gallery - Check In history
LOCATION PROFILE - Profile Picture - Photo gallery - Reviews / Rating - Address and opening hours - Handicap amenities - General amenities
Ex. Bathrooms, parking, wifi, etc.
- Warnings - Events
ACCOUNT/PREFERENCES - Location permission - Feed settings - User name / Email / Password change - Map metric/American - Notifications - Privacy - Secure - Terms & Agreement - Support / FAQ - Deactivate / Delete - Link social media - Language SEARCH
MODE - Search by name, location, amenities - Change filter settings - Map option - Directions uses (Google Maps) - List of recommended locations
icons, distance from user, photo, and rating.
The list includes times of opening, amenity
nature of interactions
13
P
P
P
P
ELEMENT COLLAGES Color, photography, typography and iconography.
P
P
P
P
E L E M E N T C O L L AG E S 1
POSSIBLE COLOR PALLETE
POSSIBLE TYPOGRAPHY
Headline Chaparral Pro, Semibold Caption
Subhead Neuzeit S LT Std, Book
POSSIBLE INPUT FIELD
USER NAME
Lorem lean startup ipsum product market fit customer development acquihire technical cofounder. User engagement A/B testing shrink a market venture capital pitch deck. This is an example of a text link Neuzeit S LT Std, Book
POSSIBLE ICONOGRAPHY
POSSIBLE MAP STYLE
POSSIBLE BUTTONS
Sign In
POSSIBLE PHOTOGRAPHY
E L E M E N T C O L L AG E S 2
POSSIBLE COLOR PALLETE
POSSIBLE TYPOGRAPHY
Headline Caecilia LT Std , Roman
Subhead Proxima Nova, Regular
POSSIBLE INPUT FIELD
USER NAME
Lorem lean startup ipsum product market fit customer development acquihire technical cofounder. User engagement A/B testing shrink a market venture capital pitch deck. This is an example of a text link Proxima Nova, Regular
POSSIBLE ICONOGRAPHY
POSSIBLE PHOTOGRAPHY
POSSIBLE MAP STYLE
POSSIBLE BUTTONS
Sign In
nature of interactions
17
E L E M E N T C O L L AG E S 3
POSSIBLE COLOR PALLETE
POSSIBLE TYPOGRAPHY
Headline Memphis LT Std, Medium
Subhead Cronos Pro, Display
POSSIBLE INPUT FIELD
USER NAME
Lorem lean startup ipsum product market fit customer development acquihire technical cofounder. User engagement A/B testing shrink a market venture capital pitch deck. This is an example of a text link Cronos Pro, Regular
POSSIBLE ICONOGRAPHY
POSSIBLE MAP STYLE
POSSIBLE BUTTONS
Check In
POSSIBLE PHOTOGRAPHY
F I N A L E L E M E N T C O L L AG E
COLOR PALLETE
TYPOGRAPHY
Headline Caecilia LT Std , Roman
Subhead Proxima Nova, Regular
INPUT FIELD
USER NAME
Lorem lean startup ipsum product market fit customer development acquihire technical cofounder. User engagement A/B testing shrink a market venture capital pitch deck. This is an example of a text link Proxima Nova, Regular
POSSIBLE ICONOGRAPHY
PHOTOGRAPHY
MAP STYLE
BUTTONS
Sign In
nature of interactions
19
P
P
P
P
INITIAL SKETCHES Figure out the placement, type of design elements and user flow.
P
P
P
P
SCREEN SKETCH
PA P E R P R O T O T Y P E 1
nature of interactions
23
nature of interactions
25
PA P E R P R O T O T Y P E 2
nature of interactions
27
PROTOT Y PE USER TEST ING
Test 1
Critical Errors Concept 2 needs an urgent button, the map is too difficult to read for an opening screen. Key boards need to be added to some of the screens.
Critical Errors The delete button should be smaller. In fact the whole settings/account screen should be hamburger style and much smaller.
Interactions Icons make sense but the map might be too intimidating for the start of the app.
Interactions She likes the playfulness of the one with the map. In her eyes it is much more friendly, ;and the use of icons makes it more fun. While the other is too type focused and shows the app to be too serious.
Unexpected Results Users don’t really differentiate between public spaces and commercial spaces. Tester requested an inclusion of fire stations and safe places. Test 2
Critical Errors Seek cover/intro page is too ambiguous. The person does not know what the app is about the moment they open it. The type isn’t great either. The user should be able to search for their friends and see if they are also involved in the app. Interactions When searching for a public space the results should have some quick information about the areas they are interested in visiting. They should then have the option to see a full profile page, if need be. There was a question that came up on the difference between picnic areas and camping. Preferred the map intro page over the hamburger menu. Unexpected Results Tester requested an inclusion of swimming pools to be added as a category. In the filters they also requested to have the inclusion of campfires and whether its smoking friendly or not.
Unexpected Results User wasn’t sure the difference between parks and picnic areas. She requested that I add sight to see and travel too in the area as well as tips about the places. Shorter than reviews and posted by the app not the users. A sort of collective of the reviews posted by the users. Test 4
Critical Errors Needs more pictures on the profile. So that is the first thing you see rather then having to tap on the photo icon and then go to the albums. In other words it needs a quick photo view section. Interactions Tester thought that too much emphasis on maps is too serious and can confuse those that do not read maps so well. On the other hand she wanted to see more emphasis on imagery. She also wanted to know if they places had parking or not. Unexpected Results Tester wants to see places that are dangerous at night or what places go from safe to dangerous during the day. Tester requested to have in the filters the option of the place being bike friendly.
nature of interactions
29
P
P
P
P
VISUAL DESIGN CONCEPTS Same idea two looks.
P
P
P
P
IN V ISION PROTOT Y PE
Intro and Dashboard
Urgent Seek
Handicap Accesible
nature of interactions
33
Camera Feature & Profile
P
P
P
P
VISUAL DESIGN CONCEPTS Same app two visual presentations.
P
P
P
P
V I S UA L D E S I G N C O N C E P T 1
Intro, Dashboard, Urgent Seek & Profile
Camera, Favorites & Account
nature of interactions
39
V I S UA L D E S I G N C O N C E P T 2
Intro and Dashboard
Profile
nature of interactions
41
Location Profile, Account & Favorites
Camera
nature of interactions
43
LOGOS
nature of interactions
45
P
P
P
P
VISUAL DESIGN Checking the visual flow, usability and refining iconography.
P
P
P
P
nature of interactions
49
nature of interactions
51
P
P
P
P
FINAL DESIGNS Every screen on InVision
P
P
P
P
F I NA L V I S UA L D E S I G N
Intro & Dashboard
Intro & Location Profiles
nature of interactions
55
Seek
Profile
nature of interactions
57
Urgent Search, Place Profile & Camera
Settings & Favorites
nature of interactions
59
P
P
P
P
FINAL PRESENTATION Slides
P
P
P
P
nature of interactions
63
nature of interactions
65
nature of interactions
67
P
P
P
P