DESIGN PROJECT

Flexible Widget Optimisation

Created a flexible widget that increased Click Through Rate up to 4%

Role

Product Design & Research

Industry

Technology

Duration

4 Weeks

Tools

Figma • Condens • Looker • Hotjar

Context

The company Tiqets sells tickets to attractions and museums through their online booking platform. Tiqets works with affiliate partners to expand their reachable audience of end customers. The partners are provided affiliate tools which they can implement on their own websites and media to share the commissions earnt.

Defining the problem

The current availability widget was only available in a vertical format and only allowed an end user to view that date & time availability. This restricted the usability and efficacy of the widget.

Objectives

The objective was to build on the current widget and offer a more flexible tool which would allow the users to have more autonomy in the placement of it. The following objectives for the project were:

Create different orientations for the widget
Optimise the user flow of the widget

Research

The project was driven by the following research methods:

User interviews

The main feedback coming from users on the availability widget was that it could only be used in one location due to the shape of it. Users would only put it off to the side of web pages due to the length, which as a researcher raised questions as to the visibility for end users and the impact it was having on CTR.

User Flows

By mapping out the user flows, it could be seen where there were pain points and where areas could be optimised. The improved user flows could be compared to the old ones to see where imrpvoements were being made.

Context

Defining the problem

The current availability widget was only available in a vertical format and only allowed an end user to view that date & time availability. This restricted the usability and efficacy of the widget.

Objectives

Create different orientations for the widget
Optimise the user flow of the widget

Research

The project was driven by the following research methods:

User interviews

User Flows

The old user flow was not a linear process and meant users often needed to redo previously filled informartion on then Tiqets booking page after using the widget. This was inefficient and frustrated users.

The user flow allowed the user to process all booking decision within the widget before being taken to the Tiqets webpage, where they could review their purchase. This was much more linear and had a logical movement through the process.

Iterations

As the majority of componenets were available from the design system, I went straight into High Fidelity designing for effiency.

Iterations

As the majority of componenets were available from the design system, I went straight into High Fidelity designing for effiency.

First designs looked at a new horizontal orientation, so users have more flexibility in placing the widget on their website. This design lacked inspiration with the small media placement which was addressed in later designs.

A larger picture was more inspiring for users in the booking process. After consulting the data to see when end users booked their tickets, I found it was generaly around 2 weeks before arrival, so the decision was made to show only 1 month at a time to reduce cognitive load and give a cleaner design.

Exploration was made into presenting the language and times in different screens within the widget. When consulting with the developers, time was a deciding factor to use pre-built iOS style menus. It did also mean the user can do the majority of the selections without the widget changing much.

During the flexibility stage, I discussed with the Product Managers to incorporate the ticket selection flow. Initial iterations looked at this would fit into the iframe of a widget. Drop downs and tabs were not the best direction due to most inventory products having minimal variants of ticket. A scroll option was opted as the best choice.

Removing the attraction title and adding a confirm button gave the user a clearer action and removed unncessary information for this part of the process. A sub-total was added to give indication to the accumulating costs of the ticket, provisding better ease of use and give the user more competency in their decision making.

Iteration was also applied to some of the componenets to see if they could be optimised further and provide a better experience across desktop and mobile users.

Applying Fitts Law to these concepts, allowing the add/subtract buttons to stretch across the component gave the user much more control, especially when applying this widget in mobile.

Outcomes

Greater flexibility in the widgets created a sustained increase of 2.4% - 4% in CTR.
Net margin saw an increase after launch of new user flow with internal ticket selection

Outcomes

Greater flexibility in the widgets created a sustained increase of 2.4% - 4% in CTR.
Net margin saw an increase after launch of new user flow with internal ticket selection

Final Screens

Designs implemented onto the B2B affiliate portal to improve users knowledge of the tools offered.

Final Screens

Designs implemented onto the B2B affiliate portal to improve users knowledge of the tools offered.

*This only shows a small selection of the final screens

Reflection

Ideation was performed on whether it was possible to make a mobile friendly version of the widget. This idea was not a direction the product managers wanted to persue. This did show up as a restriction in the user research and would have been a challenge I would have like to look at more, but my attention was needed elsewhere.

Overall, this contribution and the thinking behind creating a ticket selection flow made a big impact on generating more revenues and giving users the ability to be more flexible in how they use the widget. I feel I got the best solution for our product range and how the users interact with the widget.