Seek

Page 1

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.