Kiss & Tell

Project Description

Kiss & Tell is a responsive webapp with various user roles: host, guest, and vendor.  The platform streamlines the tasks of destination weddings and group travel and corrals all group decision communications to one streamlined social feed.
Hosts can compare, build, and book their event venue and group accommodations packages in top global destinations and create and manage their guest lists, while their guests can book their own rooms and manage their attendance.
Vendors can chat and negotiate their packages with hosts and use the social feed, for example, to gather guests’ meal preferences.

 

Duration

2 years part time

Team

CEO
1 UX/UI designer
1 FED
3 Engineers

Tools

Flowmapp
Sketch
InVision
Zeplin

My Role

I have served as Kiss & Tell’s design director where I handle both the product and marketing design with the challenges of a small remote team that all work part-time and thus we have gone through constantly shifting processes and protocols until we found a way to get the job done with our limited time and resources. At present, my role is primarily synthesizing the CEO and engineer’s feature releases into both well documented technical specification docs and hi-fi prototypes built on our existing design library. I’m continually refining, expanding, and meticulously re-organizing the design library in order to rapidly-produce hi-fi prototypes for our ever-evolving sprints. Sometimes this looks like me spearheading with the planning and prototype and sometimes this looks like me receiving developed functionality and then creating the pixel-perfect prototype whilst solving the friction in the usability with UX/UI design solutions, and then directing the front end developer and providing all the assets and instructional details.

The Social Feed in Action

Whether managing a master guest list or subgroups, guests receive their relevant notifications in one convenient feed.

The challenge is to connect and inform the right guest at the right time- which is achieved with the creation of sublists/subgroups created in the guest list builder, allowing the host to notify only relevant guests.

I studied Facebooks newsfeed to design our version which includes many of the same features: the ability to tag guests, create polls, publish only to certain groups, and comment on posts.

 

User Flowcharts 

When I was first hired, my task was to support the CEO and lead engineer transform the existing platform (which was really a front-end facade that required concierge service by the CEO) to a fully self-service platform.

I spearheaded this undertaking with user flowchart maps in order for the team to understand each user role’s flow and edge-case dependencies. Flowmapp allowed us to visually manage the re-engineering and plan the roadmap of new self-service features.

Flowmapp is a fun tool to make these maps which also help uncover every edge case so I know how many variations of a screen I need to design for a seamless user journey.

Guest List & Group Travel Management

One of the first tasks a host needs to do in order to manage their event is to create their guest list and assign guests to a sublist, which allows them to segment their newsfeed communications to only those relevant.

I studied other marketplace guest list creators and adopted the use of a ‘chip system’ which allows guest sublists to be visual and work as filters later when the host needs to sort and manage their guest attendance.

 

For adding guests, I studied other marketplace tools and decided a drawer is the most modern elegant solutions to adopt for adding the guest, as it allows you to remain on the screen for which you are adding content for a more seamless on the spot experience.
The above video demonstrates how once guests are added, the host can filter the table by sublists using the chip system. In addition, they may also edit in place both the chip system in the table’s toolbar and also the guest with the familiar quick-access drawer experience, allowing them to stay in place on the screen they’re working on.

Selecting, Creating, Editing, and Filtering with ‘Chip System’

Default Chip UI

To indicate chips are not actively selected, their default setting is a light gray background. The button to open the chip editor is styled as most of our secondary in the hierarchy, as a dark gray outlined ‘ghost’ button.

edit & create chips

The ‘chip editor’ state now draws attention to the ‘exit lists’ button with a fully colored in core brand color ‘coral’.  In addition to the added chip creator element, I’ve added edit and trash icons to both edits or delete created chips.  Pressing ‘exit lists’ saves all the changes.

Active chips

When the host filters their guest list or assigns a guest to a list the chip changes to both a pale coral color and coral text with a ‘check’ icon to further symbolize its activation.

Technical Specification Documentation

Before and after I design a hi-fi prototype, it’s important to have all the functionality conceisely written down in outline format to identify all edge cases and possible flows. I used Google Docs for the team to collaborate and tighten up first release scope releases and plan future release functionality. It’s the singular place to go to understand roadmap sprints and make group decisions. After the design of hi-fi prototypes, it serves as the northern star for the front-end developer.

Creating a seamless flow from high-friction functionality.

The challenge here was making a seamless experience out of very different hard to reach places of the platform.

To patch up the friction between adding event packages and then later, rooms to the builder (which involves having to go back to the listings page) I relied on creating instructional modals as guides (which may be dismissed) and made sure to light the way with toast notifications and green lights, thus training the user to rely on the notification center in the action bar.

 

Card Details

At the start, I inherited a highly static Sketch file without any use of symbols, which was already following Google Material’s design framework. I kept the font and color choices and Google Material Guidelines for cards, forms, and icons. I then built up and implemented the symbol library, of which an entire category is of different card symbols/components.

More projects like this

Are We a Fit?

If you care about industry best practices, high aesthetic standards, and an agile mindset- I might be the designer you've been looking for.