Mark Singer
UX Designer

Miami Connect

A responsive digital product that matches LGBT adventure-seekers interested in a Miami-based travel experience, organized by travel brand Pink Coconuts

Tags: [Visual Design] [UX Writing]

Image alt tag
Enter: Miami Connect.

Project Overview

Role: UX/UI Designer

Users: Queer Womyn Interested in Travel

Scope & Constraints: Develop an effective onboarding flow over a 1-week sprint

The Kick-Off Meeting: Receiving a Prompt & Understanding The Client's Ethos

I learned that the client was developing a travel product for users in the LGBT vertical. One of the main points discussed in this meeting was working with their sales funnel, and to this end, the client had past success using Typeform. The objective was to couple a well-designed Typeform onboarding flow with marketing emails to capture engage and excite new customers who might be interested in group travel experiences.

Targeting the flow to the vertical was very important to the client. They wanted the experience to feel personalized. A hierarchy of colors was indicated to facilitate an effortless flow. We discussed the importance of gathering certain criteria like Location, and Self-Identification, with an emphasis on making the process feel natural. The client wanted the prospective travelers to feel like they were talking to a friend or member of the community. Ascertaining these criteria from the user was important for matching customers with one other, to ensure they had the best travel experience possible.

After discussing the groundwork of the project, I provided the client with a Statement of Work, which outlined exactly what deliverables they could expect to receive, and work began.

What's the problem?
Miami Connect


Photo Source: Unsplash

Hello, my name is Jenn.

Based on stakeholder interviews, I created a persona named Jenn to better guide UX Writing and supplemental marketing copy. Having a persona was important to understand the voice of the user and became necessary for the friendly and conversational tone we were going for. A trusty name generator creates the name, Jennifer Thomas. But I call her Jenn, for short.

Miami Connect

Composite User Flow Graphic

Composite image of user flows explored during the research phase

Clarifying Confusion with User Flows

My client recognized that there were many factors that could affect completion rates at this stage of the sales funnel. Brand familiarity, product familiarity, or individual preferences could all play a role in whether someone purchased the trip package we were offering.

The client had the capability of offering personal and friendly one-on-one meetings, but it was unclear how to implement them. To clarify this confusion, I mapped out user flows of different scenarios, depending on the confidence of the customer.

Problem Statement

Members of the community have expressed interest in the travel package that is being developed, but there is currently no system to facilitate sign-up. Research suggests that the target users may either be ready to purchase or would like to speak to someone about the trip, before making a deposit. The problem is keeping users engaged and excited during this sign-up process to prevent drop-off while collecting crucial data that can help match users with experiences they will enjoy, and other travelers they may be compatible with. 

It's OK. I've got solutions, babe.
Miami Connect

Composite Image of UX Copy

Background Image Source: Unsplash

It's about UX Copy that Engages, Boo.

Building from the persona and research, I decided to approach the UX Copy from the perspective of a friend. Jenn has goals, dreams, and needs. We're dealing with humans, and that is a delicate thing.

The answer to this is Copy that is friendly and conversational. Copy that engages with Jenn. Copy that follows the natural flow of conversations, with all the...uhh... utterances, and pauses... that makes us human.

This is all rooted in the unwavering belief that this digital product I was designing was the first step in a possibly life-changing opportunity for Jenn. Jenn is our friend, and everyone is Jenn.

Miami Connect

Color Palette and Branding

Background Image Source: Unsplash

Colors Inspired by Client

Inspiration for the colors came out of the current brand collateral and talks with the client. I developed a custom palate for this product specifically, inspired by images of palm trees. Miami is known for its red skies and sweeping palms, which were the perfect backdrop for our digital product. 

Miami Connect

Typography Sample

Background Image Source: Unsplash

Playful Typography Selections

I chose the Philosopher font because it’s creative, modern, and the rounded edges go well with Pink Coconut’s current font selection. Something playful was important, to keep the user engaged in the flow. This font is mentioned on a top Google font pairing list of 2021 I frequently draw from. The constraints were such that I was only able to select one font, so I decided to go with the title font, for the most impact. Because the questions were mostly short, I didn’t foresee an issue with legibility 

Miami Connect

Composite Image of Email Copy

Background Image Source: Unsplash

Email Marketing Follow Up

The client asked that I draft email marketing copy messages, to provide follow-up after the onboarding flow was complete. Again, this was an opportunity to draw from the friendly, and conversational style I used in the onboarding flow. These marketing templates were designed with placeholder text, to address the user directly for a personal experience, and are a perfect addition to existing Mail Chimp flows.

Most importantly, these messages were steeped in UX Design thinking. They correlate to important parts in the user flow explored in the research phase, with the intent of keeping customers engagedaddressing customer needs/concerns throughout the process, and reducing drop-off.

Miami Connect

Mock-Up of Prototype Start Screen

Presentation Day

I started my presentation by jumping right into the prototype. As I went through the flow, I could see my client's eyes light up, and they remarked how I really understood their vertical. I got their language and community. It was an exciting presentation to give.

By first taking the time to understand the user and the client, I was able to understand the problems, frustrations, and needs we were looking to address. While I'll always advocate for effective user-based UX Writing, I think this case study exemplifies the need for it. You can't build community if you don't connect.

Mobile App Prototype

Created on Typeform and Hosted By Vimeo

This has been fun, my love. Miami Connect Out.