P

Home

My Work

About Me

Resume

P

Home

My Work

About Me

Resume

XCel Raincoats

Timeline: 5 Weeks

Timeline: 5 Weeks

Role: UX/UI Designer

Role: UX/UI Designer

Tools: Lyssna, Figma

Tools: Lyssna, Figma

Architech is a cloud software company that selected me for their design mentorship program. They provided the scope of the project, their team acted as stakeholders, providing feedback and constraints that shaped the direction of our work.

Architech is a cloud software company that selected me for their design mentorship program. They provided the scope of the project, their team acted as stakeholders, providing feedback and constraints that shaped the direction of our work.

Project Summary

Project Summary

Xcel Raincoats is a manufacturer and retailer of locally made raincoats. Following the viral success of one of their products on TikTok, their operations needed to rapidly scale to handle a surge in customer service demands — including order tracking, exchanges, and product inquiries.

Xcel Raincoats is a manufacturer and retailer of locally made raincoats. Following the viral success of one of their products on TikTok, their operations needed to rapidly scale to handle a surge in customer service demands — including order tracking, exchanges, and product inquiries.

Their existing manual support system was unable to meet the new volume without delays, inefficiencies, and a lack of visibility across internal teams. The challenge was to design a scalable, AI-powered chatbot that could handle routine inquiries, reduce response time, and allow human agents to focus on complex cases — all while maintaining brand tone and trust.

Their existing manual support system was unable to meet the new volume without delays, inefficiencies, and a lack of visibility across internal teams. The challenge was to design a scalable, AI-powered chatbot that could handle routine inquiries, reduce response time, and allow human agents to focus on complex cases — all while maintaining brand tone and trust.

My Goal

My Goal

To present myself as a thoughtful and understanding strategic designer who can create intuitive, user-centered solutions while navigating challenging technical constraints and team dynamics.

To present myself as a thoughtful and understanding strategic designer who can create intuitive, user-centered solutions while navigating challenging technical constraints and team dynamics.

Constraints

Constraints

Here are the constraints we had to work with.

Here are the constraints we had to work with.

Time

All research, design, and UI development needed to be completed within a 5-week window. I was the only designer on the team and I had to carefully prioritize tasks and resources available.

Technical Constraints

The LLM backend imposed major limitations, especially in controlling response logic, visual styling, and predictable user flows. Forcing me to restrategize my designs.

Brand

Even though there were no set brand guidelines, the chatbot had to remain aligned with the company’s authentic, professional voice — not too mechanical, not overly casual.

Research

Getting to the problem

To better understand user needs, I conducted five targeted interviews under a tight timeline. As the sole designer on the team, I led the research, analysis, and synthesis myself — focusing on extracting actionable insights to guide both the chatbot’s tone and functionality.

To better understand user needs, I conducted five targeted interviews under a tight timeline. As the sole designer on the team, I led the research, analysis, and synthesis myself — focusing on extracting actionable insights to guide both the chatbot’s tone and functionality.

I interviewed 5 people. We had 2 high level objectives:

  1. Identify any pain points in the online shopping experience.

  2. Understand user preferences for customer service support and expectations around chatbot behaviour.

This is what users said...

Don't like to repeat themselves

Users like chatbots for quick tasks, feel misunderstood, stuck in loops, or forced to repeat themselves. They want bots to understand their intent, not just keywords.

Seamless transition to Agent

While self-service is preferred for speed, users expect a clear path to real people when things get tricky — with context preserved and wait times made transparent.

Inefficient Service

Frustrating customer service leads directly to cart abandonment and loss of trust. Smooth, responsive support builds loyalty — especially post-purchase.

Definition

User Insight, Problem, and Solution

With the insights gathered from user interviews, I synthesized recurring patterns into clear user needs and core problems. This allowed me to define a focused problem statement and prioritize the chatbot’s functionality around real pain points, not assumptions.

With the insights gathered from user interviews, I synthesized recurring patterns into clear user needs and core problems. This allowed me to define a focused problem statement and prioritize the chatbot’s functionality around real pain points, not assumptions.

The User Insight…

A user needs chatbots to handle and understand their requests because it remains consistent with the convenience of what online shopping has to offer.

The problem is this...

