2023
City zoo guide app concept
The project shows my common design approach in a simplistic way.
Project idea
Walking around our city zoo I noticed there's very few info about donation options, the habitat displays have fairly limited descriptions, and many habitats stay undiscovered on the outskirts.
All this impacts social opinion on our zoo, which leads to decreasing number of visits and decreasing profits.
So I came up with this concept which is aimed to involve visitors into learning more about the animals and the work zoo does to save extincting species, as well as participate into fun events and activities taking place in the zoo. The expected outcome of the app is raise of donations, companies' sponsorships and tickets sales.
Main use cases
planning the visit
Finding out zoo working hours, purchasing tickets, browsing species list, checking the upcoming events
on-site
Navigating around animal habitats, finding info about the animal you meet
after the visit
Donating, taking sponsorship
An app, not a website?
To be fair, if I was close to real implementation, I'd choose building this thing on Flutter to kill two birds with one stone. Flutter is an html thing basically, which means we could apply the markup onto website's mobile version.
The benefits of an app are the opportunity to do push messages (afaik) with zoo's announcements, plus the access to phone geo data allowing not only to navigate across habitats, but to calculate the time spent to define the most beloved animals & therefore suggest to donate. So for a concept - let it be an application :)
step 1
Research
I took 3 research directions:
1. onsite heuristic analysis (walking and noticing) 2. zoo's website investigation 3. "competing" zoo apps analysis The goal was to define which info and services are relevant and can be implemented (realistically speaking)
step 1
Research
I took 3 research directions:
1. onsite heuristic analysis (walking and noticing) 2. zoo's website investigation 3. "competing" zoo apps analysis The goal was to define which info and services are relevant and can be implemented (realistically speaking)
step 2
Information architecture
Having the list of info blocks, this stage's goal was to arrange them in the way that lets users to find things quickly & easily.
Also, I investigated potential workaround on implementing online tickets purchase. (A state zoo is a temple of bureaucracy, duh)
step 2
Information architecture
Having the list of info blocks, this stage's goal was to arrange them in the way that lets users to find things quickly & easily.
Also, I investigated potential workaround on implementing online tickets purchase. (A state zoo is a temple of bureaucracy, duh)
step 3
Wireframes
Usually I do hand sketching first, but this project is tiny so I jumped straight into Figma. I prefer to create low-fi components from the very beginning, which lets me to apply styles fast&easy in the following stage.
step 3
Wireframes
Usually I do hand sketching first, but this project is tiny so I jumped straight into Figma. I prefer to create low-fi components from the very beginning, which lets me to apply styles fast&easy in the following stage.
step 4
UI
The existing zoo website has dull UI, and I wanted smth more appealing.
I browsed dribbble for inspiration and ended up with an idea of colorful interface, spiced up with a few nature patterns. The color palette gives an optimistic and cute feel; the rounded shapes speak friendliness and are pleasant to interact with.
The Kyiv Type and e-Ukraine fonts are commonly used by our state institutions, thus the app fits in that typical "state service" look.
step 5
Prototype
I built a simple proto for you to try. Feel free to play!
step 5
Prototype
I built a simple proto for you to try. Feel free to play!
The zoo app mockups
Here you can discover the source file, browse the styles & components or anything else you're interested in.
The zoo app mockups
Here you can discover the source file, browse the styles & components or anything else you're interested in.