🧠
Research Mindset
🤝
What I Loved Most
🔁
What I’d Do Differently
-
Learned to separate my design perspective from the user’s reality.
-
Got sharper at conducting, analyzing, and acting on qualitative and quantitative research.
-
Discovered that understanding mental models leads to more empathetic and impactful solutions.
-
Real feedback from real users made the work meaningful.
-
Collaborating with peers across the globe brought fresh perspectives to my process.
-
Building empathy through behavioral insights made the design smarter—and more human.
-
I initially designed for desktop-first—when mobile was clearly the user's priority.
-
Next time: I'd lead with user research to determine platform use before diving into high-fidelity work.
🛠 Developer-Ready Assets
-
Built detailed wireframes to hand off precise controls, logic, and rules.
-
Created a style guide for future iterations—defining typography, spacing, color systems, and interaction patterns.
👀 See It In Action
🎥 Watch the Onboarding Walkthrough
Get a guided tour of how new users are introduced to weatherWavi.
👉 Watch on YouTube
🌀 Try the Onboarding Yourself
Click through the onboarding flow just like a first-time user.
👉 Launch the Interactive Experience
📱 Explore the Prototype
Test-drive weatherWavi’s clickable prototype to see how it all works together—from sign-up to forecast.
👉 Try the App
💡 What I Learned
-
Simple > Fancy. Users of all tech backgrounds crave intuitive, minimal interfaces.
-
Design isn’t about the product—it’s about how people use the product.
-
Regular usability testing and preference testing helped expose blind spots in my assumptions.
🔍 User-Driven Design
User feedback directly shaped:
Visual and content hierarchy
Onboarding flow
Interface layout
Core functionality
🔑 Key Takeaways
-
No design is ever finished—just improved. I embraced feedback as a tool for progress, not perfection.
-
Positive mindset = better outcomes. I turned critique into opportunity by staying solutions-focused and user-first.
-
Details drive usability. Sweat the small stuff—it's what makes the experience seamless.
Weather Wavi - A UX/UI App Design
Executive Summary
Our weather app will be a responsive web app that features wind, wave & weather reports, forecasts & statistics, that are customizable for sailors, surfers, divers, and any other water sports aficionados.
The Problem
Wind, wave, and weather reports are crucial in planning safe days on the water but most sources out there can be tough to understand, especially for new sailors, divers, surfers, or the like. Those who regularly participate in water activities want an intuitive, visually appealing, and quick way to comprehend complex weather information, so they can plan for a safe water outing.
The Why
Wind, wave, and weather reports are crucial in planning safe days on the water but most sources out there can be tough to understand, especially for new sailors, divers, surfers, or the like. This app will provide clear representations of this valuable information, on the go, to help water sports aficionados who have trouble understanding wind, wave, and weather reports and forecasts. It will provide risk measurements based on real-time live data, real-time safety alerts, and also allow additional information to be shared locally, so users can stay safe and have fun!
Phase 01. Understand
Competitors: Epic & Weesurf
Tools: Invision
Competitive Analysis
I analyzed some of the competition to discover weaknesses, see what's working, and discover opportunities to create new features and products to potentially meet and surpass the expectations of the users. After a thorough analysis of both Epic and Weesurf, I was able to gain insight into an app that prioritized visual appeal well and an app that prioritized its relative information well.
Phase 02. Research
Tools: Typeform | Zoom
Surveys
First, I created a survey targeted towards those who use weather apps and engage in water activities.
Interviews
Then, I interviewed 3 individuals between the ages of 33 - 40, using Zoom
I asked questions about:
-
Lifestyle
-
Frequency of weather app usage and why
-
Safety concerns prior to outdoor activity, particularly a water sport
-
What weather apps they use and what they like, dislike
-
Thoughts on a weather app with a chat, community, and tip features
-
Sign in experience and preferences with new applications
Phase 03. Define
Tools: Invision | Mural | Miro | Sticky Notes | Markers
In phase two, a lot of research data had accumulated, which created confusion and difficulty in analyzing it all.
The power of collaborative analysis was realized by placing the structure on qualitative research data through affinity mapping: combining the data from user research to identify user needs and pain points to identify behaviors, attitudes, needs, concerns, frustrations, and facts from the research.
Based on the user interviews, I organized each participant's behavior, attitudes, needs, goals, comments, quotes, and facts.
In order to build empathy, I defined high-level steps based on the user stories built so far and used Mural as my tool to make archetypes of personas.
Making an affinity diagram also helped to visualize the User's journey.
User Stories
“As a surfer…
…I want to quickly be able to check the weather and wave info. so I can prepare myself for a day out on the water.”
“As a lifeguard…
…I want to be able to be made aware and communicate with others of any impending weather conditions or hazards so that I can keep partons safe while I’m on duty.”
“As an adventurous traveler...
…I want to stay informed about weather conditions that might impact a day out on the water and be able to avoid any potentially hazardous locations.”
Building
User Personas
Building
User Journeys
Phase 4 - Ideate & Define
Tools: Optimal Workshop | Miro
After creating the user journeys, I developed user flows for each persona, which allowed me to construct an Open Card Sort to help define the sitemap.
I had 10 participants complete the open card sort consisting of 20 different cards using Optimal Workshop. Categories were not provided beforehand.
I eliminated some of the obvious categories from the sitemap to see how participants chose to categorize them on their own.
Let the writing speak for itself. Keep a consistent tone and voice throughout the website to stay true to the brand image and give visitors a taste of the company’s values and personality.
Refining Sitemap with Card Sort
Findings:
By eliminating most of the major navigation options for the card sort (e.g. Create Account, Log in, Onboarding, Settings, Locations, Home, etc. ), this exercise became more challenging; however, in order to fit as many feature cards into this card sort as possible, I chose this strategy.
01
This showed that the existing sitemap format was on track when participants grouped categories that were similar to how it was already structured. However, a few cards were grouped under more than one main navigation, which was consistent enough to modify the hierarchy so that co-existing hierarchies appeared.
02
They also labeled the navigation differently based on what they thought was likely to be more intuitive for them regarding where they would typically seek these features within the app.
03
By changing the navigation labels from "Home" to "Dashboard", "Alerts" to "Notifications", and "Community" to "Connect", the sitemap will be more cohesive.
04
Phase 5 - Design
Tools: Paper & Pen | Marvel | Balsamiq | Adobe XD
Sketching Low-Fidelity screens for efficient user flows
I then sketched different UIs based on the issues and user goals identified during the research and analysis phases, so that I could provide the best visualization of the screens and screen states for users flowing through the app.
Designing Mid-Fidelity Prototypes to bring the sketches to life
Designing Mid-Fidelity Prototypes to bring the sketches to life
Designing Low-Fidelity Prototypes to bring the sketches to life
Designing Low-Fidelity Prototypes to bring the sketches to life
Designing Low-Fidelity Prototypes to bring the sketches to life
By creating design prototypes, we were able to design the look and feel of a mobile-first, responsive web application.
After surveying and interviewing users, I decided to concentrate exclusively on mobile applications - a decision that was reinforced by creating journey maps for each persona.
Phase 6 - Test
Tools: Zoom | Miro | UsabilityHub | Test Script
Usability Testing
With a clickable prototype ready, I was able to conduct usability testing, and preference testing.
The goal of the study is to assess the interaction with the application prototype.
We would like to understand how users engage with the core features and complete basic tasks:
I conducted 5 usability tests: 4 moderated remote and 1 unmoderated remotely. I provided each participant with 4 scenarios to complete tasks and asked that they talk through their observations and decision-making so I could gauge their concerns, likes, dislikes, habits, and expectations.
-
creating an account
-
adding weather-related categories to a dashboard
-
checking the weather forecast
-
posting a report in the connect feature
Summary:
Three of the participants were able to navigate smoothly and understand the application's general purpose. The first and fifth participants had difficulty understanding the application's concept. The third participant struggled with the prototype and misunderstood the various tasks.
Participants ...
...were confused about how to customize the Dashboard
...struggled to locate icons to perform tasks
...felt some information in the sub-features could be condensed
...felt the text to too small and opacity too light to read to see
...misunderstood the icons that deterred task completion
...felt there wasn’t enough ‘call-to-action’ buttons to guide them
I then used Miro to organize the data further by creating clusters based on common themes describing the current user experience: Goals, Behaviors, Pain Points, Mental Models, and contextual information.
Participants ...
...were confused about how to customize the Dashboard
...struggled to locate icons to perform tasks
...felt some information in the sub-features could be condensed
...felt the text to too small and opacity too light to read to see
...misunderstood the icons that deterred task completion
...felt there wasn’t enough ‘call-to-action’ buttons to guide them
I then used Miro to organize the data further by creating clusters based on common themes describing the current user experience: Goals, Behaviors, Pain Points, Mental Models, and contextual information.
Iterations developed from testing
Preference Testing
A total of 21 self-recruited participants from the United States, United Kingdom, Germany, France, Norway, India, and New Zealand, partook in this preference test.
Test Objectives
Determine which Dashboard feature Onboarding screen is more appealing and engaging for participants.
Methodology
A preference test was conducted with Usability Hub, using two new screens developed for a new iteration of onboarding that reflected the the feature of customizing the dashboard and adding favorite. I displayed minor differences for the potential new onboarding screen: color, layout, and icons. Participants were asked to select the screen they preferred out of the two options provided and give a short explanation as to why they chose the screen they did.
Issues participants found with additional preference testing:
Design 1 (Left)
Visuals are too strong, too big Confusion about features in real-time
Design 2 (Right)
Messy, visuals are too light, text unreadable ‘Star’ (Favorite) icon as displayed, is confusing
Fixes
-Add clear ‘call-to-action’ Increase text size
-Increase opacity
-Visual guidance added
-Icon updated
-Test description for icon updated
While the onboarding screen was updated for the preference test, it was clear from the survey and further peer reviews that this type of onboarding explaining the feature was confusing to users.
My solution was to simplify the onboarding by using visual illustrations and displaying text to describe what the app offers.
During this phase I was able to use all the information gathered thus far to adjust and rework the design through peer feedback and designing for iOS Human Guidelines to reengage the audience.
In this stage, I discovered more saturated pain-points because there were more participants.
As participants in phase 2 of the user interviews were unable to preview the app's features in the App Store prior to testing the app, they recommended that traditional onboarding would be needed to demonstrate the app's functionality.
Feedback from participants proved this to be false.
As a result of the participant feedback, I decided to redesign the onboarding using coach-marks (learn as you go) and apply the method to the redesign, thus resolving users' issues with not understanding what features are and how to utilize them.
🎯 Accessibility & iOS Design
-
Designed with iOS Human Interface Guidelines from the start for clarity, consistency, and intuitiveness.
-
Used Stark for Figma to improve color contrast and focus order, enhancing accessibility.
-
Redesigned core UI elements: Navigation, Icons, Toolbars, Modals, Controls, and Alerts—all tested for clarity and function.
