Projects at tripla anchor

tripla has created a chatbot service with focus on Japans tourism industry, in which end users can book hotel rooms, restaurants, tours and rent cars. These services are sold B2B and B2B2C. In my position as Lead UX/UI Designer and Front End Developer I focused on tripla’s branding, its internal tools, the look and feel of the chat interface and prepared design for an upcoming traveller service, which is currently in stealth mode.

I worked closely with the development and product management team, reporting to the CTO.

For my work on tripla’s internal tools, I also cooperated closely with operational staff, bridging the divide between the development and operations department.

Finally, I occasionally supported Marketing with branding and art direction for campaigns.

Rebranding anchor

When I began my work at tripla, there were no brand guidelines or strategy in place. The logo was applied inconsistently (different shapes, sizes and colour variations were used across the web, apps and print materials), also the the license of the logo font was in question.

original logo set in Gill Sans Bold

renewed logo in HK Grotesk Bold
the word mark has some minor modifications

I developed a branding strategy, as well as brand guidelines for web and print materials, while simultaneously planning the redesign for tripla's marketing assets. Logo and wordmark were redesigned with a licensed typeface. The main driver was to have wordmark that could be easily shortened into the "speech bubble" logo that had existed since the companies inception.

renewed:
logo for print materials & presentations

I will happily admit that the logo does lack sophistication, since I am not a trained logo designer. To create it, I did research and completed a couple of online courses to gain a better understanding of what is needed for a successful logo.

At the time, tripla had an iOS and Android chat bot app (similar to what is on the web). In order to bring the branding to life everywhere, I also created updated logos for each app. These logos were created on a very short turn around time.

This branding work informed the creation of tripla's design system (see below).

renewed:
iOS & Android app logos

To ease the design process, I began running design sprints, which ran in conjunction with development sprints in 2 week intervals.

I ensured that accessibility guidelines were followed for all design material as well as in code and continuously tested rich contrast and proper code. Furthermore all designs were created with localisation in mind (tripla's chatbot opperated in Japanese, English, Korean and simplified as well as traditional Chinese). To ensure all languages would work with all designs, I tested and supervised QA during all coding stages as well as in pre-release versions.

Finally the need for a mascot / face for our chatbot arose. In discussions with the CTO as well as marketing and product we arrived at the idea of creating a suitcase based robot. I art directed the creation of the final illustrations, based on sketches I had made previously.

The mascot pakku, a Remowa inspired suitcase robot in tripla pink. On the face of the suitcase 'Hi' is displaying and waving. — art directed chatbot mascot — pakku & rimo

The mascot pakku, a Remowa inspired suitcase robot in silver. The robot is waving. — art directed chatbot mascot — pakku & rimo

project meta data anchor

tasks & tools

overall design and art direction
run of design sprints
design of logo, word marks and icons
designed with paper, Affinity Designer, Sketch & InVision Studio

time

2016 to 2017

position

Lead UX Designer

Chatbot interface anchor

tripla, at the time of my joining, had already a chatbot interface, but it was very limited and only able to send and receive messages. This interface was used in both, the tripla chatbot web widget as well as tripla's then existing apps for iOS and Android.

At that stage the interface was not extendable, the UI was made wit the original iPhone in mind (320px in width) and not able to support any other screen sizes or resolutions.

The original widget. It has a large header and very simple interface allowing only for text input. — the original and inaccessible chatbot interface

The new widget. The header is smaller and the interface allows for widgets and multiple modes of interaction per menu and text input. — renewed:
chat widget — final mockup

Since this was the first time I was working on a chat interface, I researched existing chat interfaces, messaging apps and competitors offerings. Additionally I read posts and essays by designers experienced in the field.

I created a modular design with several widgets to extend the core functionality like actions, sliders and overlays for calendar, option lists, etc. While the design was based on mobile screen sizes, it was adoptive to large screen sizes, should the need ever have arrived.

A view of a design board with many different views. — A view on the full design file, created in Affinity Designer
(larger view)

To ease internationalisation, I used a system font stack and finally coded the interface and extension widgets in html/css. Most of the initial design work was done in Affinity Designer and later Sketch, but final designs were done in code and the browser. Icons used where a mix of designs I created and feather icons.

The chat widget with a slider widget visible to choose hotel rooms. This version has no arrows for a touch interface. — The slider widget is designed to work with touch as well as pointer interfaces. Pointer interfaces have arrows added for easier navigation.

The chat widget with a slider widget visible to choose hotel rooms. This version has arrows for a mouse interface. — The slider widget is designed to work with touch as well as pointer interfaces. Pointer interfaces have arrows added for easier navigation.

While I was researching other chat interfaces, I was not able to find much literature on how to code a chat interface (especially accessibly). To help other designers and developers I summarised my approach in a blog post.

Running design sprints of the same length and timing as the development team, helped to keep design, coding and deployment at a steady pace.

The the chat interface overhaul improved customer engagement and enabled tripla to begin hotel room reservations. It also allowed tripla gain more B2B customers and was planned serve as the basis for future expansion. The overall style of the widget had proven solid and has been transported into other projects.

Detail of a chat: Chatbot asking 'Is this ok?', customer answering 'Yes, this is fine', each in a speech bubble. — Direct communication happens in speech bubble form. Chatbot messages are on the left and customer messages or selection from an action sheet are shown on the right.

Chatbot messages have a sharp bottom left corner:

Customer messages have a sharp top right corner:

The largest difficulty arose from the copy. For chat interactions copy needs to be short, precise and ideally give the bot personality and a friendly character. Interactions like reservations need to be kept as short as possible to reduce exit rates.

An action sheet, which doubles as menu. It offers options to book a room, confirm reservations or reserve a restaurant. — I introduced action sheets for easier navigation over the original pure text chat interface. Action sheets are chatbot messaging and therefore also featured a sharp **bottom left** corner.

The chat widget with a calender interface that allows selecting a range. — The same logic is used for other interactions like the calendar widget. Chatbot suggestions (here a pre-selected date) feature a **bottom left** corner, while customer selections feature a sharp **top right** corner.

I learned that chat interfaces and forms have very similar UX challenges like the order, length of interactions and what interface options are appropriate in which situation. While creating the interface, studying successful forms helped tremendously.

Screenshot of 3 sample implementations, each with the full widget visible in a state of conversation with a customer. — The new chatbot interface at first lunch on tripla's demo hotel and a customer implementation on Hotel Gracery
(larger view)