Kiss & Tell
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.
2 years part time
1 UX/UI designer
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.
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.
Selecting, Creating, Editing, and Filtering with ‘Chip System’
Default Chip UI
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.
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.
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.