Aquarium Communication App

Designing a product, solving problems, and creating brand identity

The Loveland Living Planet Aquarium is a large non profit organization with over 100 employees in 10 departments. The administrators of this company sat down with our design/development team to discuss needs and wants for their future. As we discussed problems needing to be solved, one project became the focus, a web based communication app for use among employees, on site, and off (outreach team).

Current Methods of Communication

Pain Points

Scenario 1:

VP wants to send a message to all department admins about upcoming parking changes due to construction, all admins need to pass information on to their team members.

Scenario 2:

Admins want to send messages to team members as well as volunteers, but volunteers do not currently have living planet email addresses.

Scenario 3:

Staff member finds broken or damaged exhibit, this needs immediate attention, and multiple individuals need to be aware of the situation ASAP. An image taken with amobile device and attached to a message would be most helpful.

Project Proposal

Tap/click on image to view full experience map

Research, sketch….Repeat

1- The ability to access the app from the aquarium web site.

2- All members of the app would be aquarium employees and volunteers with living planet email addresses (the decision was made to provide volunteers with address or they could add their own).

3- All admins would have the ability to approve or decline messages created for delivery by their team members.

Sketching was the first step in this process of creation, my fellow designer, Mati, and I sketched the desktop and mobile view simultaneously per the client. First, it was the client’s idea to make this app mostly usable on desktop while at work, but the realization that many uses for the app would require mobile access was determined, and out focus turned to mobile.

Sketches for Desktop

Sketching allowed us to attack our toughest issue(on paper)which was: how to make the approval process with admins as simple as possible, we don’t want to discourage features that the client really wants to implement. But, the idea of every message needing approval before it has the ability to be sent did seem like a hassle and admins might become frustrated by this and discourage them from using the app. We recognized that in the future, this feature would most likely be changed, we had to design with future iterations in mind.

Starting Simple with Interface Design

Staff Desktop Wireframes

Admins had more capabilities, requiring much more thought in designs and iteration happened more frequently. We met again with our clients and gathered more information, at this point, we added our icons to the project. The idea was to create icons that represented each department. More about that part of the project can be found here. I decided to do user testing for the icons, which has become a whole project of it’s own.

Sketching and digitizing icons

Sketching for mobile moved forward as our client recognized the need for those designs to be considered.

Wireframes for mobile

Adding the new feature meant adding a whole new set of steps to be considered: opening messages and moving them to an inbox, and then to a category or folder within the inbox. We designed a swipe feature that gave users the option to move a message to either the main inbox, or to a different inbox.

Admin mobile wireframe views

There is more than one way to access the inboxes and more than one way to move messages to these boxes. One consideration needed to be made is, how many folders or categories of inboxes can the system support, and how many will our design choices allow? Development has the final word on this subject, but for now the design can allow for multiple folders to be created and accessed. Log in, Profile creation, Profile view/edit, message creation, etc. All of these views have been added to the prototype that was created in Adobe XD.

Prototyping

Staff and admin prototype view for desktop and mobile

Our team created a video recording for our clients, (mobile and desktop) as well as links to all prototypes for them to further assess and provide feedback. At this point, we received excellent positive responses from our client and admins that have looked at our designs and tested our prototypes.

Visual Design (making it look amazing!)

UX/UI Product Designer