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/
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.
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
What Matters
I performed brainstorming exercises and laid out a feature roadmap to plan the priorities in starting the design process.
With a solid understanding of the user needs is established, I put together low fidelity wireframes to plan for the information architecture and layout.
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.
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.
