My field study souvenir
Portland Spirit Cruises and Events
Redesigning a mobile site by providing users with an informed cruise experience
Project Info
My Role
UX/UI Designer
User Research, Qualitative Data Synthesis, Sketching, Visual Design, Wireframing, Prototyping, Usability Testing, Bad Boat Joke Generator (there are many of them ahead)
Tools
Figma, pen and paper, Google Suite, Notion, Adobe Photoshop
Platform
Mobile web app
Timeline
4 weeks
Overview
Portland Spirit Cruises and Events is a local sightseeing cruise company in Portland, Oregon. Having never experienced this unique adventure, my friend and I wanted to feel the wind in our hair and decided to book a dinner cruise. After landing on Portland Spirit’s mobile website I was disappointed by the difficult experience. I found Portland Spirit Cruise and Event’s mobile web app had an outdated visual design compared to other travel sites along with poor usability making it difficult to compare options and make a purchase decision.
I redesigned the mobile web app with familiar navigation and checkout patterns from existing travel sites, provided up-to-date visual design to increase users' trust, and reduced purchase decision time.
Before and after: a sample of the changes made includes filterable search results and consolidated cruise info on one page.
Interactive solution preview - scroll through a few final screens
Understanding the Cruise Experience
Usability tests and an onboard Spanish coffee
To understand the experience better, I began the research process by watching users conduct a usability assessment on Portland Spirit's current website to validate my assumptions about poor usability, complicated discoverability of cruise options, and a challenging (and very tiny) booking process.
I also published a survey and conducted interviews with users who find and book local sightseeing trips. For an immersive understanding of the cruise experience, I also conducted an ethnographic field study.
Screens from the current site usability assessment
Field Study
To fill in the gaps in my understanding of Portland Spirit cruises users, the booking process, and the current services offered, I conducted an ethnographic field study.
This was particularly helpful because I was able to experience the challenges with booking and boarding firsthand, I was able to observe the average cruise passenger, and understand the existing business practices (not to mention enjoying a Spanish coffee and experiencing the delight of seeing the ships' crew singing any song you request with piano accompaniment!).
Research Findings: choppy waters
My research revealed that Portland Spirit's website is frustrating to use and doesn't instill confidence during a user's purchase decision. All users mentioned they wanted to know if their experience would be worth the time and money. While users noted they used Portland Spirit's site to learn more about offerings, their main task was to easily purchase a ticket.
Expectations
Users expect the checkout and arrival processes to function like other travel sites. They also expect to be provided with enough information so they know what will happen before and during the cruise.
Discoverability
Cruise options, protocols, and the "general vibe" should be easy to find and understand with minimal effort. All users were overwhelmed with decision fatigue and lost trust in the current site.
Mobile Ease
Users need to be able to make quick decisions and easily use the site on their phones. A large amount of information is currently buried in other pages causing users to abandon the process.
Meet Marley, the Party Planner
To focus my efforts on redesigning the booking process on Portland Spirit's website, I created a persona based on my understanding of the typical user. I would use Marley as a measure for success during usability testing.
Marley's ultimate goal is to efficiently find and book a cruise
She doesn't want to waste time comparing options
She needs to make sure their large group can be accommodated
Sailing the Solution Seas
Let's simplify booking for Marley
How can I redesign Portland Spirit Cruise's site to reduce the time and energy it takes travelers to make a cruise purchase decision while increasing their trust visually?
Using Marley as a representative of the target users, the solution to the booking challenge is to streamline the process while providing the right amount of information along the way. By allowing users to easily filter search results using familiar design patterns before they've moved into the ticket purchase will provide them with freedom of choice and the ability to make an informed decision.
Filter Options
Keeping Marley's main task of booking a large party in mind I focused on working out a simplified yet familiar search and filter process with mid-fidelity wireframes.
After sketching some low-fidelity ideas, I used mid-fidelity wireframes to figure out the details. I referenced existing travel and cruise websites, Material Design guidelines, and Human Interface guidelines while working out my ideas. After much feedback from fellow designers and several iterations later, I landed on a sheet design to provide focus and simplicity.
A small sea of branding changes
Updated Branding
Users' trust in Portland Spirit Cruises' current site was affected by their outdated visual design, so an update was needed.
Not wanting to steer too far away (pun intended) from their current colors, I used a photo from their gallery as inspiration and increased the vibrancy of their existing palette. I also swapped their primary green color with their secondary blue choice. This complementary color scheme updates their brand for a more cohesive and current feeling.
Wireframes
After working out details with mid-fidelity wireframes I used the updated branding for high-fidelity wireframes. The booking flow was designed with the persona's task in mind for a usability test to validate the success of the redesign.
Utilizing wireframes in stages was essential to work out the task flow in a logical way. Using simplified navigation, familiar filtering options, consolidated information, and a visible purchase total, a streamlined process was created to increase users' trust, and for an informed experience.
The Maiden Voyage
Prototyping and testing
To continue my overuse of boat jokes- much like launching a ship on its first journey at sea, also known as the maiden voyage, I needed to launch the redesigned site on its first journey with users for testing.
Usability Testing
To understand if the redesign would reduce time spent on the discovery of options and on the purchase decision, I conducted one round of 4 moderated usability tests.
The test objectives were focused on validating the task flow, usability, and comprehension of offerings.
Success
All users quickly completed the tasks with 100% success, the feedback was positive about the visual design, and the booking process was faster and better understood.
Pain Point
The biggest issues were related to how Portland Spirit Cruises' current business processes and website copy. For this project, I maintained the website body copy and the requirement of every guest's name to board, but those two things gave every participant issue. In the future, I will decide sooner if I will take the liberty to change those things or stick to them.
The Final Product
Portland Spirit Cruises & Events
The redesigned sightseeing cruise website allows you to search for a trip based on your criteria, quickly learn trip details, check out easily, and access your purchased ticket for an informed cruise experience.
Interactive Screens: scroll through Portland Spirit Cruise's redesign
Try it out!
Try it out by clicking the link below to open the live Figma prototype. This prototype's objectives are to test these user tasks:
Find a Portland dinner cruise on March 5th for seven people
Add the Admiral's package
Check out
Find your purchased ticket
Reflections
Proposed Next Steps
Further refinement of the user interface
Add screens for testing different user flows
Conduct further usability tests
Challenges
Usability is more important than originality. At the beginning of this project, I was preoccupied with solving the booking process in a unique way but conducting casual impromptu testing with mid-fidelity screens revealed that wasn't the most efficient way to approach this problem.
Key Takeaways
Test often and early! Testing with users often and early in the process will reveal pain points you have overlooked because you're too close to the problem.
When redesigning, question everything. For this project, I chose to leave some existing elements unchanged but an A/B test would've provided insight into if that was the best move.