Lembeh Fish ID - Tab Menu: Micro-Interaction

This small Articulate Storyline project is a Fish ID interaction that allows users to learn about some of the unique marine life found in the Lembeh Strait. This interaction demonstrates the use of variables, states and triggers to create an intuitive tab menu with set button behaviors.

Project Type:
Menu Tab Micro-Interaction
Tourism, Scuba Diving
Tools Used:
Articulate Storyline, Adobe XD & Adobe Illustrator
View Demo
View Demo

The Challenge

This particular interaction was inspired by my dive trip to Solitude Lembeh Resort in Lembeh, Indonesia and motivated by my passion for scuba diving and love of underwater photography. All the photos you’ll see in this interaction were taken by me (excluding the background coral shot).

I wanted to design an interaction that would make the most of the subject matter and compliment the vibrant nature of Indonesia’s underwater marine life. However, I didn’t want to create just a slide show of fish photos. That’s what my Instagram is for! I decided early on that I wanted my interaction to have additional educational value by offering a summary of interesting facts about each of the underwater creatures.

The Design Process.

Visuals: For this project, the design process really started with the selection of the visuals. I had a lot of photos from my trip and I needed to narrow the selection down to a manageable amount to keep my interface from feeling overly cluttered.

I'm a passionate underwater photographer! Here are some more examples of my work.

I tried to choose high quality images that I felt were visually striking and showcased some of the more unique and interesting marine life that could be found in the Lembeh Strait. It was hard to pick just four photos and I do have enough content to drastically expand this project at a later date.

Storyboarding and Design: After I had selected my main visuals, I began working on the layout of the tab menu. I tried several different layouts and worked for awhile to get the correct portions. I settled on a simple but vibrant design with colors that complimented each of the photo subjects.

Storyboarding done in Adobe XD

Articulate Storyline: This was the first interaction I ever created in Articulate Storyline. Using states, variables and triggers I created custom intuitive button behaviors that increased the menu’s usability and appeal. When a user hovers their mouse over a button the color shifts. It returns to its original state once the user’s mouse moves off of the button.

Once a button is selected, the button glows and a pop-up window (actually a new layer) is revealed. This is where information on the subject appears. Once a selection has been made, one button always remains selected.

Articulate Storyline: Slide: Menu - Peacock Mantis Shrimp layer

I also made use of Storyline’s built-in picture zoom feature to add an extra layer of interactivity to my design. By clicking on the icon, a user can expand the chosen photo to get a closer look at the subject. I felt that including this feature would make the most of my photos and add a certain wow factor to my project.

Articulate Storyline: Slide: Menu - Layer: Peacock Mantis Shrimp

Got a project in mind?
Drop me a line!
Let's make something amazing together.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Valerie M Dodge