The user is a busy individual who needs customer service to quickly and efficiently process their requests, because they don’t want the burden of having to solve the problem themselves.

The solution....

A chatbot that provides fast, straightforward support for common issues — like returns, sizing, and order tracking — while seamlessly escalating to a human when needed, so the user can resolve problems without frustration or wasted time.

Meet Anthony..

Meet Anthony..

Now that we have an understanding of what is important to audiobook book listeners, we made a user persona.

Now that we have an understanding of what is important to audiobook book listeners, we made a user persona.

Anthony Brown

Age: 28

Education: University of Toronto

Status: Single

Occupation: Engineer

Location: Toronto

About

Anthony is an engineer with a passion for trekking, traveling, and exploring new places. When he's not building solutions, he's making memories with friends, whether on the trails or in great conversations. He believes in the balance between work and play, making time to share meaningful moments with friends. Whether it's a weekend getaway, a challenging hike, or a night of great conversations, Anthony is always seeking new experiences that enrich his life.

Goals

  • Wants to shop online and have the products delivered to his house in a few days

  • Compare the products he wants to buy and see which one is right for him

  • Wants the best deals and savings he can make

  • Wants online returns and refunds

  • Wants a personalized experience that understands his preferences

  • Wants to see reviews and ratings before he can buy something
    Useful customer service that quickly solves his problems

Needs

  • Needs the online shopping experience to be convenient and not time consuming

  • Needs to know the best deals without him scavanging for it

  • Doesn't want to keep seeing items that are unrelated to what he is looking for

  • Needs online returns and refunds not to be a seamless process and without much cognitive load

  • Reviews and ratings shouldn’t be hard to find and be helpful in letting him know to make a more meaningful decision

  • Customer service must be easy to find and understand his queries without too much effort

Frustrations

  • Online shopping can be difficult when you’re browsing through a vast inventory

  • Hidden fees and and high shipping costs makes online shopping unpredictable 

  • Inaccurate product descriptions and not being able to find reviews easily makes his decisions unsure
    Customer service rarely answers his questions, is tedious, sometimes gets no responses to his inquiries
    Returns and refunds are a long logistical process, the onus is on him for a return

Apps Used

Spotify

Instagram

Ideation

User Flow

User Flow

Given the tight timeline and limited development capacity, I prioritized the returns and exchanges flow — the most critical and emotionally sensitive part of the post-purchase journey. Interviews consistently highlighted frustration with unclear return processes and the desire for a seamless, self-guided experience.

Rather than trying to cover every possible scenario, I focused on designing a single, high-impact flow that would reduce support load and rebuild user trust. This let me go deeper into tone, logic, and clarity where it mattered most.

Since the flow was large I split it into two pictures, the top is the first half, the second, is the other half.

Given the tight timeline and limited development capacity, I prioritized the returns and exchanges flow — the most critical and emotionally sensitive part of the post-purchase journey. Interviews consistently highlighted frustration with unclear return processes and the desire for a seamless, self-guided experience.

Rather than trying to cover every possible scenario, I focused on designing a single, high-impact flow that would reduce support load and rebuild user trust. This let me go deeper into tone, logic, and clarity where it mattered most.

Since the flow was large I split it into two pictures, the top is the first half, the second, is the other half.

Adapting to LLM constraints - Decision Trees

Adapting to LLM constraints - Decision Trees

it became clear that this approach couldn’t reliably account for how the LLM would behave in real time. Unlike rule-based systems, LLMs respond with variability — especially when users type freely.

To adapt, I pivoted from static flows to decision trees, mapping user intent and identifying failure points where the LLM might misinterpret input. This helped me design fallback paths using buttons, confirmations, and guided prompts to keep the experience functional and on track.

it became clear that this approach couldn’t reliably account for how the LLM would behave in real time. Unlike rule-based systems, LLMs respond with variability — especially when users type freely.

To adapt, I pivoted from static flows to decision trees, mapping user intent and identifying failure points where the LLM might misinterpret input. This helped me design fallback paths using buttons, confirmations, and guided prompts to keep the experience functional and on track.

Prototyping and testing

Keeping in mind major constraints…

