ZooRide
Dedicated app for planning a zoo trip at Taronga Zoo.
UX/UI Design
2023
The brief tasked us with creating an autonomous vehicle pod system to enhance navigation during zoo visits, making them more efficient, engaging, and enjoyable.
The result was ZooRide, an innovative autonomous vehicle pod system for Taronga Zoo visitors, providing transportation and interactive wildlife experiences. The system includes a mobile app, website, and tablet integrated into the pod.
Project Overview
Role
Competitor Analysis
Ethnographic Research
Mobile UI Design
Usability Testing
Process
Timeline: February 2023 - May 2023 (14 weeks)
Tools: Figma, Miro, Photoshop, Balsamiq Wireframes
Subject: University coursework (as part of a group) for Interface Design
Collaborators: Li Lin, Lily Wang
Problem Statement
& Objective
Without following a strategic route, zoo visitors miss opportunities to see certain animals and scheduled shows.
Could autonomous driving transform zoo transportation? ZooRide's platform provides a comprehensive system to assist first-time visitors, those with limited mobility, and families with children in navigating Taronga Zoo, ensuring an organized and engaging experience. The mobile app aims to supplement visitors by streamlining the planning process, bringing back control to its users by tracking available destinations for cart route booking.
Taronga Zoo App
Online Ethnography
Competitor Analysis
Questionnaire
Multi-methodology research.
In 2018, Taronga Zoo heavily invested in revamping its mobile app to boost engagement, especially with millennials.
Taronga Zoo's revamped app has enhanced personalised visitor experiences by improving navigation and access to information. Key features include an interactive map and barcode scan motion sensors for learning at exhibits. Our literature review linked Taronga Zoo's technological investments to declining tourism due to the pandemic.
Given this insight, how can we address the significant challenges zoo visitors face, and how will they benefit from an autonomous zoo vehicle? To gain a comprehensive understanding of user frustrations and pain points, we employed a multi-method research approach, including online ethnography, surveys, and competitor analysis.
Survey conducted on a sample of 26 individuals within our target group.
We used affinity diagramming to break down our ethnographic research findings and identity common themes.
How might we implement an autonomous vehicle pod system to enhance efficiency, engagement, and organisation in planning and navigating zoo visits, both before and during the visit?
PROBLEM SPACE
What ideas to go forward with?
Personas (meet Kate and Sakura!) and the jobs-to-be-done framework helped our team to narrow down key features for the zoo cart platform. Jobs-to-be-done specifically helped us uncover users' goals and what they aim to accomplish. Now, how can our user flows effectively address these opportunities? We established three user flows for each device that cater to the following features:
Mobile App Route Planning (Recommended and 'Create Your Own')
Website Cart Booking
Accessing educational information about animals during the visit on a Tablet
Iterative process.
Cart route planning needs to offer flexible, personalised options and tailored itineraries for different visitor demographics (families, wildlife enthusiasts).
Guided by our research outcomes, we engaged in a brainstorming session to develop low-fi sketches and amass feedback. By testing ideas and prioritising features, my attention shifted to optimising the mobile app, which serves as users' first interaction with the zoo. How can I make the planning process smooth and adaptable to varying needs? For instance, while Kate might seek a pre-defined route tailored for families, Sakura, constrained by time as a traveller, may prefer the flexibility of creating her own route by selecting specific animals to visit.
First iteration (hand-drawn wireframes)
Second iteration (mid-fidelity prototype using Balsamic)
2 key improvements in my design.
To ensure a seamless flow in customising a cart route and adding animal shows and talks, I began making key changes when transferring my low-fi prototypes into digital wireframes. Through my peer feedback session, I made the following improvements:
"I find it difficult in locating the route I personalised both prior to booking and after saving it."
In response to unclear naming, I added labels and content inline for inputting date and route name. This improvement seamlessly integrates with the cart booking website, simplifying the route selection process and makes it easier for users to find previously planned routes more effortlessly.
"When scrolling, I’m confused whether this animal show or talk has already been added to my custom route.”
I modified the 'add' and 'added' button by employing different shape and colour as indication to enhance clarity for users when browsing through the destinations.
Wireflow to visualise how users will interact between pages of ZooRide.
User Testing.
User testing was carried out with my high-fidelity prototype. By adopting the think aloud technique for usability testing, I was able to observe and identify problems with the layout and navigation, leading to an overall great feedback.
First-time users require content inline tooltips to guide them through the process of selecting a recommended or customisable route option.
Usability Test
Major improvements of removed menu and carousel of arrows following the rule of continuity.
Adjusted layout to improve visual hierarchy with more familiar icons.
Heuristic Evaluation
Added help and documentation with text under subheading to guide first-time users as tooltip.
Error prevention by adding a "cancel" button for users to discard the planned route. To eliminate error-prone conditions, the "save" and "cancel" buttons have a visual distinction.
Provided a pop-up giving a confirmation option before the user commits to the cancelling action. Affirmative action text clearly indicates the outcome.
The Style Guide & Design System
Final Product - the outcome and the big idea.
01
Centralise vital information about Taronga Zoo.
Users can browse up-to-date events and announcements with a concise overview of saved cart routes and upcoming cart bookings on the home page.
Account profile with route history are visible and editable for users to see progress.
02
Receive and explore recommended cart routes to your specific interests & preferences.
Monitor the weather to help you select an optimal date for a meaningful zoo visit.
Browse and search through recommended cart routes such as family friendly, conservation trail, and educational.
03
Craft your own cart route with ample information and precise locations for enhanced convenience.
Save your cart route for future cart booking on the website by entering intended visit details.
Share it with your companions for convenient reminders before your zoo trip.
04
Review your personalized cart route to ensure it meets your expectations.
Users can customise their cart route with talks, shows, and animal sites.
Map location, relevant information and frequently planned destinations assist users in decision-making.
Key Takeaways and Learnings.
01 When it comes to collaboration on a system together but being responsible for our own device, I found that consistency across devices with predictable and uniform visual elements is crucial. We developed the design system collaboratively to ensure buttons, images, fonts and colours utilised were harmonious and in tune with one another.
02 The importance of iteration became evident. In the beginning stages, I began with sketches to explore different options that would align with user goals, especially in planning a cart route prior to visiting the zoo. Incorporating the feedback from peers, mentors and users during the refinement of my high-fidelity prototypes proved invaluable.
03 The significance of information architecture and visual hierarchy. Validation from user testing was vital in logically and intuitively organising information for the digital application. Visual cues like colour, size and contrast were important in improving clarity, actionability and affordance. By accentuating key elements, creating hierarchy and categorisation, users were able to find information more easily and efficiently.