Karl Solano
UX designer
Made with

Shedd Aquarium App Redesign

This mobile app was designed by our team to extend what the Shedd Aquarium already had to offer. Although very functional for the type of user it was originally designed for, there were frustrations about the general usability and features of the app. We also decided to include functionalities that were heavily sought after in accordance with rounds of research and iterations.

Image alt tag

This one involved a heavy amount of research!

This project was completed by a team of four members, including myself. It was a difficult process figuring out what problem to solve when we decided on this location. We started off by reading reviews on Trip Advisor, Yelp and Google Maps. There were many problems that were addressed by the online reviews, but most had to deal with experiences while being at the aquarium. The goal for this project was to find a deficiency in their digital experience.

After digging a little deeper, we decided to look more into the virtual reality and live feed options in order to make the exhibits more accessible during the pandemic. Upon making this decision, we then discovered there was an external app needed in order to view the virtual reality features of the aquarium. Intuitively, I assumed that the Shedd Aquarium had an app that would probably have this feature available. To my surprise, they did not and their app was designed specifically for users with developmental disabilities. Plenty of frustration and confusion with the format of the app was quite evident after looking further into more reviews.

A couple days of research and discovery had passed and we were on our way towards choosing a key problem for the Shedd Aquarium. As a team, we decided on the following hypothesis statement: We believe that by improving the usability and UI of the current Shedd Aquarium app, we will help mitigate the frustrations the users have with the app’s current digital experience. We will know this to be true when we test the redesigned prototype with users.

Having designed an app only for users with developmental disabilities, we knew we could drastically improve the blatantly misaligned digital presence of the Shedd. We saw opportunities in their marketing and branding as well, and took those integral elements into consideration with our redesign.

Validating Our Concerns with the Original App
Our second survey accumulated the most responses which made for a stronger case for a virtual aquarium tour.

Our second survey accumulated the most responses which made for a stronger case for a virtual aquarium tour.

Surveys

After we investigated the app ourselves, we wanted to gather feedback from other users. We set up an online survey and asked them fill it out.

Using Google Forms to conduct our surveys, our team was able to gather helpful insight to support our hypothesis.

We conducted four rounds of surveys altogether, gathering insight as they unfolded throughout the discovery process.

Our main takeaways:

  • The current app had limited resources on detailing the information of schedules and exhibits.

  • Tools and some of the features of the app were confusing and misleading.

  • The UI version of the app was not appealing and pleasing.

  • The live feed and virtual tours were highly requested.

Validating our synthesis from early surveys

User one looking for the virtual tours.

User Testing

Before doing work on the app itself, I did a testing round in order to reveal navigability issues on their site.

I was trying to find out if the virtual tours were easy to access via the web. Since our team had plenty of clicking around, I wanted to validate that the process of getting to the virtual tours were in fact obscure.

This phase was implemented early on because before getting into the app redesign, I wanted to make sure that users knew how to download the app in the first place.

Since their app and virtual tours are hosted independently, I also wanted to validate our hypothesis of cutting out extra steps.

These screens were recorded from testing the navigability of the Shedd Aquarium website on my laptop. It was conducted with immediate members of my household to ensure safety protocols across the city.

Redesigning the Shedd

Competitive Analysis

Our team conducted a ‘Feature Inventory’ Competitive analysis of Shedd’s competitors which included:

  • National Aquarium

  • The Maritime Aquarium

  • Aquarium of the Pacific

Design opportunities for us:

  • Offer a live feed of Shedd’s many exhibits .

  • Allow in app ticket purchasing.

  • Tailor app to adults, kids and those in need of sensory friendly interface.

  • Virtual tour capability. 

  • Make interface more aesthetically pleasing.

  • In app membership services.

The main reason the original app had negative feedback..

Redesigning the Shedd

Designed by Infiniteach Inc.

Their Brand Statement
We develop technology for people with intellectual & developmental disabilities, including Autism Spectrum Disorder (ASD).

