Team

UX Researcher - Yidan Wang
UI Lead - Joel Corda
KTLO + LFE Team

Tool

Figma

Timeline

3 weeks, March 2025

🧠 Brief

This issue was first raised by the KLTO team, who observed increased user friction at the final step of checkout. To better understand the root cause, we partnered with researcher Yidan to analyze Medallia feedback and explore what might be causing user frustration.

The experience in question centres around a vague error message users often encounter after clicking “Place Order”:

“There are issues that need to be resolved before proceeding to the next Checkout step.”

This generic toast message appeared frequently, yet offered no actionable guidance. It left users guessing what went wrong—confusing, repeated failed attempts, and ultimately, drop-off at a critical point in checkout.

Define

Exploratory Research

According to the Medallia report, Many participants encountered error messages at checkout, and most found these messages unclear and unhelpful, often having to troubleshoot the issue themselves without guidance.

The next question was, what did customers do after seeing this error message? We partnered with the KTLO team to gather those metrics. Below are the metrics for the impact on conversion in January 2025 for Canadian Tire.

🛒 Users who encountered the error: 10,187

🚫 Users who did not convert after seeing it: 2,101

⚠️ Estimated drop-off rate after error: ~20.6%

Current Experience

Here’s the current mobile experience: when a user clicks “Place Order”,

All errors — no matter how many — result in the same toast.
The user has to manually troubleshoot errors.
The visual cue lacks sufficient prominence to indicate which field requires attention.

Here’s the current mobile experience: when a user clicks “Place Order”,

All errors — no matter how many — result in the same toast.
User has to manually troubleshoot errors.
The visual cue lacks sufficient prominence to indicate which field requires attention.

DEFINE

Constraints

Different condo managements have their particular rules and regulations.
A secure system could protect the dweller’s privacy.
Co-operate with condo management, Board of Directors, and condo dwellers.
Condo dwellers who are infrequently using the condo service and do not care about their management’s service quality.
Condo dwellers who do not use or not confident to use the smartphone.

Opportunity

After interviewing the condo dwellers and conducting the competitive analysis, it shows obscure of the condo act. Since the condo is a very different property ownership style, the resident could easily misunderstand their rights and responsibility. I found “Requesting Repair Service” to be a great opportunity to clarify who should pay for the damage. Therefore, it could decline the number of complaints describe as repair or maintenance not be carried out.

The critical point when condo dwellers booking repair appointment:

1. Residents have reduced their time visiting the management office since they can easily interact with building information online and could directly communicate with their managers.
2. Provide instructions to help resident fill out the form.
3. Residents know the management follows their commitment since they could track the request progress online.

Persona

Persona is the design guideline that reference actual key users group with specific goals and needs.

Primary Persona

Secondary Persona

Experience Map

I use an experience map to list all the research findings for Siana to request her condo management repair service. It allows me to organize research information in order not to slip any valuable findings. Afterward, I select the proposed solutions to be fit into a real-life user scenario.

IDEATE

User Stories

To create a simplified description of a mobile app feature requirement and make sure all the features are from an end-user perspective, I create a user story. Since most of the complaints describe repairs and maintenance not being carried out, the key epic would be “get a repair service.”

Task Flow

The primary task flow selected is the request a service. The secondary task flow selected is to track the service progress.

Sketch

I started by mapping out the most basic interaction a resident would have with the app: from request to get the service ultimately. This already presented some interesting design challenges. As the primary target users, they would like to get the response quickly. How could I design a proposed solution for these needs? Also, they find the information is hard to navigate. How could I layout the information becomes more accessible?

After looking at the needs of my users, I began sketching my ideas for the product. The core task focused on requesting a repair service, and I began ideating how to generate that process.

PROTOTYPE

Iteration

I totally went through two rounds of usability testing with the same evaluation tasks.

Let the users play with the clickable prototype to go through basic tasks, and I take notes and implemented the changes. The tester criteria fall into Torontonian, who is previous or recently lives in the medium-rise or high-rise condo with condo management. They have experience in using the service and dealing with their condo managers.

Rounds of Testing

2 Rounds

Participants

11 Test Users

Condo Dwellers who tested

6 Dwellers

After conducted the first round of usability testings, I modified the prototype based on the feedback and suggestions. I use the same script to hold the usability testings with five different participants in the same scenario. The purpose of second usability testing is aim to see how effective those changes were. And test if problems may not find at the first testing.

Here are the major problems and issues that the users did mention on the usability testing.

Lack of consistency and standards
The navigation buttons with different functions look too similar.

Form lacks legibility and spacing
The length of the field and spacing is far too small.

Tiny clickable areas for crucial navigation buttons
The back buttons on each page do not meet the system standard.

Require better information architecture
The wordings cause the misunderstanding of categories.

Suppliers lack important information
During testing, many users curious to know why they need to choose that supplier.

Users do not indicate the reliability of the supplier
During testing, many users wish to see more information that I assumed was not important.

VISUAL DESIGN

Moodboard

After reviewing the notes and applying changes, I define the core interaction. I decided to move on to the high fidelity prototype and think about my visual identity. I started exploring what the look and feel of the app could be.

I started a mood board by thinking about aspiration values and target users of my brand. The words I used are: modern, urban, professional and supportive.

UI Library

The wordmark I choose is “constrol.” The wordmark is the combination of condo, smart and control. It sounds like “control.” The word “control” means the power to influence people’s behaviours. In terms of the app’s functionality, it influences condo dwellers to decline the numbers to visit the management office. So that, I believe “constrol” is more relevant to the topic.

Wordmark in sketch

Wordmark Final

Colour

Typography

Marketing Site

The condo management app is involved in two parties. Respectively, they are condo managers and condo dwellers. However, the primary target audience for the site is condo managers. The reason is condo dwellers do not have the freedom to choose which management app they are using. Also, different condo buildings comply with the management’s varying needs, so it is better to let the condo management office customize the property management packages.

Hey!

Thanks for reaching the bottom of this page. If you want to learn more about me or what I’m working on, I’ve got a bunch of links for you on the right. Explore them at your own peril.

Alternatively, check out this fancy sheet of paper
Resume

Want to stay in touch?
zoeylu@foxmail.com