Early in the process, I designed initial screens for login and registration, but it became clear that technical requirements (e.g., multiple required fields for CMS integration) and misalignment on visual styling made these designs unsustainable. Rather than spending time designing 10–15 flows that were unlikely to be implemented as intended, I shifted focus to the returns and exchanges flow — the most complex and high-impact scenario.


My plan was to prototype and test this flow first, then use its logic and styling as a foundation for other cases. However, testing exposed a major issue: the LLM struggled with deterministic logic, and attempts to enrich interactions with buttons or images created latency and instability. Recognizing these blockers, I pivoted again — ensuring the team had something stable to demo to stakeholders by focusing on a reliable opening screen and establishing a clear visual language they could implement.

Testing out a theory

During development, there was a shared assumption that visual hierarchy and layout refinement could be postponed until later sprints. To challenge that, I created an early version of the returns and exchanges flow with deliberately poor visual hierarchy — uneven spacing, poor accesibility, no visual cues — and used it in usability testing to measure its effect.

During development, there was a shared assumption that visual hierarchy and layout refinement could be postponed until later sprints. To challenge that, I created an early version of the returns and exchanges flow with deliberately poor visual hierarchy — uneven spacing, poor accesibility, no visual cues — and used it in usability testing to measure its effect.

Poor visual hierarchy - chatbot message

Poor visual hierarchy - chatbot message

Poor visual hierarchy - confirmation message

Poor visual hierarchy - confirmation message

Improved visual hierarchy - messages

Improved visual hierarchy - messages

Improved visual hierarchy - confirmation message

Improved visual hierarchy - confirmation message

Team Acknowledgement

Despite internal constraints, stakeholders themselves acknowledged the lack of visual hierarchy as a UX issue. While implementation was delayed due to sprint pressure, I used this as an opportunity to test how much layout truly mattered to users — and the results confirmed its impact.

User Testing

User Testing

At the time of testing, neither I nor the developers were fully aware of the LLM’s limitations. I used the return and exchange flow as the basis, assuming stable system behaviour. Still, the sessions revealed valuable insights about layout clarity, user expectations, and the need for better guidance — all of which later shaped my decision tree approach.

To validate both the logic of the returns and exchanges flow and the impact of visual hierarchy on user experience, I conducted targeted usability testing with a mid-fidelity prototype. The goal was to observe how users navigated the flow, where they hesitated, and whether the lack of visual clarity affected their ability to complete the task. Feedback covered both the structural decisions I made — like steps in the flow and how choices were presented — as well as visual factors like spacing, button placement, and tone.

At the time of testing, neither I nor the developers were fully aware of the LLM’s limitations. I used the return and exchange flow as the basis, assuming stable system behaviour. Still, the sessions revealed valuable insights about layout clarity, user expectations, and the need for better guidance — all of which later shaped my decision tree approach.


To validate both the logic of the returns and exchanges flow and the impact of visual hierarchy on user experience, I conducted targeted usability testing with a mid-fidelity prototype. The goal was to observe how users navigated the flow, where they hesitated, and whether the lack of visual clarity affected their ability to complete the task. Feedback covered both the structural decisions I made — like steps in the flow and how choices were presented — as well as visual factors like spacing, button placement, and tone.

At the time of testing, neither I nor the developers were fully aware of the LLM’s limitations. I used the return and exchange flow as the basis, assuming stable system behaviour. Still, the sessions revealed valuable insights about layout clarity, user expectations, and the need for better guidance — all of which later shaped my decision tree approach.


To validate both the logic of the returns and exchanges flow and the impact of visual hierarchy on user experience, I conducted targeted usability testing with a mid-fidelity prototype. The goal was to observe how users navigated the flow, where they hesitated, and whether the lack of visual clarity affected their ability to complete the task. Feedback covered both the structural decisions I made — like steps in the flow and how choices were presented — as well as visual factors like spacing, button placement, and tone.

User Objective

ou recently bought a men’s medium yellow raincoat, but it’s too big and the color doesn’t suit your wardrobe. Remembering the brand offers exchanges through their chatbot, you visit the site to request a smaller red one.

The Tasks

  1. Ask for an exchange

  1. Confirm the exchange details

  1. Enter email to receive notifications

The Feedback

The Feedback

Users found the feature flow to be consistent with Spotify's music listening experience, however they wanted a greater degree of customizability in regard to bookmarking.

