IoT lake watch app
Graduate Student @ MCAD in 2019
Context
In my graduate web design class, we were tasked with picking a pseudo client and creating an IoT app for our local community. My concept is for the Minnesota Department of Natural Resources (DNR) that monitors lake conditions and informs visitors about the weather, when the lake is busy, and updates about any lake closings so they can plan their trip accordingly.
Objectives
UX & UI Design
Interactive prototype
Client presentation
Explore
Non-human personas
User speculation around data collection
Multiple data sources
About
bde [Dakota] (n.): lake
bdeWatch exists to help you navigate the 10,000+ Minnesota lakes.
The Minnesota Department of Natural Resources (DNR) has developed Lake Hopper drones to map and monitor the lakes in Minnesota. Using the data from the Lake Hoppers the MN DNR organizes and provides the data to you through bdeWatch a desktop and mobile app. You’ll be able to plan your trip to the lake by checking lake conditions, monitoring activity to see when the best time to visit the lake is, map out your route to the lake or even your boat ride around the lake, as well as get news and events.
How
By meeting the user where they are, Lake Hoppers will be monitoring the lakes and using drone imagery and other sensors that will be sent to the bdeWatch app. They are on an automatic scheduled flight path to rotate lakes but can be overridden by admin accounts.
Key motivators:
Rise in lake closures due to high E. coli contamination
Red Lake’s recent zebra mussel invasion and the threat to the walleye fishery
Supporting and familiarizing lake visitors with legislation to return lake names to their original Dakota names
User speculative rating
Moderate, pragmatic application but is using location service data and drone imaging which raises concerns on how that data may be be used.
Technology & devices
Lake Hopper drones are on an automatic flight path over the 10,000 lakes with about 1,000 devices on a rotating schedule. Current GPS mappings of lakes are really vague and don’t offer a lot of detail. Many of the lakes in Minnesota are remote and difficult to tell what the conditions are, Lake Hopper alleviates the pain by giving real-time data on lake conditions, activity at the lake, weather, and more. Lake Hopper then sends it’s data and modeling to the bdeWatch app where users have a guided experience using the maps, images, models, and weather sensor data to help plan their visits and get up to date news on what’s happening at their favorite lakes.
Lake hopper drones
High resolution maps of the lakes
Capture lake health, thermal and more with 3D models
Real-time 2D live maps for activity and weather analysis
Weather sensors and wind forecasting data
bdeWatch app
Plan your lake visit
Get directions to and around the lake
View lake detail pages for lake conditions, activity and news
Bookmark, favorite and check-in at your favorite lakes
Personas
Bde Maka Ska
Age: Indeterminate
Location: Minneapolis, MN
Education: N/A
Job: Body of water
Family: N/A
Disposition: Sunny
User needs: Between lake closures, name changes, and invasive species threatening my health, it’s important for my guests to be educated and up to date before they choose to visit.
(This is a study in non-human personas to evaluate how the application may affect the lake)
Boater Bob
Age: 67
Location: Minnetonka, MN
Education: MBA
Job: Retired businessman
Family: Married, kids, grandkids
Disposition: Ready to relax
User needs: As a retirement present to himself, Bob bought a sailboat to take around the lakes. But new to boating and navigating lakes he needs a little help learning the ropes.
Water Wendy
Age: 36
Location: St. Paul, MN
Education: Bachelor’s degree
Job: Communications
Family: Married, 1-2 kids
Disposition: Must keep kids entertained
User needs: Wendy spent her childhood exploring the lakes and wants to make sure her kids do the same. She needs help tracking what lakes they’ve visited, lessons or activities available and being up to date on lake conditions and when it’s not too busy.
Sitemaps & wireframes
User pathways
Pathway 1: Water Wendy
Memorial Day is right around the corner and Wendy wants to be as prepared as possible to get her kids signed up for outdoor activities. While doing research for what to do this summer she stumbles upon an ad for bdeWatch app and signs up.
Pathway 2: Water Wendy
Wendy has planned a Saturday in July to go to her family’s favorite lake, Lake Nokomis. As she’s packing up the kiddos to get ready to head out she gets a notification from bdeWatch that Lake Nokomis is closed due to an E. coli outbreak. She opens bdeWatch to figure out what to do next.
Pathway 3: Boater Bob
Bob is transporting his boat from Lake Minnetonka to a lake up north that he’s unfamiliar with. He needs to figure out where the boat landing is and wants to be able to record the trip for future reference.
Defining the visual language
Next steps were putting together a style guide for bdeWatch that included a color palette, fonts, typography and high level patterns and components.
Typography system
UI kit
Usage scenarios
Scenario 1: Lake Closure
Wendy signs in to her desktop application to check conditions for her kayaking trip that day. She see’s that she has a notification as well as a few instances in her dashboard that Lake Nokomis is closed and affects her upcoming trip in a few days.
She clicks into her trip to remedy the situation, she’s immediately prompted with the alert to either cancel the trip or to pick a new lake to visit. Wendy chooses to explore the lake directory and clicks into a new lake to see more details.
She reviews and decides this is a good replacement for Lake Nokomis and adds it to her trip. She receives a confirmation that her trip has been updated and is prompted to send directions to her phone for her trip.
Scenario 2: Check-in
Boater Bob is getting his next trip set up from moving his boat from Lake Minnetonka to Lake Vermillion. He’s just pulled into line for the boat launch and takes out his phone to check-in.
He signs in, gets to the dashboard and sees his trip listed. He clicks into the trip and hits the “check-in” button. He then gets a confirmation that he’s checked in with an alert that his profile has updated since he’s hit 10 check-ins.
These profile levels are inspired by FourSquare, they encourage users to visit lakes to check-in or favorite and build up points to increase the lake credibility and advocacy.
Prototype walkthrough
After the visual design language was defined, I created fully fleshed out screens for the application on both desktop and mobile. I then coded those screens into a clickable prototype for two usage scenarios. Here’s a video that walks you through the prototype and designs: