— PROJECT NAME
Guest Help Tool Redesign
— ROLE
UX Designer
UX Researcher
UX Writer
— DATE
February 2023 -
April 2023
The goal of this project was to redesign and rewrite the content for the original guest help tool for PicThrive, a startup company that assists adventure tourism companies in managing their guests' tour photos.
The guest help tool is intended for guests to use if they encounter any issues with their photo or video purchases. The tool helps them either find their purchase or create a ticket to receive assistance from a representative.
The original guest help tool was designed hastily by PicThrive to reduce the number of guest help tickets they had to resolve daily because it took time away from other projects. While the tool was functional, PicThrive sought a redesign and rewrite to enhance the user experience.
Original Design
The original design of the guest help tool included excessive text, including unclear and repetitive subtext. The initial concept was to represent user-associated purchases like an email inbox, a frequently used internet function. The purpose of this was to help users understand how to interact with the tool, but this design proved to be complicated to understand.
The original designs for the help tool
Original Text
The original text for the guest help tool had too much information to explain various aspects of the tool. In the given example, the issue options available to users included subtext that reiterated the problem rather than providing additional information to complement the presented choices.
Mouseflow Sessions
I wanted to know how users were interacting with the original guest help tool, especially since it was so text heavy and attempted to mimic a commonly-used online feature.
To gain insight into user interactions with the tool, I used Mouseflow to anonymously record users' actions. With Mouseflow, I could see how each user interacted with the guest help tool as it tracked every scroll and click in the users' sessions with the tool.
I conducted an analysis of these sessions, making notes on user actions, including clicks or taps, time spent on various screens, and cursor movements. Additionally, I documented any other tool-related issues, such as loading times.
Notes from Mouseflow sessions
Research Insights
After watching and recording what I saw in the Mouseflow sessions, I made the following insights.
Insights from Mouseflow research
Mouseflow also showed us that most of the users use the guest help tool on their mobile devices.
Device insights from Mouseflow research
Target Audience
Given that this guest help tool is accessed daily by users from around the world, the redesign and rewrite had to cater to a broad audience. Although specific demographic research was not conducted for this tool, PicThrive provided some data indicating that the typical user of this guest help tool tends to be older and may not have high confidence in their technological skills. The data also suggested that while most users are familiar with English, there are still many who are not.
- With this information in mind, I developed the following user personas.
Maria’s persona represents those who are busy and want quick solutions in addition to those who are not confident with their English but don’t always use web browser translation options.
Harold’s persona represents the older users who are not as comfortable with technology and using it to address their issues.
Design Challenge
- One of the challenges I faced with this redesign was creating a clean and user-friendly interface that users could figure out quickly. This meant representing users' purchases in a way that they could easily recognize. It also meant simplifying the copy where possible to reduce users' cognitive load when figuring out what to do.
Paper Wireframes
Applying insights gained from the research and user personas, I sketched out initial paper wireframes for the desktop version of the guest help tool. I chose to create a design before rewrites to help establish my writing constraints.
I opted to concentrate on the web version due to its larger canvas, providing ample space for the redesign so I could keep the required features in mind.
My primary focus was on maintaining a simple and clean design while eliminating unnecessary elements present in the original design. Additionally, I seized this opportunity to brainstorm potential revisions to the microcopy.
To address the design challenge mentioned earlier, I decided to use boxes with the required information for each purchase grouped together. This way, the representation of a purchase was more visual instead of text-based, like in an email inbox. The boxes also kept like-information grouped together.
Digital Wireframes
After iterating on paper, I proceeded to create digital wireframes using Adobe XD. My main objective for this phase was to translate the ideas sketched on paper into mobile-focused wireframes, as the majority of users accessed the tool through their mobile devices. Having initially worked on the web version, it facilitated the process of creating the mobile wireframes.
The Rewrites – UX Writing
As text emerged as one of the primary issues with the original guest help tool, my objective was to prioritize its rewriting to enhance accessibility and user-friendliness.
To accomplish this, I kept the research I had conducted on customer service in mind while reviewing PicThrive’s style guide for their preferred tone of voice.
Subsequently, I created a spreadsheet to assist in tracking my revisions. My primary focus during the rewriting process was to reduce wordiness and transform the language into a more accessible and user-friendly format, especially because many of the guest help tool’s users tended to be unfamiliar with technology. This approach aimed to reduce the tool’s perceived complexity. I streamlined the subtext and rephrased the content to impart a friendlier and more approachable tone, similar to that of a human customer service representative.
For instance, "I already paid, but the link is asking me for money." with subtext of "I paid online, or instore, and when I visit the link given I am being asked to pay again." was changed to simply "I already paid online or instore, but the link is asking me to pay again." The reduction of words to be read there meant users could skim the option more quickly.
Spreadsheet showing the original text for the guest help tool with the rewrites on the right.
After completing my rewrites, I used Hemingway Editor to make sure the microcopy was at a low grade level for readability. On average, the rewrites were at a grade 2 to 4 reading level, which also accommodates some accessibility concerns.
High-Fidelity Mockups – Responsive Web Design
Upon completing the wireframing stage, I proceeded to design high-fidelity mockups. I initiated this process by crafting the mobile screens and subsequently developed the web screens. In addition, I extended my design efforts to include tablet screens, ensuring the responsiveness of these layouts. Throughout this phase, I maintained alignment with the PicThrive style guide to ensure the designs adhered to their established standards.
The prototype for the mobile screens can be viewed here.
High-fidelity mockups for different screen sizes.
Examples of high-fidelity mockups for guest help tool
Simplified Style Guide
Style Guide for PicThrive used for this project
Design Accessibility
Because this web tool is used by many people with many different types of abilities, it’s important to factor in accessibility for the next iterations. I used a contrast checker on some of the main colour combinations within the app with the following results.
Two out of the four tested colour combinations received fails in the contrast checker.
To improve the accessibility of the colour combinations, I darkened the green and orange colours enough to pass while also keeping the new colours as close to the originals as possible. This is because the colour palette for this project is based on PicThrive’s style guide.
Suggested colour changes for better accessibility within the guest help tool
Working with the Developer
Once the high-fidelity mockups were done, I handed them off to the developer at PicThrive. As he programmed the guest help tool, we worked together on ensuring the live help tool reflected the designs as closely as possible and coming up with solutions when something in the design wasn’t possible in development.
Notes on changes for the guest help tool
Redesign & Rewrite Results
- 1. Visit Duration - Redesigning and rewriting the guest help tool reduced the amount of time users were spending with the tool by over half, resulting in a quicker experience for the users.
- 2. Friction Score – While a friction score of 0.12 is still quite good, the redesign helped reduce that friction even further to a score of 0.08.
These results were likely due to the redesign and the reduction in the amount of text users had to scan through to find a solution to their issues with their photo or video purchases. When watching sessions of the redesigned guest help tool, fewer users dragged their cursor along beneath text and made selections more quickly in forms.
Both time and friction score with the guest help tool were reduced after the redesign.
Going Forward
Impact – The redesign of the guest help tool was successful in that it showed an improvement in the user experience, which in turn helps PicThrive maintain a high level of customer service.
What I learned – Working on this project gave me another opportunity to work with responsive web design. While it's a fairly simple user interface, it was still a challenge to create something that was visually appealing and functional for tablet screens. I was also able to put my writing skills into practice and create microcopy that improved the overall user experience.
Improvements – The next steps for further improving the guest help tool would be to factor in a heavier emphasis on accessibility. Additionally, to make the tool more mobile-friendly, the button sizes for the mobile version will need to be changed to be the full-width of the screen. I would also carefully review the labels we used for things like photo/videos/purchases to make sure there is more consistency.
