Objective: Create a high-fidelity clickable prototype
Graduate Studies Group Project, Human-Computer Interaction & User Experience Masters - Drexel University
The Task
Brainstorm, design, and develop an app to support any type of Zoo you can dream up. Use the entire prototyping process to result in an iteration of a high-fidelity clickable prototype.
The Team
The team for this project consisted of an aspiring and passionate UX research graduate student, an information systems graduate student with a knack for UX design, and myself, an experienced visual designer/front-end developer working on a graduate certificate in UX design.
Product Description
Our application supports an augmented reality zoo experience called The AR Aquatic Zoo. Its purpose is to help visitors navigate their in-person experience from start to finish. Visitors will be able to do the following main functions:
Purchase digital tickets.
Search and register for events.
Use a detailed map to find, explore, and navigate the experience.
Pledge a digital donation to help sea life conservation.
Additional app functions include the following:
Securely pay for tickets with either a credit card or Apple Pay
Transfer tickets to another visitor
Add tickets to an Apple Wallet
Purchase add-on events
Event search that allows visitors to filter by date and price point.
Brainstorming - Other AR Experiences, Maps and Colors
Design Justifications and Decisions
To kick off this project, our team met to discuss the type of mobile zoo application we wanted to create. The group discovered a collective ethical concern regarding keeping wild animals in captivity in our meeting. Therefore, our team decided to design our zoo app based on an augmented reality (AR) experience. This decision helped guide us toward specific types of app examples to gather our inspiration.
Our team then went on to independently spend time studying and gathering examples of real zoo apps, AR museum exhibits, and mobile payment systems. Additionally, visual design inspiration was collected to identify early options for typography, button styles, color palettes, iconography, and illustrative styles. We created mood boards in Figma to collect ideas and examples together in one shared place.
The mood boards were used to help the team collaborate and reach a consensus on the type of zoo experience we would build and standardize the visual design library. This space in the Figma file was also used as a sandbox testing page to integrate wireframes with the design library. A few critical decisions were made to create continuity in the visual design library. One of these decisions included the application of the color palette to visual design components. Another was ensuring each task flow had a logical sequencing to completion. Additionally, pixel sizing was determined for visual aspects, such as buttons, component padding, and margins, to maximize space use efficiency.
Each group member created a set of wireframes for a particular task flow. We created wireframes for ticket purchases, map navigation, and events. These task flows were chosen because they seemed like the most essential functions to facilitate a visitor’s experience. In addition, we included wireframes for the app entry and a home screen, which would be used for the clickable prototype. We utilized UI pattern best practices, such as proper placement of back buttons, to guide us in our design work.
The wireframes and the visual design library were then used to create static high-fidelity frames. Standardized design components, like the header and horizontal navigation bar, were turned into assets within Figma to allow for repeat use and easy modification with instances.
After completing the clickable prototype work, we did a final review. In this meeting, our group evaluated and tested our prototype on both desktop and mobile. These efforts allowed us to revise a few visual design details. Most of all, we ensured the clickable prototype had enough functionality by conducting an initial user test by all group members. Once the group felt this first high-fidelity prototype had expressed our initial vision and was working well in function and design, we had two users outside the group test our prototype in the mobile Figma application.
Map Wireframes (Initial)
Map Wireframes (High Fidelity)
User Feedback
Lastly, the group met and discussed the user feedback. We implemented a few critical changes which consisted of typos and errors. We then documented the remaining issues to consider for future iteration of the app. The feedback was for future consideration. However, a few critical findings identified by this user have been addressed in our final clickable prototype.
In conclusion, our group felt accomplished with our high-fidelity prototype result. Each group member brought a different level of experience to this project. For example, one of us was entirely new to Figma, while another group member had very recent experience digging deep into using components in the application. Our collaboration resulted in significant learning for all of us, and our hard work showed up in the user test success in the ease of use and effectiveness experienced by the users.
Check out the sample video of the prototype below.
You can also test out the prototype in Figma here>