Interactive map design concept

Summary
Case Study II: redesign an iOS mobile app with a primary focus on developing Live GPS Map to improve a users experience with accurate real time navigation during their visit at Woodland Park Zoo.

My role

Interaction Design, Visual Design
Tools: Pencil, Paper, Sketch, Adobe Illustrator, InVision

Project overview

For the purpose of my Case Study II, I will develop the next steps as Interaction Design and Visual Design on iOS mobile for these screens: Live GPS Map Screen, Events Screen, Animal List Screen focusing on our client’s primary goal to improve user’s experience when they’re at Woodland Park Zoo. Case Study I, my teammates Taylor Colledge, Linda Varanko, and I completed these artifacts: User Research, Information Architecture, Usability Testing, Wireframe Prototype which will be utilize to make design decisions for Case Study II.

About Woodland Park Zoo

Founded in 1899, Woodland Park Zoo has sparked delight, discovery and unforgettable memories for generations of Northwest families.

Business goal: Allow users to enjoy and share in their experience at the Woodland Park Zoo.

What can we do to improve the user experience and meet business needs with a mobile app?

Focusing on user navigation flow and improving Woodland Park Zoo’s map by creating an functional interactive map.

Persona Prototype

As Researcher from Case Study I, I conducted user interviews and surveys to develop our client’s ideal proto-persona, Laura Smith which I’ll base my design decisions on.

Laura is 41 years old and she’s a mother of two children. She visits Woodland Park Zoo reguarly, but she finds their map to be inaccurate and confusing.

She was unaware mobile app existed and currently does not have any incentive to download if the map can’t correctly direct her to items on the map like the animals, bathrooms, dining, water, etc.

Customer story

As Interaction Designer, my ultimate goal was to outline the step-by-step process users take to complete the tasks that focuses on improving user’s experience at the zoo.

My strategy for doing this was to re engage in development of persona artifacts based on my previous research in Case Study I so we can know which tasks are most important to users. Once I had prioritized the tasks, I would be able to outline the steps necessary to complete them and design missing screens to fill in the gaps in the prototype.

Task Flow for Launching GPS to Navigate Map

I further developed the prototype interactive map that was missing the Live GPS functionality that our research proved was important to the personas and users.

I listed out the steps to complete, then sketched out how the user would navigate through them so we all understood what it took for the user to complete the task of adding a product to their cabinet and setting up a routine for taking that supplement.

Competitive Analysis

The client’s website represented their branding, but the visual appeal and functionality on the mobile app their customers wanted to see.

I researched other zoo or themed park iOS apps like Disneyland and San Diego Zoo mobile app.

These Mobile apps focused on accessibility and layout of their apps. They had simple and large buttons, text, and photos to make users like Laura’s experience more enjoyable and stress free.

Visual Mocks

Initially, I tested a few different visual designs based on Woodland Park Zoo’s existing website to capture color themes and styles. After testing, I’ve finalized a cohesive style that best represented their brand.

*Map Image, Animal Images by Woodland Park Zoo

“I want to see animals with my kids - hard part is knowing where the animals are.”

- Woodland Park Zoo Visitor

Design

Screen Design

Once the steps were mapped out for GPS navigation, I designed the screens to show the content and actions available on each page as sketched out in the task flow.

Mapping Layout

Layout from task flow sketch with a slide show of user interaction on the right displayed.

Define

After conducting a usability testing, I’ve validated a handful of designs based on user’s feedback. Iterations listed below are the user insights I wanted to highlight in my findings for the Event List, Animal List, and Map iterations.

Event List Iteration

1. Gray Event Items indicated "past events."

Animal List Iteration

2. Following iOS HIG for listing items

Map Icons

3. Users want "Event" as an option to navigate to on the map

Outcomes

Results

The mobile app reflected the Woodland Park Zoo branding and improved user’s experience by with large graphics, buttons, and accessibility of information. Users can easily navigate through items on the map and events on the schedule.

Next Steps

From previous research, this concept design for Woodland Park Zoo mobile app is a follow-up to focus on visual design, the next step would be to test, refine, and iterate wireframes based on user’s feedback.

The next step is to audit the functionality on how the mobile app performed and make adjustments to continue to improve the features to make Laura’s experience as the zoo enjoyable and easy.

Lessons I Learned

I learned that when the goal is improve users experience when they are visiting, Map needs to be Interactive and incredibly accurate to the user so they can navigate stress free and focus on enjoying their experience. I also learned that environmental conditions does alter design decisions.

For an example, users have a hard time viewing mobile screens if the weather outside is extremely sunny. Having the darker backgrounds will help users see their mobile screens better and save battery life during their visit.

Another major insight that was not identified due to lack of funds to research who our users are