Consistently Branded Messages
Company
Triptease - A global SaaS startup building software for the hotel industry empowering their clients (Hoteliers) to increase revenue, drive more direct bookings and compete against OTAs (Online Travel Agencies).
Year & Role
2019. Product Designer (UX/UI) covering the full end-to-end design process.
Team
Product Designer, Product Manager, 4 Software Engineers. Also working closely with the Customer Success & Product Marketing teams.
Establishing Requirements & Scope
The Product Manager and I worked closely to define the requirements for the first version of this release. The key requirements to form this initial scope were:
-
Branding will apply to other existing onsite message types.
-
Hoteliers should be able to preview the brand they create.
-
Existing styling controls in the Message Builder will remain there, giving hoteliers the flexibility to override their default brand on a per message basis.
-
The brand created will apply to all hotels within their group.
The Settings section of the platform before Branding was added
Previewing Multiple Messages
In order to help put this page together, I decided to reuse an existing styling component which included the font; Icon background colour; button colour; button shape; background colour and background shape:
Branding styling controls
I designed different versions of the preview including carousels, tabs, and just the messages alone. On testing these with participants, they preferred to view all the message types at the same time as their designs slightly differed and so they wanted to see the effects of any changes made immediately.
Different preview options including the preferred one (ticked)
How does this effect the Design tab in the Message Builder?
I designed a new Branding section on the Design tab in the Message Builder. This section replaced a previous section called Styling which hoteliers would use to set the brand on a per message basis. The components of the Branding section are the styling controls that are within Settings, and I added a Use Branding toggle which is on by default to ensure a seamless implementation of the brand configured within Settings.
Hoteliers had mentioned that it was important to still have the flexibility of overriding their configured brand for messages during seasonal periods (e.g Christmas) and so for this use case, they can simply toggle Use Branding off and edit the brand for the specific message. I also added a Branding tertiary link in this section for users to easily navigate back to the Branding page incase they wanted to edit their brand for all onsite messages whilst building a specific message - Their message will be saved as a draft if they choose to undertake this action.
New Branding section with tertiary Branding link in the Design tab (Left, highlighted in green) & expanded Branding section when the toggle is off (Right, highlighted in green)
Encouraging Users to Take Action!
As a user is showing intention of creating a new message, I designed a large modal to appear encouraging them to set up their brand. Knowing the positive effect that branded messages will have on direct bookings and that hoteliers may not notice this straight away in Settings, I chose to use a large modal (with a lightbox) to grab the attention of users in an effective manner. Users can then be taken straight to the Branding page from this modal by clicking Set Branding Now or can ignore this prompt by selecting Later - The modal is designed to persist until a user has actually edited and saved their default brand. Users who choose to set their brand from this modal can be redirected back to the Message Type page.
Modal encouraging users to set their branding
User Testing
Other than when testing the different previews, no other interaction issues were identified from the user testing sessions I conducted. The only thing that required iterating on was the copy and needing to emphasise the fact that the brand will apply to new messages that are created, not existing live messages.
Branding page with updated copy
Version 2.0
My product team and I iterated on this feature a couple months after the initial release by enabling clients to set up additional brands and apply them to hotels within their group. This was the main piece of feedback received from hoteliers after the initial release and this feature request also had 23 votes on Canny (A B2B product feedback tool).
From talking to hoteliers and the Customer Success team, we understood that hotels will often have different branding for individual properties or groups of individual hotels within their group. Hoteliers, on average, would want to create up to 4 different brands. 30% of our client base would be entitled to this feature as they had more than one hotel within their group. In total, this group of clients also accounted for our biggest in terms of ACV (Annual Contract Value), highlighting the importance of iterating on this feature for the business.
Establishing Requirements & Scope
During the time in which we shipped the first version of Branding, my product team and I had released Email Capture messages and so this second version of Branding was also going to cover this message type alongside the other onsite message types. It was also important that the design was scalable to allow hoteliers to create an unlimited number of brands if they choose to do so.
Wireflow
I sketched out a low-fidelity wireflow depicting how a user could create and assign additional brands to hotels. Each of the cards on the interface represented a different brand and it also made use of an existing hotel dropdown component allowing users to select multiple hotels at once. Saving a brand enables a user to add another brand:
Low-fidelity wireflow
On testing this wireflow, it appeared that the Add Another Brand CTA (Call-to-action) button appearing below the initial card and below the fold of a 13.3” and 15” screen (the primary screen sizes in which our clients used) would prove problematic in terms of hoteliers knowing how to add another brand. This idea was then discarded.
Redefining the Default Brand
With respect to relevant hoteliers being able to create multiple brands, the default brand was now going to represent the brand of messages to be shown on the group page (that is, the hotel chain’s landing page) and any hotels that aren’t assigned any of the additional brands created. In this world, users could assign a default brand in two ways:
-
Create multiple brands first and then flexibly assign which one is the default brand. Hoteliers would then be able to easily change the assigned default brand by simply picking and choosing via a one-step interaction.
-
Create a default brand first and then allow clients to set up additional brands. To change the default brand, users will have to edit the styling controls individually.
I decided to proceed with the second flow based on insights I had from interviewing hoteliers about this prospective feature. The key learnings were from those interviews were:
-
The assumption that hoteliers would want to change their default brand regularly was disproven. I learnt that they would only do this when undergoing a major rebrand which doesn’t happen often.
-
The common thought process for hoteliers when setting up their brands would be to set the brand for the group page first and then configure individual brands for hotels within their group.
Accommodating Key CTA Buttons
Flow 2 was also more appropriate from a guidance perspective and so I developed this high-level idea further by utilising accordions and placing the Add Sub-brand CTA button under them. This way, the CTA button is always above the fold when the accordions are collapsed.
Brainstorming the use of accordions in this context
I took this idea up to mid-fidelity where I defined the interactions further including a user deleting a brand. I also added visual indicators for the brand colours chosen, the number of hotels assigned to each brand and the ability for users to name additional brands created; The combination of these 3 elements will help hoteliers identify the brands and the hotels assigned to it quickly. A user can’t delete their default given its significance. They can, however, delete additional brands that are created but these won’t be stored in the database.
Branding page with accordions
.png)
Brand deletion modal with lightbox
Mid-fidelity interactive prototype showing a user editing their default brand, creating 2 more brands and deleting one of the brands using accordions - Created in Figma
On testing this prototype, I noticed that some participants believed clicking Done would save the brand, where in fact they had to click the global Save Changes CTA button. Building on the interactions defined in the previous iterations, I iterated on this flow once more in order to have two separate interfaces to make it feel less overwhelming for users - One as a Summary page for the brands created and the other being the Brand Creation page where users can create and edit their brands.
This also allowed me to move the CTA button in which saves the brand onto the Brand Creation page - When this is clicked, the brand created will be saved and users will be taken back to the Summary page where they will see a card with their newly, created brand. The global CTA button on the Summary page is now that of adding another brand when a user has successfully edited their default brand. Users can then edit the brand and enter the Brand Creation page by clicking on the Summary card.
Summary page
Brand Creation page
Mid-fidelity interactive prototype showing a user editing their default brand, creating 2 more brands and deleting one of the brands. Summary & Brand Creation pages - Created in Figma
Solution
Observations from testing this prototype with 6 participants included:
-
Not being sure of what to do when landing on the Summary page.
-
Not knowing what brand would be assigned to hotels of a deleted brand.
I solved those problems by adding a card with a dashed border and complementary copy to help guide users on how to create another brand which was more visible on testing, and added a sentence to the confirmation modal informing users that the default brand will be applied to hotels that were assigned to the brand that’s just about to be deleted.
As a user creates more brands and adds hotels to it, the hotel dropdown will still show these hotels but they will be greyed out and disabled. I chose to use this design instead of hotels that have already been assigned a brand not appearing in subsequent dropdowns to better inform users of hotels that have already been assigned a brand. A user will have to untick a hotel from its assigned brand in order to enable it in subsequent dropdowns. This was also in line with a technical constraint we had in that we could only save 1 brand per message which meant that clients can’t assign more than one brand to a hotel - Logically, this also makes sense from a user's perspective.
Hotel dropdown with Hotel B disabled as it has already been assigned a brand
To inform users about this new feature, I also designed a Highlight Card to appear at the top of the Message Manager (An interface within the Targeted Messages part of the platform showing performance metrics related to published messages, separated by message type) which, when clicked, would direct users to the Branding page within Settings. This provided another entry point to this page alongside the aforementioned encouragement modal:
Highlight Card
In the common use case of users wanting to publish a message across different hotels that have different branding, I designed a dropdown to appear on the preview screen in the Design tab. Users can preview the message in the relevant brands that match the hotels in which the message will be published on.
Hotel preview dropdown (highlighted in green)
Here’s a video of the high-fidelity prototyped solution showing a user editing their default brand, creating an additional two brands and deleting the third brand:
High-fidelity prototyped solution (Created in Figma)
Impact
As of April 2020:
Reflection
This was a really fun project due to its iterative nature. It was one where I had to define a lot of interactions on one interface whilst considering how it would affect interactions on another part of the platform. This enhanced my ability to define intuitive solutions to multi-step, complex, related interactions and edge cases across a system & the output be intuitive for users. I believe this project was a success as shown by the metrics above, and also played an important part in increasing engagement with the Targeted Messages part of the platform and reducing the likelihood of clients churning.
My product team and I collaborated well together throughout this project and I was able to bring them along this process by regularly updating them in daily stand ups & design walkthrough meetings. This was coupled with spontaneous conversations with them and specifically pairing with the Engineers to ensure a high quality build & timely delivery of the new designs. I believe the design decisions I made were the right ones, especially when discarding ideas and developing ideas further in the ideation phase. Just before release, I worked closely with the Product Marketing Team as they devised the product update and FAQ to be communicated on the platform to users. Overall, this feature was received well by clients and we received positive feedback from them as it helped increase direct bookings.