Content Optimizer
OVERVIEW
Travelport's application Content Optimzer is a rules engine that allows agencies to control the results of a search in the SmartPoint application based on a variety of different conditions.
PROBLEM
Content Optimizer had many different documented usability issues reported by customers. The application also had performance problems that caused unneccesary delay and heavy load times. Lastly, the product needed a complete re-branding using Travelport's new design system, Atlas.
MY ROLE
Lead Product Designer
Lead Researcher
Workshop facilitation
Wireframing and Prototyping
TIMELINE
November 2020 - August 2023
TOOLS
Figma, Axure RP, Mural, Jira, AHA
My Design Process
During the discovery process, I worked from a list of known usability issues that were reported from customers through account managers, the research team and feedback forms on the existing product. This list provided a starting point but we wanted further feedback from customers.
I conducted three separate full-day workshops with the team and customers who were our primary users of the product. We identified several important issues that needed to be addressed, most of them were centered around improving performance and efficiency.
02. STRATEGY & PLANNING
Working with the Product team, we used the output of the workshops to create a list of user pain points and areas of improvement, then aligned them with defined features. This allowed us to prioritize the features into a roadmap. I also created design goals for each feature that would encapsulate the solutions to the pain points we identified.
This list of features was translated into epics and user stories that made up our MVP product - centered around improving performance and solving usability problems.
03. WIREFRAMING & PROTOTYPING
I created an initial set of wireframes for each feature we were planning on building in the MVP. The new designs tackled efficiency and usability issues including:
Finding rules by filtering versus searching
In the original product, the first page was a search screen where users entered search criteria then submitted and waited for results.
In the new design we bypassed searching and showed rules right away with the full set of data being progressively loaded behind the scenes to allow the page to load quickly.
From here, users could filter the results by using multiple, faceted filters to quickly refine the results to a specific rule or set of rules.
Peform actions on rules
This wireframe shows actions for the rule row on mouseover. The user has the option to copy or edit the rule.
View the rule's details
This wireframe illustrates the Rule Details. In this design the user simply has to click anywhere on the rule row and a side panel displays the rule details in place. In the original product, the user had to go to a separate page to view any details about the rule and it took time for the page to load.
The new design greatly improved efficiency, allowing the user to quickly distinguish which rule they were looking for by viewing the rule details in one place.
Another usability improvement was including the rule's history on the rule detail panel. Before, all historical information was located on a separate page in a table with each historical entry in a separate row, not in any order, making it very difficult to understand the rule's history.
Choose a rule to create
Another time saver was allowing the user to pick a rule type to create from a slide-out panel versus going to a new page to select a rule type, which users had to do in the original product.
Creating a new rule
To create a new rule, users would go through a four step creation process. The assumption made was that breaking it into several steps would reduce the cognitive load of inputting information better than a single, long form.
The first step contained all informationg related to the type of rule being created.
The second step involved defining what the rule would specifically target - typically targeting a location or group of locations.
The third step defined when the rule would run and how often the rule would run.
The final step was a summary of the previous three steps. At this point the user could click Publish Rule and the new rule would be added.
04. MEASURE & IMPROVE
After interviewing 5 customers on the new design, we learned that our customers felt that the rule creation process was too long. In the original product there was one long form with several parts that were collapsed and would need to be opened by the user to interact with.
We decided to test various form options using the KLM GOM method. We timed how long it would take an expert user to create a rule utilizing the single long form, a two step form and a three step form. We found that the two step form tested the quickest. In all forms, we removed the summary information as a way to reduce the effort in completing the form.
Final form design
Step one contained all of the information pertaining to the rule type so this step varied each time depending on the type of rule that was selected.
Step two of the rule creation process combined the remaining inputs that were divided in the previous design.
This step called for users to input targeting and scheduling information.
We also added some inline helper tools, for instance when it came to adding a PCC (a city assigned to an agency) or a PCC group (a group of cities assigned to an agency) the user was able to access and search a list of all PCC/PCC groups in place via a side panel and add as many as they needed at one time versus having to memorize or write them down in order to recall them when creating the rule.
Lastly, we implemented an autosuggest feature on location related fields. Typing any character or set of characters revealed a list of auto populated matching suggestions and keying tab or enter populated the field with the selected suggestion.
The matching characters were highlighted in the list.
OUTCOME
After interviewing our same set of customers, they found the rule creation process to be faster and easier to use. CSAT scores improved by approximately 20% over the original product.
Landing Page Before & After
Designs & Task Flows
