top of page
mast head.png

Redefining Dinosaurs

Critter Collector

One of the most interesting and certainly unique attractions in Toms River, New Jersey is that it is home to its very own bug museum. Insectropolis is host to various exhibits, including live bugs and interactive educational experiences to teach and entertain kids.

This project aimed to design an app that pairs with the in-person experience of visiting the museum to give the Insectropolis experience a modern update.

Preview Available | 42 MB | 20 Pages

Skills

UI/UX, Illustration, Motion

Programs

Figma, Illustrator, After Effects

Duration

5 Weeks

Prompt

App Based on Hometown

Prototypes

Opening Screen

Onboarding

Bug Discovered

Research

Problem

Insectropolis and many other older, small museums lack interactivity to engage and attract new and young visitors. Creating an experience that could create both new and loyal customers would be the ultimate goal.

Solution

An app designed to encourage visitors to “collect” and learn more about bugs that they discover throughout the museum, and then be able to bring this information home with them once their visit is finished.

Critter collector design compsCC.png

Target Audience

The main audience of this product would be children and families since this reflects the majority of visitors to Insectropolis.

Since the app would have a wide-age range in its users, it was best to design the app so that is easy to understand for older kids and adults alike. My goal was to have an app that parents could help their younger children navigate through, while also having older children be able to use and enjoy the app on their own.


 

cc target audience.png

User Persona & User Journey

User Personao'shea.png
User Journeyo'shea.png

UX Research

pokemon go.jpeg

Pokemon Go

Pokemon Go was a great app to look to when it came to organizing a lot of little details and facts onto one page for each Pokemon featured. It also had an effective gallery system that can be filtered and searched, which makes finding things more manageable.

animal crossing.jpg

Animal Crossing

Animal Crossing: New Horizons also had great examples of organizing a gallery similar to a museum display due to its features of collecting, bugs, fish, and marine life. It was also a great reference for copywriting in terms of creating descriptions of the insects that would appeal to children.

museum apps.jpeg

Museum Apps

Since this app was rooted in interacting with physical museum exhibits, I thought looking at other museum apps could help. Many of the apps seemed to include interactive maps, featured exhibits, as well as some games to help kids learn more about specific exhibits in a less reading-intensive way.

Content Development

After establishing my target audience and looking into apps and games with functionalities similar to what I had pictured for "Critter Collector," I moved on to the actual content development phase of this project. I focused on creating a basic user flow, collecting visual inspiration, and beginning to develop sketches and wireframes.

User Flow

The user flow that I focused on when designing my screens involved user was a first-time user of the app.

 

This particular flow goes through the brief onboarding process that would play when the app is first opened. Then, the user is able to go through several quick steps to find and collect their first bug.

User Flowo'shea.png
cc visual inspo.png

Visual Inspiration 

From looking through many other children-focused illustrations and products, many of the designs are bold and colorful with larger UI elements to catch kids’ attention. I decided to go a similar route with my overall visual and illustration style in hopes of appealing to the main target audience.

 

Sketches

Once I established what screens I needed with my user flow and decided on a general visual style through my inspiration boards, I moved on to sketching. This particular set of sketches was a hybrid of wireframes along with experimental illustrations that I was planning on creating and polishing up for the final designs.

In order, the sketches depict the welcome screen, the insect gallery, the open menu, the single bug view, an AR bug view, and a map screen.

CC Sketches (1).png

Style Guide

Style Guide cc.png

Visual Development

With my style guides and sketches established, I moved on to the visual development of this project. For this particular project, I knew I wanted to spend a considerable amount of time animating the prototype. Because of this, I made sure my I had plans for how my designs were separated into layers and  how they could transition from one screen to another.

Welcome Screen

This is the screen that visitors would be greeted with once they open the app. Pressing "Play" would open up the rest of the app, while pressing "Connect with Us" would bring the user to Insectropolis' Instagram page.

cc opening.png

Onboarding

For the first time a user opens the app, they will be greeted with an onboarding process that explains the basic functions of Critter Collector. If the user wants they are able to opt-out of going through the tutorial by selecting the skip button.

cc onboarding.png

Empty Gallery

When the user finishes the initial onboarding process, the first screen they will encounter is the gallery screen. If the user has not discovered any bugs yet, the screen will prompt the user to either open up the camera QR scanner or the map screen so they can easily find their first bug.

cc empty gallery.png

Hint Screen

On the map screen,  there would be a hint button that would provide the user a hint on what exhibits and areas to investigate to find a QR code to collect a bug. From this screen, the user would also be able to access previous hints.

qr hint.png

Camera

Once the user has discovered a QR code in the museum, they would open up the camera part of the app in order to scan the code. These QR codes would be scattered throughout the museum for users to find.

cc scan.png

Bug Discovered

Once a valid QR code has been scanned the new bug would appear. The background of this screen would correlate with the section of the museum where the bug is found in. For example, the honey bees would be found in the "Hive Airport" section, so the honeycomb pattern would appear in the back.

cc bug discovered.png

Bug Info Screen

Each discovered bug would unlock an information screen that would include games, fun facts, measurements, and locations where the actual bugs are found. The location where the bug is found in the museum is also available.

cc bug view.png

Takeaways & Conclusion

Getting to create an app that focused on an attraction in my hometown was definitely enjoyable, and it was a nice challenge to break down something I was familiar with since I was a kid and create an experience enjoyable to a wider audience.

If I were to go back and revise this project, I would like to focus on creating a map screen. I found it difficult to conceptualize a map for this project initially, but perhaps now that I have more experience I would be able to go back and create something that would fit well with the rest of my designs.

bottom of page