Show Project InfoHide Project Info

Harbor Lookout

Client: Saturn Systems and LSMMA
Date: September 22, 2019
Services: iOS App Design, Case Study

App Design, Case Study

Harbor Lookout

App for tracking when ships are coming into Lake Superior harbors.

The North Shore of Lake Superior is a loved destination and home to many. Visitors come from all over the world to enjoy the beautiful landscape and attractions near the shore of the largest freshwater lake. A popular attraction is the port harbors where people watch as large ships from around the world come to dock.

Project Background

Currently, there is a web application and Android app1 for tracking the ships to know exactly when they will enter the harbor. The application was donated to the Lake Superior Marine Museum Association (LSMMA)2 by Saturn Systems3. I approached Saturns Systems about working with them to see about improving the functionality and design as well as to design a new iOS app.

Brand Message

The application was donated to the Lake Superior Marine Museum by Saturn Systems and represents a big part of the community. LSMMA provides a great deal of history to visitors about the lake and shipping history and promotes the legacy of Lake Superior. The museum is located off the pier where people come to see the ships.

The Challenge

Anytime you are working with something that’s both used by tourists and locals, you have to find which features appeal to both demographics. In addition, there’s a wide age range of people that come to visit the area that could benefit from the app. One of the challenges with identifying ships is knowing which one you’re looking at and comparing that to what you see on a map.

Solution

I started with interviewing people at the harbor where the app would be most popularly used. Using this information I designed the app to take advantage of the compass and AR features on the iPhone to help in identifying the ships and came up with a feature that would allow for people to receive notifications of when a ship would be coming in.

1. Harbor Lookout –
https://harborlookout.com/

2. Lake Superior Marine Museum Association –
https://www.lsmma.com/

3. Saturn Systems –
http://www.saturnsys.com/

01. Research and Interviews

A research plan was put together and observational research and interviews were conducted at the harbor. The energy and excitement of the pier along with the natural beauty of the lake and surrounding sites were a key motivation for visiting. Seeing the ships brought a fun and unique experience coupled with seeing the lift bridge go up to let the ships through the harbor.

Visiting the museum seemed to be a lower priority for many and many didn’t know that there was a way inside the museum to see when ships were going to come through.

Visitor Demographic

A total of 552 people per hour on a moderately busy day are observed visiting the area by the pier and around the museum.

  • Ages 1-10
  • Ages 11-19
  • Ages 20-29
  • Ages 30-49
  • Ages 50+

Non-English Speaking Visitors

An early observation in the initial project scope was that this area is a tourist destination and would likely entertain people from all over the globe. During the observation research, I listened closely to see if I could get an idea of how many people were speaking different languages other than English.

  • English Speaking
  • Non-English Speaking

Interviews

I approached 15 people on-site at the pier and of those 5 people agreed to a brief interview. Most of the people interviewed were unaware that there was a current resource for tracking the ships that are coming into the harbor. They appeared more interest in key, quick facts rather than the full history of the ships.

View interview findings

02. Persona (William)

About

William loves enjoying the outdoors and seeing the local sights. As a father he loves taking his daughter to attractions they can both enjoy. He is interested in history, but generally doesn’t spend a lot of time reading while visiting touristy areas.

Goals

—Know exactly when a ship is coming in.
—Be notified/reminded to be there on time to see the ship.
—Share an enjoyable moment with his daughter.
—Learn more about the ships and where they’re coming from.

Personality
Interested in Facts
Technical Skills
Adventurous
Socially Motivated
What Matters
Time
Having Fun
Taking Photos
Sharing

03. Brainstorming

I performed brainstorming exercises and laid out a feature roadmap to plan the priorities in starting the design process.

Empathy Map

SWOT Analysis

Feature Roadmap

04. Planning and Wireframes

With a solid understanding of the user needs is established, I put together low fidelity wireframes to plan for the information architecture and layout.

Site Map

User Flow

05. Hi-Fidelity Designs

Using the planned layout from the wireframes, I started with walking through the harbor area to gather color inspiration for the design of the app. I also pay attention to what style of fonts where used on the ships and various signage.

06. Prototypes

Prototypes were created in both Figma and Marvel. The Figma prototype added in the final polishes of the design and the Marvel prototype was necessary for conducting usability tests.

View the Figma Prototype

07. Usability Test

Usability tests were conducted through Maze.design. 5 participants were hired and 3 volunteered to participate in an in-person test. The results help me identify a few simple design changes to make to help avoid confusion while using the app and improve usability.

View Full Report
12 Blocks

Each block is a task for the tester to complete or a question to gather additional input.

8 Testers

Aged between 18-40. 5 were hired through Maze and 3 were volunteers.

95% Direct Success

Testers who completed the mission via the expected path(s).

5% Indirect Success

Testers who completed the mission via unexpected paths.

0% Give-up / Bounce

Testers who left or gave up the mission.

08. Conclussion and Deliverables

This project was fun for me for multiple reasons; the excitement of visitors to the area that I interviewed, the opportunity to visit with the company that developed the current web and android app, and seeing the positive response from those who participated int he usability tests.

A challenge for me with this project was designing something that would usable by people with limited knowledge of the English language and the diverse age group. Using universally recognized icons as well as an augmented reality feature, the need to understand English is minimal. Users can see quick facts about the ships coming in and when they’ll be coming through with only a few taps. Additionally, people that want more facts and history can dig deeper.

Project Brief

High-level overview of the project.

Interview Findings

Research summary of interview findings.

Sitemap

Navigation structure for the new iOS app.

High-fidelity Designs

Iterations built on the wireframes including high-fidelity graphics.

Handoffs and UI Kit

Any handoff information and UI kit.

Research Plan

Set research scope and objectives.

Persona

Put together a persona of the most common target audience.

User Flow

Chart of how the user flow might look.

Prototype

Figma and Invision prototypes of the app features.

Case Study

Full case study and summary of the project findings.

Observational Research

Observe the people that are visiting the harbor and museum for patterns.

Research Brief

Presentation of the findings put together in an interactive document.

Task Flow

Flows based on the predicted common tasks.

Usability Testing

Usability test guide and results using Maze.design.

Interview Guide

Put together questions based on the secondary research findings.

Feature Road Map

A prioritized list of the specific features and requirements.

Wireframes

Low fidelity concepts of the features inside the app.

Final Iterations

Final design changes based on test findings.