Monterey Bay Aquarium: Online Accounts

UX Design / UI Design / Planning / User Testing

THE CHALLENGE

How might we allow Monterey Bay Aquarium members to manage their membership on the existing website in the most seamless and cost-efficient way?

ROLE

UI/UX design lead

TEAM

  • Design
  • Content
  • Engineering & QA
  • Project Management
  • Membership & Development

TOOLS

  • Gliffy
  • Sketch
  • FramerJS
  • Adobe After Effects
  • Codepen

DESIGN DELIVERABLES

  • IA, CTA table & Userflows
  • Wireframes & Visual Design
  • CSS
  • Interaction Animations

ADDITIONAL PROJECT GOALS

THE PROCESS

Understanding & Research

Object-oriented UX

Content-first approach. In this process, we identify the “objects” in the project that users will interact with. Once the objects are identified, we determine what actions can be done to those objects. This helps us focus on the mental model of the user, instead of our internal business goals, before moving onto user flows and wireframes.

Read more about Object-oriented UX

Object-Oriented UX chart

Level 0

Minimum amount of info we need to connect an online account to a membership. These would be the fields on the create an account screen.

Level 1

Additional info that a user can add to their account. User does not have to be a member to add this info.

Level 2

User-type specific information. In phase 1 this will all be member-focused. In future phases this will also include the other user-types: teachers, students, etc.

Creating a CTA inventory

After defining the objects, I created a CTA inventory. This helps me and the team feel confident that we have thought through the different use cases for all the type of users.

CTA inventory

View entire CTA inventory

Exploration

Userflows

The team and I thought about the different user scenarios and I created multiple user flow charts so that the whole team and the stakeholders could understand the scope of this project and all the parts it could potentially influence.

Userflow chart

Wireframes

The userflows helped me, the engineers, and the product manager decide which wireframes to start on first. I created black & white wireframes to focus on the arrangement of the content. I reviewed the wireframes with the team and the stakeholders to get their feedback and to iterate on the design.

Userflow chart

User Testing

I performed geurilla user-testing using Invision prototypes and also conducted user tests using WhatUsersDo. (More on this soon!)

FINAL DESIGNS

I played around with type scale to give the pages a little visual interest while not veering too far from the website’s existing styles, to ensure the flow of the website still felt seamless. Below are some select screenshots of the old version of the page on the left, and the new version of the page on the right.

Members Landing Page (Current → Redesign)

Members Landing Page

Memberships page (Current → Redesign)

Membership Page

Account Overview page (Redesign)

Account Overview
← Back to Homepage Dottie: iPad App →