Users found the feature flow to be consistent with Spotify's music listening experience, however they wanted a greater degree of customizability in regard to bookmarking.

Visual Hierarchy

Users found the layout visually confusing — unclear spacing and inconsistent sizing made the interface feel less polished and harder to trust.

More User Friendly Features

Users preferred buttons over typing and wanted visual aids like product images to feel more confident in the choices that they were told to make during the itests.

Flow was easy

The return process was easy to follow, but unclear prompts and long text blocks slowed users down. Moreover, they found the process to be intuitive and quick/

Challenges

Challenges

Despite strong usability insights and clear recommendations, most of the proposed improvements — including refined layout, button interactions, and visual aids — weren’t implemented due to sprint priorities and backend limitations. Instead of pushing against immovable constraints, I shifted focus to ensuring the team had a stable, visually consistent starting point they could confidently demo to stakeholders.

Despite strong usability insights and clear recommendations, most of the proposed improvements — including refined layout, button interactions, and visual aids — weren’t implemented due to sprint priorities and backend limitations. Instead of pushing against immovable constraints, I shifted focus to ensuring the team had a stable, visually consistent starting point they could confidently demo to stakeholders.

What I did with my constraints

In the end, I had two choices: push harder to impose my vision — risking disruption to a fragile backend — or step back to preserve team cohesion and ensure we had a working product to present. I chose the latter. Not because I gave up, but because I understood what the moment demanded.

Hi-Fidelity Prototype And Conclusion

The High - Fidelity Prototype

The High - Fidelity Prototype

With most of the chatbot experience dependent on backend logic I couldn’t control, I focused my high-fidelity work on the starting screen — the only space I had full ownership of. This screen set the tone through visual hierarchy, tone of voice, and layout clarity. While not everything I proposed made it into the final deployment, developers implemented key visual styling improvements and even experimented with adding images, though those didn’t carry over to the live version due to latency concerns.

I chose not to define primary or secondary colours in detail for this project, as the core design focus was on usability, layout clarity, and LLM-specific interaction design, a brand identity never existed. Color choices were kept minimal and functional, aligned with the brand’s existing palette.


Stepping back from certain design decisions proved right — 95% of responses were delivered in under 2 seconds, ensuring speed and clarity mattered more than visual control.

With most of the chatbot experience dependent on backend logic I couldn’t control, I focused my high-fidelity work on the starting screen — the only space I had full ownership of. This screen set the tone through visual hierarchy, tone of voice, and layout clarity. While not everything I proposed made it into the final deployment, developers implement key visual styling improvements and even experimented with adding images, though those didn’t carry over to the live version due to latency concerns.

I chose not to define primary or secondary colours in detail for this project, as the core design focus was on usability, layout clarity, and LLM-specific interaction design, a brand identity never existed. Color choices were kept minimal and functional, aligned with the brand’s existing palette.

This is a preview, please view on desktop for full version

There were some victories

There were some victories

While not everything made it into the final build, a few key wins did.

While not everything made it into the final build, a few key wins did.

Quick action buttons added

My suggestion to use quick action buttons to reduce typing was implemented, helped streamline user actions reducing user effort and improving task clarity.

Better Visual Hierarchy

The final version adopted several layout adjustments I proposed, including clearer spacing, grouping, and simplified structure to aid readability.

Image support was explored

Image support was abandoned due to latency issues, however, it was explored in a version that wasn't deployed for the final demo due to time constraints.

People can get points based on the tours they visited. They could tell friends things they found interesting at a site by pointing it out on a map.

People can get points based on the tours they visited. They could tell friends things they found interesting at a site by pointing it out on a map.

My Learnings

My Learnings

Along the way, I took away a few lessons that will shape how I approach future projects.

Along the way, I took away a few lessons that will shape how I approach future projects.

Early design decisions matter

With rigid systems like LLMs, early design and development alignment is crucial. Once development starts, even small changes become difficult to apply.

Visuals drive usability

Testing proved structure isn't enough. Users rely on clear fonts, spacing, and layout to navigate. Even minor visual improvements increased confidence and ease.

Simplicity builds trust

Short prompts, clear flows, and confirmations made users feel supported. Reducing friction and guidance mattered more than advanced features.

The end

Andrew Paul 2025