Rebrand & Redesign
Designer & Developer
Mobile device
Figma & Chat GPT Plus
4 Months
A family owned scuba diving and fishing business in Belize engaged me to explore a full rebranding for their company. New name, logo, and a modern reservation system. I aligned this opportunity with my UX Design certification coursework, allowing me to apply real world challenges to an academic project.
My client aimed to modernize her online presence and gain a competitive edge by introducing a mobile first reservation system transforming his inefficient phone- and email-driven process into a seamless digital experience.
The original site was over 20 years old, had zero mobile device capability, which no longer reflected the quality or personality of the business. This rebrand aims to create a modern platform that supports mobile / online reservations and payments; it would be 1st in the region to have a mobile 1st design.
I conducted a visual and functional audit of the major dive companies in the region. The findings revealed a market of desktop 1st websites with similar ‘blocky’ layouts.
The environment is one of the main attractions to Belize. It was important to create a immersive and beautiful mobile experience that mirrors the beauty of the environment and make my design stand apart from the competition.
With the name ‘Salacia’ already established, I set out to modernize the brand’s identity. My process involved researching competitor designs and leveraging AI to generate creative iterations. The final direction was a tribute to both the Roman goddess of the sea and the client’s original fish-themed logo.
I considered several color combinations for the app with the colors of the environment squarely in mind.
Given Salacia’s location is an international travel hub, a variety of five distinct personas were identified. These personas represent the range of ages and dive experience from the cautious traveler to the seasoned expert.
Goals
Explore unique dive sites
Book tours and gear online
Maximize time in the water
Frustrations
Group minimums
Text is unorganized on page
No payment method info
Goals
Try something new safely
Clear guidance & training
Beginner friendly options
Frustrations
No Certification requirements
No safety assurance
No cancelation policy
Goals
Explore unique dive sites
Dive solo or small groups
Comfortable for solo diver
Frustrations
Lack of pricing for solo divers
Unsure of grouping policy
Condition of rental gear
Goals
Make memories together
Dive tours for mixed experience levels
Make most of limited vacation time
Frustrations
Dive tour skill level not clearly labeled
Schedule conflicts with other activites
Quality of rental gear
Goals
Easy translation into native language
Currency conversion
Confident in proof of reservation
Frustrations
Unclear pricing
Chosing right experience
Fear of booking wrong date
Customers can only make reservations or get further information via phone, email, or WhatsApp. This limits after-hours bookings, obscures real-time availability, and creates an inefficient workflow for staff.
No clear labeling of required diving experience, seasonal information, language options or refund policy for website visitors leading to hesitation.
Inconsistent information formating, outdated visuals, mixed typography and the absence of modern reservation system reduce user confidence, inspiring the customer to look for alternatives.
Once the needs of the user base were established, I started to organize application ideas. I decided to combine the key pain points and the desires of my client into 3 sections
Explore, Book, and Profile Management
Explore – Client wishes to showcase expanding services offered and provide clear labeling easing uncertainty.
Book – By offering a modern online reservation system the client can compete in the modern market and increase efficiency.
Profile – Adding a customizable profile allows users to have more of a custom fit experience gaining the trust of their customers.
My 1st priority was to establish the core function of the app, online reservations.
I created 2 user flows demonstrating how users could make a online reservation.
A profile feature was proposed as a way to help the business run more efficiently in early meetings with the client. The feature would allow his business to prepare gear in advance allowing for more time in the water for the customer instead of the shop but did not want to make it mandatory.
This flow shows the basic structure with a emphasis on exploration with an option to setup a profile.
1st time users are encouraged to explore all the site has to offer in a variety of different methods. This allows the user to see there is more to simply scuba diving available.
The user is not forced to setup a profile and can complete a sale by simply adding in payment information before checkout .
This flow shows the basic structure of a user who has already setup a profile and is making a new reservation.
The user is able to customize their needs with preferences if needed and allows client to better prepare for customer.
Paper prototypes allowed for rapid testing and iteration of the core features before committing to digital tools.
Based on the big pain points I focused on 3 questions for my 1st design.
There is overlap between the 3 and they all inform on one another.
Explore & Navigation can user navigate the app and are they curious to see more ?
Profile will users be interested in using the profile feature?
Purchase can users make a final purchase / reservation?
I took the best from my wireframe iterations and summarized them into a digital wireframe prototype.
The first round moderated & unmoderated usability survey was conducted with 13 participants.
The goal was to validate the core functions of the app.
I recruited friends and family for moderated and unmoderated survey participants, which enabled direct observation of user reactions. I found that testing participants new to wireframes introduced interpretation challenges. This introduced confusion unrelated to the product experience itself and may have influenced certain data.
This experience reinforced the importance of participant preparation and awareness of participants’ technical familiarity when conducting usability testing.
In future iterations, I would provide clearer context and guidance before testing to ensure feedback focuses on the product’s usability rather than the testing medium.
I took what i learned and made improvements to my design and began work on the hi fi mockup.
In a production environment, I would have conduct additional rounds of wireframe-level testing, however the Google Design course moves directly into Hi Fi prototype as the next iteration.
Some users did not wish to setup a profile to avoid the hassle.
Other users saw the potential for a profile and even had useful suggestions.
Logging into a profile would be useful to me, I could see what I have booked, access my QR codes, edit existing bookings, and review completed experiences.
Unmoderated survey comment
Since the profile is a core feature of the app, I updated its color, placement, and label to make it easier to find and understand.
Usability insights showed that core actions needed to appear above the fold. This approach still welcomes first-time users while allowing returning users to quickly access what they need without extra steps.
Several users were unclear regarding dive difficulty labeling. Reordering the activities from beginner to advanced, and adding explicit labels, created a more intuitive progression.
I prepared a second round of usability surveys and gave my survey more context and alerted survey participants to limitations and assumptions in this prototype.
Digital wireframes were converted into a hi fi prototype and a second round of studies were shared with friends, family and the Google UX design group.
Task 1 Navigation : I asked participants to revisit their interest in exploring different dive activities and see if the updated flow made it easier for them to find activities and navigate in general.
Task 2 Profile : In this round, we also asked users again about their interest in setting up a profile, to confirm that the new design made this feature clearer and more appealing.
Task 3 Users : We included a few questions about age, gender, and device usage to better understand who our users are and how they interact with the app.
Round 2 focused on validating whether the improved organization, clearer labeling, and prominent profile features addressed the issues discovered in Round 1. These tasks were selected to confirm whether the design changes successfully improved user understanding and engagement.
The survey also provided new insights about who are users are, concerns about legibility and more of their comments.
In Round 1, several participants expressed uncertainty about activity types and difficulty levels, so Round 2 focused on confirming whether the redesigned structure improved clarity and discovery.
65.4% of users could determine the difficulty of different dive activites
Users are overwhelmingly interested in exploring different activities offered by Salacia
15.4% found website navigation very intuitive
69.2% said navigation was easy enough
4 participants (15.4%) reported that navigation was still confusing after round 2.
Users in Round 1 offered mixed responses about whether they would use a profile feature. Since the profile feature was a priority of the client it became a more prominent and refined part of the updated design, Round 2 re-evaluated user interest to verify whether the clearer placement and labeling made the feature more valuable and intuitive.
69.2% of users are interested in saving time by setting up a profile and having more options.
One user (yellow section) was concerned about profile / payment cart security.
There still exists a section of potential customers who should not be ignored and equally served even if they don’t use the profile feature.
73.1% of users could read all text and button labels.
However several users mentioned a need to refine spacing and sizing.
In Round 2 to better understand who was testing the prototype and how they typically access similar apps. This helped contextualize the feedback and ensured that the design decisions aligned with the needs of actual users,
We had a wide range of user participants age.
57.7% of users surveyed were women
76.9% of users were new or learning scuba for the first time.
53.8% of users prefer Mobile phone to book their vacation with 42.3% who use desktop as their primary device.
Visual Hierarchy & Content Prioritization: Designed primarily for mobile viewports, the interface uses a responsive typographic scale ranging from 32px bold headers down to 14px captions. This distinct hierarchy creates clear visual anchors, allowing users to effortlessly scan different options.
Custom card containers neatly encapsulate complex dive schedules and pricing info, creating clear visual boundaries that organize content into digestible steps. primary CTAs (like the bright orange Purchase Now! and Add another dive or activity! buttons) stand out against the deep teal palette to instantly direct user focus toward high-converting checkout actions.
Mobile-First Responsive Design: Built specifically for mobile interaction, the layout uses fluid spacing and flexible card grids to adapt across small viewports. All primary interactive elements including booking buttons and calendar selectors are engineered with a minimum tap target of 44×44px to prevent mis-clicks and ensure easy thumb navigation
Prioritizing Clarity Over Decoration: Pairing an ocean-inspired color palette with intentional section spacing and clean card layouts, the design sets an immersive atmospheric mood while eliminating unnecessary visual noise.
| Token / Role | Size | Weight | Line Height | Letter Spacing | Use Case |
| Display Heading / H1 | 32px | Bold | 40px (1.25\times) | 1px | Hero and page main title |
| Heading / H2 | 24px | SemiBold | 32px (1.33\times) | 0px | Topic headings |
| Button / Medium | 18px | Bold | 24px (1.33\times) | 0px | Activity navigation button labels |
| Input / Text | 18px | Medium | 24px (1.33\times) | 0px | Booking drop-down labels |
| Button Large | 18px | Bold | 24px (1.33\times) | 0px | Contact company button labels |
| Card Title / H4 | 16px | Bold | 20px (1.25\times) | 0px | Activity card titles |
| Body Emphasized | 16px | SemiBold | 24px (1.5\times) | 0px | Unique CTA / promo banner text |
| Body Text | 16px | Regular | 24px (1.5\times) | 0px | Standard body paragraph text |
| Small CTA | 16px | Medium | 20px (1.25\times) | 0px | “See More” CTA button labels |
Intent-Driven Path (Pick by Date): Targets planner type users with fixed travel itineraries. They select specific dates on the home screen calendar to instantly filter available excursions, minimizing search time and driving quick conversion. 
Exploration-Driven Path (Pick by Activity): Targets discoverers looking to explore all offerings (e.g., Scuba, Fishing, Kayak). Browsing category cards lets them view activity details, difficulty levels, and photos before choosing a date.
Customization & Consideration: Regardless of the entry path, both user groups converge onto detailed activity page featuring transparent scheduling, real-time seat availability and details about the activity. Those that choose to setup a profile on the site can also create custom gear packages to suit their needs for added convenience.
Profile & Payment Setup: Captures essential diver details (certification, party size) and saves payment information early to reduce friction.
Multi-Item Cart & Purchase: Allows adding multiple activities before a clear 1-click purchase confirmation screen complete with QR pass verification.
My component library establishes a unified visual language by pairing a clear button hierarchy from high-emphasis conversion CTAs to subtle filter pills with functional, domain specific iconography. Together, these standardized interactive controls and visual indicators streamline user navigation, highlight key excursion details, and drive friction-free bookings.
Primary Action Buttons: High-emphasis orange pills reserved for key conversion steps
High-Contrast and Accessible Touch Targets: Prominent orange CTAs and dark pill containers with white text create high contrast visual hierarchy against background imagery. Generous button height and padding meet mobile touch target guidelines (minimum 44×44 px) to prevent mis clicks and improve accessibility for users with motor impairments.
Multi-Language & Accessibility Preferences Menu: Dedicated controls in the side menu allow users to easily switch languages (Español, Français, Deutsch, etc.) and toggle accessibility settings, supporting inclusive navigation for non-native speakers and users with specific display needs.
Dual Visual Coding for Complex Information: I paired clear iconography with distinct visual badges such as difficulty flags, and status indicators making complex booking details readable at a glance for users with cognitive or visual impairments.
Structured Form Inputs: On the profile and checkout screens, form fields include explicit labels and inline hints rather than relying solely on disappearing placeholder text.
Transparent Communication Channels: Offering multiple direct contact methods (Email, WhatsApp, Phone) in standardized pill layouts ensures users can easily seek support or alternative accommodations.
This mobile-first layout centers around ergonomic interaction, making complex screens comfortable for natural thumb reach. Generous proportions and intentional spacing keep content highly readable without visual clutter Strict Base-
8 Spatial Rhythm: By standardizing all Auto Layout padding and gaps to increments of 8px, components across every mobile view maintain strict mathematical harmony and visual balance.
Consistent Vertical Flow & Density: Card stacks, form controls, and interactive list items demonstrate unified vertical rhythm, giving complex screens like the calendar picker and activity listings a clean, structured appearance.
Predictable Component Separation: Generous 8px based spatial boundaries ensure distinct visual separation between distinct content groups, making dense UI layouts effortless to scan and read on mobile viewports
Designed specifically for a mobile viewport, establishing accurate first-fold coverage and scrollable canvas depth
Overall, the second round of usability testing confirmed the app is intuitive and supports users in completing key tasks. The feedback we received highlighted a few important opportunities for refinement—mainly around visual clarity, spacing, and reinforcing the purpose of the profile feature. These insights will guide the next iteration, focusing on polish, accessibility, and clearer communication of value.
There are additional features that weren’t covered in these first two rounds of user surveys. Future iterations, will explore these features further to ensure they align well with user needs.
I presented a high-fidelity Figma prototype that brought the app’s concept to life, allowing the client to experience the product’s flow and feel firsthand. The client was thrilled with the results, noting that the design not only met their business requirements but also incorporated their feedback seamlessly. This prototype served as a powerful tool for visualization, leaving the client confident in the project’s creative direction.
