Educational App Design – Shipwreck Hunter

The Problem…

How might we design a mobile app that lets users explore the history of the Great Lakes?

A mobile app design project by Northwestern University graduate students Matt Grossman, Lisa Repicky, Mohamed Almasri and Jaqueline Peysakhovich.

 

Balsamiq_Mock

 

The Great Lakes are huge and tumultuous fresh water seas that have been central to commerce in North America for centuries. Thousands upon thousands of wrecks lie at the bottom and are all but invisible to the millions of boaters, tourists and students who visit or traverse the lakes each year.

What if users could “see” the history that is all around them using augmented reality?

Lake-goers can pay to visit museums or schedule guided boat tours to learn about this rich history, but what if modern mobile technology could put this history right in the hands of anyone with curiosity and a mobile device? What if we designed an app that served businesses, museums and educators by provided an exciting experience that increases interest in the history of the Great Lakes?

TOOLS

  • Figma – Wireframes/User Stories
  • Adobe Illustrator – Site Map/User Stories
  • Adobe Photoshop – Image work
  • Mural – Mood Boards/Visual Design/Remote Collaboration
  • Axure RP – Hi Fidelity Prototype/Interactions

 

The Solution…

 

USER RESEARCH

Who would use this is app? Who knows more about this topic than anyone else?

EXPERT INTERVIEW

Our first task was to learn about Great Lakes shipwrecks and the scholarly work surrounding them. We accomplished this by interviewing Steve Mrosen, head of the Great Lakes Maritime Museum on Belle Isle in Detroit, MI. We learned that experts such as Steve love the idea of putting their work in the hands of the curious through a mobile solution.

SURVEYS

StudentSurvey

We isolated 3 key user groups to survey and distributed a web survey via Google Forms:

STUDENTS

EDUCATORS

GENERAL PUBLIC

We received hundreds of responses. The survey employed conditional logic to learn more from participants who were experienced with AR.

The excellent response rate to our survey allowed us to learn a great deal about our target market.

 

 

STUDENTS

When do students start learning about the history of the great lakes? Do they use apps in the classroom? Are they familiar with Augmented Reality games?

Student_Graph

 

 

 

 

 

EDUCATORS

Do they approve of the use of apps for educational purposes? What kind of technology do they currently use? Would they use an app like this in their classroom?

Teach_Graph

GENERAL POPULATION

How often do people visit the Great Lakes? How often? Are they interested in shipwrecks? Would they use an app to explore a location?

genpop_graph

 

User Personas and Flow

Using the aggregate data gathered from our research we constructed core user personas to inform our design decisions. We charted their unique journeys through the experience to lay the groundwork for our user flow and information architecture.

Persona_emma

Emma_Journey

User Flow and Information Architecture

We created the diagram below to explore the user journey for various personas, connecting  those with the proposed structure of the app. We wanted to make sure there were multiple ways to find the same information, and that all screens would be accessible from all other screens for an intuitive and delightful user-experience.

UserFlow_IA

We proposed that users be able to search the same data 3 different ways:

  • Augmented Reality View – A visual tool to “spot” wreck locations using device camera and positioning hardware.
  • Map View – A top down “Google Maps” view with clickable indicators of shipwreck locations.
  • List View – A searchable list of wrecks from A-Z

For each view, the same search filters and tutorial dropdowns would be available. We isolated the most relevant search filters for data exploration as:

  • Name (A-Z)
  • Size (S-XL)
  • Date (1700-2017)
  • Distance (Miles from you)

 

Sketches and Lo-Fi Mockups

We began sketching each screen from the user-flow diagram and creating lo-fi mockups using Balsamiq.

Sketch

 

Visual Design

Collaborating via Mural we built mood boards and iterated on the visual design of the app including fonts, colors and images.

MoodBoard

 

Hi-Fi Mockups

Hi fidelity screen mock-ups were designed based on sketches and iterated over. Logo and type decisions were finalized.

 

Prototype

I constructed a functional prototype using Axure RP software. The prototype simulates the way augmented reality, map and list views would depict shipwreck info. Images and limited info are available on each ship page, linking to expert sites for deeper information. I’m now in the process of scraping, cleaning and structuring the data set necessary to build out the back-end of the app.

The prototype can be viewed at this link:

SHIPWRECK HUNTER PROTOTYPE

It can be viewed via desktop but is optimized for Samsung Galaxy S7 screen size.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s