WOODLAND PARK ZOO
ROLE: Information Architect and Visual Designer
DURATION: 2 week sprint
TEAM: Myself, Christine Cranston, and DeirDre Rohr
TOOLS: Pen & paper, Omnigraffle, Sketch, Adobe Photoshop, InVision, cute animal pics
DELIVERABLES: Competitive analysis, contextual inquiry report, persona, user flows, wireframes, high fidelity mockups, branding strategy, and style guide
NOTE: This is a concept iOS app redesign of Woodland Park Zoo's current app
Summary
ABOUT: Woodland Park Zoo is a zoo in Seattle, Washington. It is home to over 1200 species and has 1 million
visitors per year.
CHALLENGE: Woodland Park Zoo's current app has major usability issues due to convoluted navigation and lack of content organization. Our goal was to identify main task flows and improve usability.
OUTCOME: The overall app structure was greatly simplified, giving focus to the popular but under utilized interactive map and restructuring the navigation to make finding the events schedule easier.
LESSONS LEARNED:
When project planning, allow some flexibility in the schedule for unexpected events
Focusing on user needs while working within the business's or organization's needs provide design direction, especially in a short timeframe
PROCESS
DiscoverY
COMPETITIVE AND COMPARATIVE RESEARCH
We evaluated like apps to determine the most common features and compare them to Woodland Park Zoo's current app offering. She made note of the best and worst features of each.
COMMON FEATURES
Easy navigation
Events schedule
Interactive map
Ticket purchasing
CONTEXTUAL INQUIRY
To determine the current app's pain points, we conducted contextual inquiries with four usability experts, focusing on the specific tasks.
MAJOR PAIN POINT
All users reported having a difficult time navigating to the interactive map and finding the events.
TRIP PLANNING
We asked users how they would normally plan and share a trip to the zoo. Most users said they would:
Only use the app once at the zoo, specifically for the interactive map
Purchase tickets through the website or at the zoo
Post to social media through the corresponding apps
These findings, along with the competitive and comparative analysis guided the direction of our designs.
USER INTERVIEWS & FEATURE MATRIX
To create our persona, our team completed seven user interviews, one affinity map, and one feature matrix.
PERSONA
We created our primary persona, Jess usinf her needs and frustrations to guide the redesign.
Jess, mother of two
Jess and her family love the zoo and visit at least three times a year, as it is an enriching experience for the entire family.
Because she works in tech, she wants to keep her family time as screen-free as possible and zoo visits are the perfect.
She believes technology should be effortless and not rule the experience. This means layouts should be simple and clean, with clear choices to accomplish tasks.
DEFINE
SOLUTION
Using our research findings, we will simplify the current app to highlight the interactive map and events schedule.
PROBLEM
Users cannot easily find the zoo map, events schedule, or service locations (restrooms), causing frustration and abandonment.
DESIGN
We developed user flows, paper prototypes, and wireframes of the redesigned app. As the information architect, I worked with her to reorganize the app content and restructure the navigation. We made major changes to the design.
PAPER PROTOTYPES
WIREFRAMES
We usability tested the paper prototypes with five users and incorporated the feedback into the initial wireframes.
INFORMATION ARCHITECTURE
To help serve our persona's needs of a simple and clean layout in a task oriented app, the current app needed significant restructuring.
While I considered doing a card sort, the current app's site map was so convoluted and redundant, the card sort would not help. I relied on our research findings and user flows instead.
There was a fairly drastic change.
BRANDING STRATEGY & VISUAL DESIGN
After surveying similar organization's and business's brand strategies, including the Seattle Aquarium and that Pacific Science Center, I determined Woodland Park Zoo's branding strategy was on par with their competitors for their website.
However, their current app has very little brand consistency with their website.
To fix this and give our persona a consistent experience, I incorporated the current color palette and logo into the app, using the bright green as a callout and highlight color throughout.
HIGH FIDELITY MOCKUPS
Using the wireframes and feedback, I created the following key screens following the best practices of Apple's HIG.
The map is the home screen, providing easy access for reference.
CALLOUTS
2. Callouts provide easy access to location of events when selected from the events schedule.
1. Buttons at the top of the map allow users to tap to highlight the selected amenity closest to their location.
CLICKABLE PROTOTYPE
Next Steps
This redesign is an MVP, focusing on the main tasks users needed. Our next steps include:
Creating a secondary persona
Usability testing the high fidelity designs
Adding features like animal and conservation information
Lessons LEarned
Visual Design
My visual design skills grew by leaps and bounds in this project. I used both Sketch and Adobe Photoshop. I learned how much I enjoy visual design and look forward to continue growing in this area.
Project Management
This was a very short sprint with many deliverables. As project manager, I developed an aggressive timeline, which proved to be too aggressive and our team could not keep up the relentless pace. We were flexible and made it work, but in the future I will definitely consider the work pace more carefully.
OTHER WORK
iSpot.tv
Data Analytics Dashboard
Petworth Fitness
Responsive Website
Nationwide Insurance
Retirement Solutions Tools