CruiseBuddy
OVERVIEW
Team
Creating a content-generated website with reviews helps guests discover the best cruise based on ratings and personal testimonies.
2 Designers
4 Developers
The Challenges
Why?
Who is this for?
Cruises are a big part of my life growing up in South Florida. Cruises are fun and carefree (as they should be right). However, trying to find one is everything more than that: booking portals, scattered public opinions, and messy user experiences websites.
Why is this important?
Our goal is to give accessibility to anyone that seeks to experience booking a cruise and provides businesses with greater reach for our users to book their vacations while building excitement for the potential consumer, by reviews, item by item descriptions, and ratings.
Anyone who is looking to book an cruise, by reviews, item by item and rating.
Goals
Create a “dead-simple” web experience where people can easily find reviews on a cruise, then book quickly and painlessly.
LEARN
Learn to Build
In this phase, my team asked questions and made an observation; everything we could learn to understand was the experience of booking cruises. First step is Competitive Auditing
Competitive Auditing
Let’s Write a Review
Within this process, we learned many travel websites run on review-based systems. We wanted to keep what is normal and not change it up for our users.
FILTERS, FILTERS & FILTERS
It is where we learn about what's out in the market and what is working and not. We discover that people are used to having filters when searching for travel.
Data Analysis
To understand the cruise industry and the behaviors of our users, we looked at numbers.
Google Surveys
We conducted a survey to test our assumptions and we learned more about cruisers' behaviors. We created a 13 question survey and received 29 responses. This survey used qualitative and quantitative questions to discover what features users may want from our site.
With this insight, we added the “Hot Cruise Deals” module as the first section after the hero.
DEFINE
Problem Statement
What are we solving?
We worked as a team to create a definitive goal; making a problem statement helps the team have a roadmap for probable solutions. This ideation method is based on Lead UX methodology
Assumptions & UX Strategy
Are our thoughts the truth or assumptions?
UX Strategy to guide our general direction. Our assumptions become our UX strategy for gaining more information.
Here are our needs, solutions, beliefs, and From - To UX Strategy.
Persona
Who’s our target audience?
To continue the framework, my team wanted to create an audience that would illustrate our persona pain points and needs. My team and I made two personas, Sandra Garcia (show) and Gordon Haney. During this process, we create questions to ask ourselves about Sandra and Gordon such as what they do for a living and what they would like to do based on social listening.
User Journey
During this time, we think about our potential users and how they would use the product before it becomes alive, after sitting down with our favorite tool post-it. My team and I came up with five defined stages.
Ideation/ MVP Session
“I’ve got another, write it down”
Hae-Yang and I hosted an ideation session to generate ideas, define our KPIs (key performance indicator is a type of performance measurement) and decide on what features to include in the MVP. We had the dev team, the technical advisor, and other teams ensure that ideas followed our branding.
Rapid Ideation
“No bad ideas are welcome here! “
During the session, we emphasized that this was a safe space to generate ideas free from judgment. If it pops up in your head, write it down! During this workshop, we wanted our participants to know the importance of a judgment-free space of ideas. All “good ideas” are building blocks of great features and “bad ideas” inspire better ideas.
MVP
Using stickers, we voted on each feature. We reminded the team to vote only on the features that would help achieve our KPIs.
Using the MoSCoW method (must-have, should-have, could-have, won't-have), we sorted the top features into buckets of prioritization. We must ruthlessly prioritize so we don't waste time, money, and energy building features that bring little value to our users.
Site Map
A sitemap helps developers to have a visual presentation of how many pages to build and how they follow. This allows the engineers to have a high-level understanding of time, level of difficulty, and suture routes of navigation in the database. This was the first item of handoff of MVP.
DESIGN
Design to perfected
This moment becomes feedback loops of validated ideas and testing assumptions.
Visions can take many shapes (wires, IDX, comps)
Sketch, test, iterate & repeat
It was hard to resist the temptation to dive right into my computer. But through sketching, you can get tons of ideas out and test them in a short amount of time.
v1.0 wireframes & feedback from users
Wireframes
Cruisebuddy goes mid-fi
We move to wireframes in black and white this helps the user not be distracted by the colors, photographs, and fonts. The testing continues: we tested different versions of our wireframes with users to test our hypotheses.
Lo-Fi Prototype
During this time we wanted to test the functionality of the website.
For this project's scope, we came to the solution that we would use the Hae-Yang homepage and my submission forms design
Moodboard
The guide for creating the visual style.
During this moment we created a color psychology environment and which colors or imagery we would like to give our users. For this project, since our users are mostly booking cruises where they might be going to islands. As we decided to keep the colors tropical and very calming.
High Fidelity Mockups
Here, we created the first color skeletons of our product. The testing continues: we tested different versions of our wireframes with users to test our hypotheses.
Design System
We organized a design system by colors, symbols, fonts, text styles, and iconography into a design system manager to ensure the development team had what they needed to build our designs.
EXPERIMENT
Test to find faults
Taking our product to the streets for users to test
User Testing
We took it to our target users: Bayside Market Place which is the heart of Miami Cruise Touristment *
We took it to the streets as part of our test plan. We figured that Bayside, located at the Port of Miami, would be our best place to find our target users and test our product with them.
I SMELL REBELLION. IN THE AIR
Using cookies as our lure, we gained valuable feedback…before getting kicked out by security. Worth it.
High- Fi Prototype
At the start, we prototyped our wireframes to get early feedback on our design choices.
IXD
Design system to manage assets.
Example 1
Sticky Navigation
The secondary images on the cruise detail page illuminate upon hover and lightbox on click.
Example 2
Illuminate
The secondary images on the cruise detail page illuminate upon hovering and lightbox clicking.
LAUNCH
Conversations, reactions, A/B testing and documentations
User Flow
Search Fields Options
Writing and reviewing search fields are always available for the user to use if selected.
Filter Flows
Users can be able to either from the homepage or the Cruise Product Page. (CDP)
Final Design
HAND-OFF
After, we believe that we have our skeleton and designs finalized. We created a Google Folder with the design mockups, assets, etc.
Developer Meeting
After getting our designs done and we packaged everything, we sat down with our team. We structured it as a single source of truth (SSOT) to ensure the dev team uses the most up-to-date assets and information.
Items that we spoken:
Invision DSM
Technical Issue
Read me
Sprint
Inspect Code
Using the inspect code
During this meeting, we show the powerful tools that InVision has, such as inspect tool with invasion program. This tool allows the developers to see CSS codes side by side with the prototype; this tool help to have a more seamless handoff. Using this tool gives the developer a high level of difficulty and time in the design.
Conclusion
Completing this project helped me understand that travel and booking websites do not have the best heuristics and do not have the best user experience. Throughout this project, we wanted to keep our users in mind based on the IBM Thinking. Working with the development team made me appreciate my love for project management and how important communication is. Not only did I learn about throwing myself into something I did not know, but I also learned about myself.
“If you’re a user experience researcher, you don’t design screens. You design experiences.”
— David Travis User Experience Strategist