Presentation GRDS 387 Interface Design Professor Hogan Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
OVERVIEW NavSav began as an opportunity to design an interface for Savannah tourists based upon the research of a graduate studies level Method of Contextual Research group. Through their detailed studies and research findings, we determined the categories of people who commonly tour Savannah, and identified their overall goals and problems in achieving those goals. We determined the main problem to be designing and app that could function for a wide variety of people, each with different interest and needs.
overall organization for the app. Once we had the initial structure, we moved into multiple rounds of wireframe testing, while making edits based upon feedback along the way. Our final designs provide users with the resources to effectively search, navigate, and research all Savannah has to offer, through a simple and easily navigated central source, allowing visitors to better explore and experience Historic Downtown Savannah.
With this in mind, we began to organize and develop user trends and personas that outlined exactly what each level of user might want/ or need in the interface functionality. An important aspect of understanding user wants and needs also came from researching the competition, and reading user reviews. This allowed us to understand what to avoid, and what we should focus on developing. From here, we created scenarios and task flow charts to further arrange our thoughts into specific structural ideas. We began to brainstorm possible navigation categories, sub categories, and
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
STRATEGY
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
STRATEGY | PROVIDED RESEARCH • Research done by a Methods of Contextual Research class and tourism in Savannah • Groups of people who were most likely to visit Savannah, and what their tourism goals are • Which of these tourists are most common or active • What their problems are in seeing, touring, and experiencing Savannah’s downtown area • The most common problem was navigation • A wide range of goals, from seeking historical information and tours, to wanting the local Savannah experience, to experiencing downtown life and popular events. These goals were important in understanding just how diver • Designing an interface that was easily navigated by all ages and technological skill levels • Developed Bi-Polar Maps, which helped show the similarities and differences between each group, which led to developing coherent personas
IDUS 711 | Methods of Contextual Research | D.Mack, J.Spiegel, Y.H. Lin
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
STRATEGY | COMPETITOR RESEARCH
Wunderlist
• Handpicked restaurants and hotspots based on location • Very high reviews • Factor in Average cost, weather
Ulmon Travel Guide
• Lets you pick by category • Sorts either by popularity, price, etc • Offers and offline map • Lets you add places to your favorites
Top 25 San Francisco Attractions
• Finds attractions on map, gives prices, hours
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
When reading customer reviews, we found out many people loved when apps had offline maps, that used little to no data while the app was running. A few other features that seemed important to customers: • Good restaurants within a certain radius of their location • Parking feature that allows users to see nearby parking garages, while displaying price and availability • Other customer reviews but in CONCISE statements (Many people openly complained about reading paragraphs and wasting time when trying to efficiently plan an aspect of their trip
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
STRATEGY | PERSONA 1
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
STRATEGY | PERSONA 2
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
STRATEGY | PERSONA 3
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
STRATEGY | PERSONA 4
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
STRATEGY | PERSONA 5
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
STRATEGY | PERSONA 6
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
STRATEGY | PERSONA 7
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
STRATEGY | STATEMENTS PROBLEM STATEMENT Savannah, GA is a southern city rich with history and attractions. Due to the wide variety of options, the city attracts a diverse group of tourists with unique interests and needs. Confusion often results due to the nature of a historic environment (lack of signage, layout, etc.).
VISION STATEMENT The design of a tourism application for the city of Savannah will give tourists the resources to effectively navigate and research offerings while prompting them to plan their stay and encouraging exploration. These offerings, conveniently centralized in a mobile application, will enhance visitors’ experience through personalization and customization.
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SCOPE
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SCOPE | SCENARIO 1
TOUR SEEKERS/SIGHTSEERS
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SCOPE | SCENARIO 2
LONG TERM VISITOR
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SCOPE | SCENARIO 3
FUTURE SCADIES
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SCOPE | SCENARIO 4
BRIDE/BRIDESMAIDS
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SCOPE | SCENARIO 5
ST. PATTY’S VISITOR
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SCOPE | SCENARIO 6
GIRL SCOUTS
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SCOPE | SCENARIO 7
HISTORY BUFFS
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SCOPE | TASK LIST
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
STRUCTURE
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
STRUCTURE | TASK ANALYSIS Task 1: Find a restaurant and make a reservation
Task 2: Find a restaurant by filtering by Top Student Picks
GO A L/ O U T P U T:
Users will find a restaurant and call to make a reservation.
GOAL /OUT P UT:
Users will find a restaurant from a list of top student picks.
INPU T S
Users will use the EAT tab to select a restaurant. In the restaurant profile, users will use the MAKE A RESERVATION button to call the restaurant.
IN P UTS
Users will use the EAT tab to find a list of restaurants. Users will use the TOP PICKS filter option to select STUDENTS.
A SSU M PT I O N S :
Users have used a search engine or forum to select items from a list. Users are familiar with the call sequence on their device.
AS S UMP T ION S :
Users have used a filter function in a search engine or forum.
ST EPS:
1. Users select the EAT tab from the bottom navigation. 2. Users select a restaurant from the list. 3. Users select MAKE RESERVATION. 4. Users select CALL or ONLINE. 5. Users call the restaurant.
STEPS:
1. Users select the EAT tab from the bottom navigation. 2. Users select TOP PICKS. 3. Users select STUDENTS. 4. Users select APPLY. 5. Users select a restaurant from the refreshed list.
INST RU C T I O N S F O R U S E R :
Select a restaurant and call to make a reservation.
IN S TR UCT ION S F OR US E R :
Find a list of restaurants and filter to only view the top restaurants picked by students. Select a restaurant from the list.
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
STRUCTURE | TASK FLOWS Task 1: Find a restaurant and make a reservation
Launch App
Home Page
MAP
SEE
EAT
DO
Restaurant List Display
STAY
Direction
Choose Restaurant
SEARCH
Call
IOS Call Sequence
Online
External Page
Make Reservation
Individual Restaurant Info
“Like” Restaurant
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
PLAY
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
STRUCTURE | TASK FLOWS Task 2: Find a restaurant by filtering by Top Student Picks Launch App
Home Page
MAP
SEE
EAT
DO
STAY
PLAY
SEARCH
Restaurant List Display
Choose Restaurant
Filter
Student’s Picks
Local’s Picks
Individual Restaurant Info
Picks
Users’ Picks
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
Preferences
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SKELETON
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SKELETON | SITE MAP
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SKELETON | WIREFRAMES PAPER PROTOTYPES
HOME Our original Home Screen was extremely simple, containing only images, the weather, and a calendar. As we progressed, more important elements originally assigned to the MORE tab began being added to the home screen, such as restrooms, parking, and calendar options, personalizing the user experience.
version 1 version 2 version 3 version 4 version 5 GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SKELETON | WIREFRAMES PAPER PROTOTYPES
MAP The Map provides navigation from location to location, as well as searching locations, and viewing nearby locations, organized into different categories. These categories are EAT, SEE, DO, STAY, PARKING, and RESTROOMS. After testing, we decided to include a pop-up of a condensed location profile, which gives more options to the user.
version 1 version 2
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SKELETON | WIREFRAMES MEDIUM RESOLUTION PROTOTYPES
Homepage
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
Calendar - Date
Stay - List
See - Preferences (Locations)
Play - Coupon Banner
Map - map w/pinpoints
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SURFACE
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SURFACE | VISUAL IDENTITY
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SURFACE | VISUAL IDENTITY
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
C90 M75 Y41 K32 R41 G61 B89 Websafe #283d59
C0 M67 Y42 K0 R250 G120 B120 Websafe #f97777
C53 M59 Y0 K0 R143 G115 B222 Websafe #8e72dd
C10 M33 Y82 K0 R229 G173 B77 Websafe #e5ad4c
C76 M43 Y16 K0 R69 G128 B171 Websafe #447faa
C53 M0 Y44 K0 R105 G217 B173 Websafe #68d8ad
Header | Monsterrat
Bodycopy | Open Sans
ABCDEFGHIJKLMNOPQRST UVWXZ abcdefghijklmnopqrstuvwxz 1234567890`~!@#$%^&*()_+={}|:”<>?[]\;’,./
ABCDEFGHIJKLMNOPQRSTUVWXZ abcdefghijklmnopqrstuvwxz 1234567890`~!@#$%^&*()_+={}|:”<>?[]\;’,./
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SURFACE | FINAL RESULT CALENDAR
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SURFACE | FINAL RESULT MAP
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SURFACE | FINAL RESULT
EAT
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SURFACE | FINAL RESULT
SEE
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SURFACE | FINAL RESULT
DO
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SURFACE | FINAL RESULT
STAY
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SURFACE | FINAL RESULT
PLAY
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SURFACE | FINAL RESULT
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
SURFACE | FINAL RESULT
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny
THANK YOU!
GRDS 387 | Interface Design | Professor Hogan | Spring 2016
NAVSAV | Charlie Yip | Elodie Nip | Emily Mueller | Meredith Denny