THE PROBLEM:

Use semantic interaction design to create an engaging in-person digital experience to accompany a new hybrid music history museum and event center dedicated to the history of Rock & Roll.

This project was coursework for SJSU’s ISE218: Interaction Design I, Spring 2021.

MY ROLE:

Designer, B2C mobile app

I collaborated with two other team members to design a branded suite of tools (enterprise dashboard, public website, mobile app) to support RockX museum staff and visitors. In addition to designing the mobile app, I provided team leadership for scheduling and milestones.


Strategy, Scope & Structure:

The team identified five key personas that would be important members of the RockX audience – a GenX parent and their child, a staff member, a high-level donor, and an aspiring artist – and sketched out their user stories. We completed a journey map to follow the experience of one specific end-user: Megan, a GenX fan bringing her young children to experience RockX. Our journey map followed Megan through four key phases: discovering RockX, learning about the museum on the website and planning a tour, using the mobile app to navigate the museum, and sharing her experience.

One of five key user personas

One of five key user personas

Thinking through the user stories for our five personas, we built a dense grammar table (essential objects, actions, and attributes) that could provide all users with a clear and consistent experience that minimizes cognitive load. Using the compressed grammar, each team member constructed a prioritization matrix for their platform and drafted one or two user flows for key goals. For the B2C mobile app, this highlighted the importance of being able to create and use a customized tour of museum exhibits.

Prioritization Matrix for B2C Mobile

Prioritization Matrix for B2C Mobile

User Flow: Creating & Using a Customized Tour on B2C  Mobile

User Flow: Creating & Using a Customized Tour on B2C Mobile


Skeleton & Surface:

For the mobile app design, I chose to make objects the primary navigation. When she arrives at the museum with her kids, Megan can use the app to quickly access her saved and suggested tours, browse for specific exhibits and events, or scan the museum map.

Wireframes of grid-to-grammar design

Wireframes of grid-to-grammar design


Interactive prototype:

My interactive prototype of the RockX mobile app was built with Axure Team to ensure brand consistency across platforms; only the mobile design is linked, due to file size.

When Megan’s family arrives at the museum, geofencing triggers a ticket notification on her smartphone. Clicking through to View My Tour, she can quickly access the list of exhibits that she saved previously and see their locations on a map. Megan can also search and filter Exhibits and Events, or browse from other suggested Tours. Each detailed listing includes a description and a few related exhibits or events.

My app design also leverages location-tagging capabilities within the museum, to provide an AR-enhanced experience for exhibits and events. By entering the landscape AR-mode, Megan can explore additional media content for an exhibit, follow indicators to guide her between exhibits in her tour list, learn more about specific artists or their instruments, and get exclusive access to purchase related merchandise, recordings, or event tickets.


wrap up:

What I learned from this project:

  • Remote design collaboration using Axure Teams;

  • The importance of branding and interaction design consistency across user platforms;

  • How to tailor platforms for the appropriate personas and user stories; and

  • Designing AR content and interactions that add value to the user experience.