Zoo Leipzig

UX Design | UI Design | Case Study

The goal for this project was to develop a location-based, native iOS and Android App. 

I chose to design a fictitious app to help the user enter, navigate and experience the Zoo in Leipzig, Germany.

 

Duration

1 week, July 2022

My Role

UX Design

UI Design

Tools

Sketch

Illustrator

Photoshop

Lucid Chart

 
 

Creating a User Flow Diagram

As a first step, I developed user stories according to the functions my location-based app should have and then I incorporated them into a user flow diagram, to show their connection and context.

 
 

Wireframes and their iterations

Using the user flow diagram as the basis, I then designed the first round of low-fidelity wireframes according to the Material Design Guide for Android as well as the iOS Human Interface Guidelines.

After iterating and refining the designs I arrived at the High-Fidelity Versions of the screens. 

Low-Fidelity Wireframes for Android and iOS Screens

Mid-Fidelity Wireframes for Android and iOS Screens

 
 

UI Design

 
 

Typography

For the headlines and big titles, I’ve chosen typography that aligns with and supports the natural and rugged properties that the zoo’s branding already has, paired with sans-serif font to ensure optimal readability in text paragraphs etc.

 
 
 
 

Color Palette

The colours signify the differently themed areas of the zoo, which can be found in the map as well as in the animal articles.

 

Map & Map Icons

 
 
 
 
 
 

Final Screen Designs

After deciding on the overall UI-Design of the app, I applied these decisions onto the wireframes for Android and iOS devices.

 
 
 
 

Payment Process

Since the ticket-purchasing process is vital to the functionality of the app, I’ve displayed it here in detail.

 

Mock-Ups