Because finding the perfect beach should be as fun and relaxing as being there.
My Role:
UX Research, UX/UI design
Timeline:
4 months, 5-20 hours per week
Date:
December 2024
Tools:
Figma / FigJam, Adobe Illustrator & Photoshop, Firefly, DALL-E, ChatGPT, pixabay, Zoom Meetings, Apple Notes
Background
Searching for the perfect beach is frustrating and time-consuming - endless searches, scattered information and uncertainty about conditions takes the fun out of planning.
BeachFinder solves this by offering a seamless way to discover beaches that match a person's specific needs, whether they’re looking for an early run along the ocean, a family-friendly sport, or a quiet place to unwind. With real-time updates, user reviews, and personalized recommendations, BeachFinder takes the guesswork out of beach trips so people can spend less time searching and more time enjoying the ocean.
The Problem
Beach Lovers are frustrated trying to find their ideal beach
Finding the ideal beach for specific activities that suits the beach lover's personal preferences is a time-consuming and frustrating process, often involving long hours toggling between multiple windows or apps. Beach goers struggle to quickly access reliable information such as: beach conditions, amenities, crowd levels, and suitable activities like running, surfing, or wildlife watching.
Beach Lovers are in want of an app that streamlines the search process, provides personalized recommendations and real-time updates, in order to find the perfect beach that suits their unique desires. They wish researching was even half as enjoyable as spending time at the beach.
Project Goals
The goal was to create an app that makes finding the perfect beach simple and stress-free. By providing all the essential information in one place, BeachFinder eliminates the need to search multiple sites, saving users time and frustration. The app is designed to be clear, easy to use, and intuitive, allowing beachgoers to quickly enter their preferences and navigate to the information they need.
How might we streamline the process of narrowing down beach options to reduce stress, helping people save time and easily find a beach that suits their preferences?
Empathize
Research I Competitive Analysis I User Interviews I Affinity Map I Research Insights
Overview:
Before I can create a solution, I first need to understand the specific problem I'm going to solve. Research is the key to discovery. The research process helps me to define the users’ goals so I can design a site that provides them the solution.
​​
I enjoy the research process as much as the design, because I’m able to use both my analytical and creative skills. I also enjoy working with people and learning ways to help them achieve their goals.
Research Goals
I wanted to discover the pain points beach goers experience when searching for a beach and what their preferences are when it comes to their ideal beach trip.
Objectives
-
Determine pain points
-
Understand needs and requirements
-
Understand preferred methods of searching
-
Learn what features should be included
Competitive Analysis
I researched competitors content and area of focus, seeking insights for how to approach my design and where I could offer an improved experience. There was only one clear competitor, but their app was basically unusable. They clearly put a lot of thought into marketing and making it “look pretty”, but trying to actually find beaches was a frustrating process. It was only useful if you already new which beach you were wanting to visit.
User Interviews
I interviewed five people from a variety of backgrounds and ages who go to the beach for varying reasons and purposes.
-
People who love going to the beach
-
25 - 60 years old
-
Variety of backgrounds
-
Variety of beach preferences
User Goals and Motivations
-
Recharge mentally & physically
-
Strengthen creative & spiritual connection
-
Create memorable experiences with family or friends
-
Exploring local food & culture
-
Find beaches with desired amenities
-
Find inspiration after serene beach experiences
User Pain Points
-
Lack of time to research beaches
-
Overwhelmed by too many options
-
Reduce the stress of planning
-
Difficulty finding uncrowded beaches
-
Frustrated trying to find suitable beaches that meet needs
-
​Overwhelmed by commercialized or overly popularized beaches
-
Arriving at beach, then find it unusable
Affinity Map
I created an affinity map based on information I gathered conducting interviews. I identified key themes and patterns which revealed pain points, needs and requirements, and desirable features that will help beachgoers find their perfect beach.
Key Research Insights
What Beach Goers are looking for in an app...
-
To plan efficiently and save time researching.
-
To discover the perfect beach that suits their preferences.
-
To explore local culture.
-
To stay informed by having access to real-time information.
-
To reduce stress by having a simplified option for searching.
-
To create memorable moments.
From the interviews it was clear that people are frustrated by the amount of time, and what is required, to find a beach that meets their requirements.
Define
Personas I POVs & HMWs
Overview:
Creating user personas, POVs and HMWs was beneficial in helping me narrow down the users’ goals, motivations, needs, and pain points. Getting specific about the users' wants and needs before ideating helped me to stay focused throughout the design process on the people that matter – beach goers looking to reduce the stress of planning trips to the beach.
Personas
This is Alex
Alex represents people who want to find beaches for specific activities (e.g. long runs along the water) as well as specific amenities in the area (e.g. bars/restaurants).
POVs & HMWs
POVs Statement #1: Focus on Saving Time
I want to help people with busy, hectic schedules who are rejuvenated by spending time at the beach save valuable time so they can easily find the perfect beach without the frustration of researching and comparing options, allowing them to fully enjoy their experience.
HMW Question #1
How might we help people with busy schedules quickly and easily discover tailored beach recommendations, simplifying their planning process so they can save time and fully enjoy a rejuvenating experience?
POVs Statement #2: Focus on Finding "The Right Beach"
I want to help users find beaches that suit their desired preferences so they can enjoy a beach experience tailored to their needs without the hassle of searching through unreliable or overwhelming information.
HMW Question #2
How might we help provide personalized beach recommendations that match users' desired preferences, making it easy for them to enjoy a tailored and stress-free beach experience?
POVs Statement #3: Focus on Reducing Stress
I want to help people reduce stress during the planning and research stage by streamlining the process of narrowing down beach options, so they can easily find a beach that suits their preferences without feeling overwhelmed.
HMW Question #3
How might we streamline the process of narrowing down beach options to reduce stress, helping people easily find a beach that suits their preferences?
Ideate
Sitemap I User Flows I Low & Mid-fidelity Wireframes
Overview:
Discovering what problems users are having and then defining the problem to solve, it was time to start creating the solution. Before jumping into the designs, I created a Sitemap and User Flow. These were critical in helping me ideate the visual solution, because the next steps were to create low and mid-fidelity wireframes.
Tools: Figma, FigJam, Pen & Paper
Sitemap
Before brainstorming possible solutions, I needed to consider how I would structure the site in order make it easy for users to find what they want.
I created a sitemap to help me visualize how the pages should be connected to one another and how the information should flow on the pages.
User Flows
Next, I needed to create assumptions about how my users would use and navigate the site.
My first step was to map how users will move through the site to accomplish their goals. I needed to consider the user’s perspective as they carry out the required steps to complete a task or goal.
Wireframing
Tools: Pen & Paper / Figma
Creating wireframes—starting with low-fidelity sketches and progressing to mid-fidelity designs in Figma—is a crucial step in my design process. Low-fidelity wireframes allow for quick brainstorming and iteration, helping me establish the core layout, structure, and user flow without getting distracted by details. Moving to mid-fidelity wireframes in Figma helps me refine these ideas, adding more clarity to functionality, spacing, and interactions while keeping the design flexible for changes. This step-by-step approach ensures that usability and navigation are well thought out before I invest time in high-fidelity designs and prototypes. By refining the structure early, wireframing saves me time, reduces rework, and leads to a more intuitive and user-friendly final product.
Low-fidelity Wireframes
I brainstorm best using pen and paper because it allows me the freedom to mess up as I come up with ideas. I’m able to generate several ideas quickly before moving into the digital realm.
Mid-fidelity Wireframes
I generated mid-fidelity wireframes in Figma from the low-fi wireframes I sketched out. I created an End to End Application.
Due to the amount of content on the site, all the content doesn’t fit within the screen dimensions, requiring users to scroll in order to view all the content.
Design
Branding I High-fidelity Wireframes I Prototypes
Overview:
I enjoy the process of creating visuals, whether for clients, target audiences, or in my personal work. I find it satisfying seeing my ideas "come to life" - in this case creating layouts and adding color, images, and content. So I enjoy reaching this particular part of the UX/UI design process.​​
Tools: Figma, Adobe Illustrator & Photoshop, pixabay, Firefly, ChatGPT, Pen & Paper
Branding
Branding is a critical part of design because it shapes how users feel about the app before they even use it. A strong, cohesive brand builds trust, recognition, and emotional connection, making the app inviting and intuitive. Every design decision—from colors and font choices to iconography—was made to ensure clarity, ease of use, and a seamless experience, reinforcing that BeachFinder isn’t just a tool but a trusted guide for beach lovers.
​
Designing the branding for BeachFinder my aim was to create a visual identity that reflects the app’s purpose—making it easy and enjoyable for users to find their perfect beach. I focused on elements that evoke adventure, relaxation, and connection, ensuring that the logo, colors, and typography align with the emotions and needs of beachgoers. Choosing a minimal and playful style keeps the brand approachable, while colors like ocean blue, turquoise, and warm golden tones reflect both serenity and excitement.
Logo
I designed a logo and used colors that symbolize the values of beach goers. I sketched out thumbnails, chose the one that best represented my mission, and made the final design using Adobe Illustrator and Photoshop.
The wave + heart + orange circle for the sun logo was chosen to represent the love people have for the ocean, the joy of beach experiences, and the warmth of the sun.
High-fidelity Wireframes
Using the mid-fidelity wireframes, color palettes, typography, and overall branding, I created high-fidelity wireframes of all the pages. I used Firefly to generate some of the images, pixabay for license free stock images, and ChatGPT to fine-tune copy.
Prototype
To ensure the site would meet the approval of users, I used Figma and created prototypes with the UI screens I designed.
Goals
-
Is the site easy to navigate?
-
Is it easy to find information?
-
Does it contain the information they desire?
-
Do they find the site time saving?
-
Is it easy to use the filters?
Note: Prototype includes revisions that were made after usability tests were conducted.
Test
Usability Testing I Priority Revisions
Overview:
I enjoy the testing stage because it helps me understand what worked well and where I need to improve.
​
This process was the culmination of all my hard work and effort. Did I succeed? Only testing a prototype would provide the answer. And if I didn’t succeed, testing would help me know what needed addressing so that I could revise the design until success was achieved.
Usability Testing
Tool: Remote testing with Zoom & Figma / In-person testing with Figma & iPhone Notes
I used in-person, Figma & iPhone Notes to run live user tests. This allowed communication to happen immediately between the testers and me. Notes transcribed the conversations, saving considerable time. Transcriptions helped me remember key areas that needed to be revised, as well as comments from users.
-
5 Users
-
Ages 25 - 60
-
Remote testing & in-person testing
Assigned Tasks
-
You want to find beaches for a specific activity.
-
You want to find beaches you saved from a previous search.
-
You want to set "filter preferences" in order to save even more time when performing searches.
Follow Up Questions
-
Was it easy or difficult to figure out where you need to go?
-
Do categories, locations, imagery, and phrasing make sense? Why or why not?
-
Did you find it easy or confusing to navigate? Why?
-
What are your thoughts about the overall design of the site?
-
Based on your experience, would you revisit the site? Why?
Testing Insights
Task 1: Find a beach for doing a specific activity
It took everyone at least 30 sec. to acclimate to the site. 2 recognized the "filter" icon and tried it first.
Task 2: Find beaches you've saved
Because users were already aware of certain areas, this was an easier task. There was some confusion about the "save" icon.
Recommendations
-
Increase the height of the buttons for fingers.
-
Add a description with the icons.
-
Make the "filtered words" square instead of round, to eliminate the confusion that they're not buttons.
-
Change the word "feed" to "visited" on the "User's Profile" in order to clarify its purpose.
-
Alphabetize the "Filters" under each section.
-
List warnings on the page vs. having to view in another page.
-
Allow users the option of what will be shown to them on the "single beach view". Add this to the page for "Preset Filters".
Priority Revisions
I made revisions based on the testers recommendations. Due to the subtle nature of changes, this required minimal time. I created a priority list based on what was important for removing any confusion. I made 4/7 of the changes that were recommended, saving the last three for later revisions due to time constraints and because they weren’t causing any critical issues.
User Testing Feeback
Users Overall Thoughts
5/5 Users are excited about the App
Users love this app because it’s inviting, intuitive, and easy to navigate. They also love that is has a happy, uplifting vibe while also giving them complete control over finding their ideal beach. With all the information they need in one place, they said it will be their go-to resource they’ll rely on again and again. They can’t wait to use the app.
“Wow! I love this site! I love how easy it is to use, I love how much time it will save me searching, and I love the colors. Beautifully represents the beach."
Kris (Avid Traveler & Beach Lover)
“This site is amazing! It has everything I want and need to know about a beach - and all in one place! No more need to open multiple sites.”
Anita (Beach Aficiando)
Final Thoughts
Challenges
Turning Complexity Into Simplicity
Designing BeachFinder came with several challenges, primarily transforming a large amount of information into a simple, user-friendly experience. The app needed to provide details on beach conditions, activities, amenities, and reviews without overwhelming users. Striking the right balance between comprehensive information and a clean, intuitive interface required careful organization, prioritization, and thoughtful UX design.​
Meeting Diverse User Needs
​Another challenge was ensuring the app catered to diverse user needs, from surfers checking wave conditions to families looking for kid-friendly beaches. Creating an effective search and filtering system was key to helping users find their ideal beach quickly, while keeping the process intuitive and hassle-free. Additionally, maintaining visual consistency and branding was essential to capturing the spirit of adventure, relaxation, and connection that defines the beach experience.
Key Takeaways
Designing BeachFinder reinforced the importance of simplifying complexity to create a seamless user experience. One of the biggest takeaways was learning how to prioritize information, ensuring users get what they need without feeling overwhelmed. By carefully structuring content, refining filters, and maintaining a clean layout, I was able to balance comprehensive beach details with an intuitive interface.
​
Another key lesson was the value of iteration—starting with low-fidelity wireframes and gradually refining the design helped clarify navigation, user flows, and overall usability. Testing different layouts and filter systems ensured the app remained efficient, visually engaging, and easy to use. Ultimately, overcoming these challenges required a mix of strategic organization, user-centered thinking, and a commitment to keeping the experience simple, yet powerful.
What I'm Most Proud Of
Aesthetics & Overall Design
What I’m most proud was designing an app that created a seamless, well-structured experience that makes beach discovery effortless. Also, how I was able to transform complex information into an intuitive and stress-free tool for every beachgoer. By keeping the users in mind through each step—from organizing content to refining visuals—helped keep me focused on creating a balance between functionality and enjoyment, ensuring that users can quickly and easily find the perfect beach.
​
I'm especially proud of how the branding and design capture the feeling of adventure, relaxation, and connection that make beach experiences so special. I loved seeing how users responded to the color palette, noting how it evoked the natural beauty of the ocean and beach, making the app feel both inviting and immersive. From the thoughtfully designed logo to the soothing blues, warm beige, and golden accents, I carefully chose every detail to enhance the user experience and build trust in the app. Watching the project come together—not just as a functional tool, but as something engaging, intuitive, and visually appealing—has been incredibly rewarding.
Accomplishing My Goal: Realized it was achieved based on users feedback
I’m proud that I was able to accomplish my goals for BeachFinder—creating an intuitive, enjoyable, and efficient way for users to find their perfect beach. The real proof came from user feedback during testing of the prototype, where users consistently praised the app’s ease of use, clear navigation, and inviting design. Seeing firsthand how the thoughtful organization, branding, and features came together to create a seamless experience reassured me that the effort put into refining every detail paid off. Knowing that the app truly enhances the way people discover beaches makes this achievement even more rewarding.