Problem
The Shedd Aquarium app was designed for a particular audience, causing confusion and frustration for those users who do not fit the criteria.

Redesigning the Shedd

Card Sorting

We decided on the main features of the app with a Card Sorting session.

Our main purpose was determine what exactly would be on the app's home page.

Using Miro, our team came up with common trends and wants. Due to the pandemic, it was fairly easy to run this workshop together online.

This exercise alone helped us with structuring the home page, which included Live Cam Animal Feeding, Featured Exhibits and Virtual Tours.

A few changes to the bottom navigation of the app also resulted from our card sort.

Redesigning the Shedd

Personas

Based on our research and surveys, we set up two personas. We referred to them throughout the entire product development process.

We decided we needed personas when deciding exactly what features we wanted to highlight in our app redesign. After going through more brainstorming, it was concluded that we would ultimately demonstrate two paths for two different personas.

One path was for Sharon, a fifth grader, who is looking to virtually explore exhibits and watch her favorite animals get fed.

The other path was for Jonathan, a social studies teacher, looking to purchase tickets on the app for a date night.

Redesigning the Shedd

Wireframes

At the beginning of the design process we created wireframes for testing purposes.

This was very useful in terms of cutting out unnecessary screens as well as altering the user paths. Some screens were even dropped.

Starting with rough sketches at first, I drew some inspiration from competitor apps. We then went into lo-fi wireframes with Figma.

Just a couple of iterations and testing was needed before moving on to the hi-fi frames.

Redesigning the Shedd

User Flows

We mapped out the users’ steps to see how we could simplify their journey to help them reach goals we wanted to make available on our app.

In order to visualize a more seamless user experience, our team came up with a couple user flows to help guide our personas get to where they want to in our app most efficiently.

For Jonathan (pictured on the left), our team was looking to cater those individuals who wanted to use the app as the hub for information and ways to view events and purchase tickets on the app.

We wanted Sharon to watch her favorite animals get fed. She represents the children who would interact with the app as a supplementary experience to visiting the Shedd.

The steps we chose would be the simplest route in terms of navigability and ease of experience. We did not want to task our users with too much thinking and wanted their happy path to be simple yet obvious.

Redesigning the Shedd

Before & After

Redesigning the Shedd

UI Design

Once we tested out all usability mistakes, I started designing the final screens in Figma.

I wanted to deviate from the simple and dull layout that the app originally had. Since contrast was something I wanted to utilize to showcase certain links I went with a dark mode style of UI.

I also wanted to make it look sleek, yet modern and professional...something that I wanted the users to recognize. Many complaints from our surveys and user testing included the lackluster design. There were also complaints about the app being condescending and confusing. I can see where this duality of opinions spawns from, since the Shedd Aquarium did a terrible job disclosing their app was meant for a specific audience.

In order to address this, I added a disclaimer at the beginning of opening the app...as well as the ability to choose what type of user will be interacting with it. This way, the app caters to all audiences and minimizes the risk of insulting any of their users.

Our inspiration for the overall format of the UI overhaul was a combination of Netflix, Youtube and Fandango.

Current Version of Prototype

Key Features We Highlighted

  • Aesthetic Re-design

  • Disclaimer at the beginning of app

  • Home page that includes sought after features from our surveys.

  • Ability to purchase tickets in app.

  • Virtual exhibits and live cameras.

Our users loved our hi-fi prototype and were excited to interact with it.

This project was difficult to navigate in the beginning, but our discovery proved to be very rewarding.

I learned that unraveling the real problems of a product can be nested deeper than your initial inclinations. One takeaway from the synthesis phase can merely be a small piece of a bigger problem.

Early into this project I felt very frustrated because I did not think we started off with the right problem to solve. My biggest fear was investing time into something that may not have a great ROI.

There were also many aspects of this app that are uncovered, which leaves room for future implementation.