About

Resume

Columbia Crossings Website Redesign

Transforming the marina booking experience—making it effortless for boaters to find slips, check availability, and complete reservations on any device.

Role

UX/UI Designer

Client

Columbia Crossings Marinas

Timeline

Aug 2024 – Oct 2025

Tools

Figma, Adobe Suite, Claude

Overview

Columbia Crossings manages three premier marinas in Portland—Jantzen Bay, Tomahawk Bay, and Hayden Bay—offering moorage, storage, waterfront experiences, and more. Their existing website made it hard for boaters to find slips, check availability, and complete reservations, especially on mobile.

My goal: Redesign the website and booking experience so users could quickly find and reserve slips, understand availability in real-time, and navigate the site effortlessly.

The Problem

Not mobile-friendly (even though 60%+ of users start on mobile)

Text-heavy and overwhelming content without clear hierarchy

Caused booking abandonment or unnecessary in-person visits

Hard to navigate and visually outdated design that didn't inspire trust

My Process

1
Discovery
Defined scope, personas, and
pain points
2
Information Architecture
Reorganized navigation and content hierarchy
3
Wireframes
Iterated low- and high-fidelity
versions
4
UI Design
Modular components and visual patterns
5
Testing
Usability testing informed refinements
6
Handoff
Collaborated with developers

Results

30-50%

Could book on mobile if flow was simple

55+

Age of many
costumers

Marina
locations

User types
identified

Design Principles

Real-time transparency

Show availability immediately

Progressive disclosure

Display only relevant fields for each user type

Design layout for mobile

Make booking simple on small screens

Human guidance

Clear messaging and access to real staff

The Problem

Announcement Banner

Rotating top banner for events/news, toggleable with arrows and clickable for full articles

Messaging/Chat Box

Clear indicator showing live
staff availability (not bots) for
human guidance

Collapsible Panels

Long-form leasing content
organized in expandable
sections to reduce overwhelm

Check Availability Bar

Quick-entry slip search with
minimal inputs, plus full marina browsing below

Modular Slip Cards

Cards with "more details,"
discounts, and location info,
plus auto-scroll functionality

Pricing Sidebar

Persistent panel showing cost,
add-ons, and discounts
throughout booking flow

Key UX & UI Decisions

Announcement Banner

Rotating top banner for events/news, toggleable with arrows and clickable for full articles

Check Availability Bar

Quick-entry slip search with
minimal inputs, plus full marina browsing below

Messaging/Chat Box

Clear indicator showing live
staff availability (not bots) for
human guidance

Modular Slip Cards

Cards with "more details,"
discounts, and location info,
plus auto-scroll functionality

Collapsible Panels

Long-form leasing content
organized in expandable
sections to reduce overwhelm

Pricing Sidebar

Persistent panel showing cost,
add-ons, and discounts
throughout booking flow

Results

+12 %

Increase in positive reviews mentioning ease-of-use

Faster

More intuitive
booking flow

Mobile

Significantly improved for majority users

Reflections

Learnings

Backend constraints shaped design decisions (e.g., spacing increments for easier coding)

Early design systems save time and reduce rework

Simplifying complex content into digestible
UI is essential

Next Steps

Post-booking onboarding (emails, facility tours)

Explore dynamic pricing and mobile app features

Test community engagement features for boaters

Personal Growth

Strengthened Figma and component-based design skills

Improved collaboration with developers

Honed problem-solving as the solo designer managing a full redesign

Lovable
Build software products, using only a chat interface.

Lovable
Build software products, using only a chat interface.

“ When my team hired Karina to design our UI/UX, we were pleasantly surprised by her research-based approach to designing our site, checkout process, and customer portal. Her direction, Figma wireframes and keen eye for detail were invaluable in helping my team focus on coding.
Beyond creating beautiful, research-based designs for our platforms, Karina worked with me to make them modular and reusable across multiple sites. This allowed us to move quickly and reduce developer overhead without compromising the quality of our product”