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.
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
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?
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?
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?
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.
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.
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.
Visual Design
Collaborating via Mural we built mood boards and iterated on the visual design of the app including fonts, colors and images.
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:
It can be viewed via desktop but is optimized for Samsung Galaxy S7 screen size.
