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.
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
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.
I performed brainstorming exercises and laid out a feature roadmap to plan the priorities in starting the design process.
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.
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.
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.