Waves
It can be challenging to find a day and time to fish in Lake Erie because wave patters can change fast. For boats less than 18 feet, 4’ waves would be uncomfortable and could be dangerous because occupants could accidentally lose their balance. If the waves change for the worse while driving to the dock, the trip would be cancelled and would take up boaters time.
Waves uses NOAA wave date to provide current conditions and accurate forecasts for Lake Erie to help boaters determination if Lake conditions are safe, thus saving boaters time.
CLIENT
Fisherman who lives an hour away from their boat dock
ROLE
Product Design + UI + UX + IA
PLATFORM
iPhone App
Finding Clients Needs
Before starting to design the end-to-end application, I needed to do some research. So first, I created a Research Ramp-up to compare direct and in-direct competitors and also get an idea of potential users. After this, I was able to utilize the data from the competitors to help create questions for user research. I found 5 potential users for the Wave app and interviewed them face-to-face or remotely. Afterwards, I created an affinity map with their comments which allowed me to determine other potential uses for the app and content that would be needed in the Waves application.
Define
With the research completed, the next step was defining the problem. To do this, I reviewed the interview findings and found the key data points that I could utilize. In addition, I created the main task flow that focused on users to locating wave forecast for a specific location. This task flow was incorporated into the overall user flow of the application to help create and understand the various pathways of the application.
Task Flow: Find Location Data
User Flow
Ideate
In the process of generating ideas, I sketched out different pages, interactions, and icons for the Waves app. Sketching allowed me to move fast and test the general layout. This also allowed me to think through the interactions and determine what was working and what needed more careful consideration. Overall, the sketches were helpful in generating the look and feel of the app.
The Low-Fi wireframes let me put a more polished veneer on the UI of the Waves app. The Mid-Fi wireframes continued to build upon the original design and were used to test the task flow and to see how users would search for data.
The UI Toolkit was included in the ideate phase because it started with generating the layout, design, and became a home to all of the components that are used in the application. The toolkit has been consistently updated throughout the design process.
Sketches
Low-Fi Wireframes
Mid-Fi Wireframes
UI Toolkit
Prototype
The Mid-Fi wireframes were used to create the prototype.
This prototype was built to test how users would locate a specific Lake Erie area in the Waves app. Below is a screenshot of the prototype with the noodles and also a gif demonstrating one search pathway.
Test
I used Maze for user testing since I was able to attach my Figma Mid-Fi Prototype. I had 8 users test the task flow asynchronously. There were some initial hiccups with user testing this way, but I now have a better understanding of the importance of specific directions for users.
Maze provides a lot of data points to assess how users are locating the wave data for specific locations. The users mainly used the Lake Erie pathway which can be accessed by clicking on Lake Erie in the map or by clicking on the text for Lake Erie.
The main search pathway’s Heatmap is below to help view where users are tapping on the app.
User Data from Maze Prototype Testing
Main Search Pathway Heatmap
High-Fi Wireframe
Final Thoughts
I realized that working on an end-to-end application for about 80 hours is not enough to create a fully developed app. In that case it is important to focus on the main task flow and work to eliminate unnecessary scope creep.
In addition to that, starting from a blank canvas can be difficult as there are so many different pathways to investigate. Also, I realized that with the limited time, decisions needed to be made quickly and often I had to rely on my intuition until I could research best practices in the future.
Also, in this project being flexible is important because the layout, design, and interaction will not be set in stone from the low-fi wireframes. Things will come up that require changes.
Overall, this was a learning process and I am happy with the initial draft of this app. If I had more time I would be able to finesse for an even better user experience.