Customer mobile chat design for Hotels.com brand
Customer mobile web chat design for Hotels.com brand
Customer mobile chat design for Hotels.com brand
Problem
Problem and role overview
While at the Expedia Global Operations (GCO) group, I was tasked to design the MVP of the customer-facing chat page experience on mobile for the Hotels.com brand. As the time I was also a designer on the agent chat MVP - see here. This customer-facing chat solution was going to enable seamless customer-agent communication.
While at the Expedia Global Operations (GCO) group, I was tasked to design the MVP of the customer-facing chat page experience on mobile for the Hotels.com brand. As the time I was also a designer on the agent chat MVP - see here. This customer-facing chat solution was going to enable seamless customer-agent communication.
While at the Expedia Global Operations (GCO) group, I was tasked to design the MVP of the customer-facing chat page experience on mobile for the Hotels.com brand. As the time I was also a designer on the agent chat MVP - see here. This customer-facing chat solution was going to enable seamless customer-agent communication.
While at the Expedia Global Operations (GCO) group, I was tasked to design the MVP of the customer-facing chat page experience on mobile for the Hotels.com brand. As the time I was also a designer on the agent chat MVP - see here. This customer-facing chat solution was going to enable seamless customer-agent communication.
While at the Expedia Global Operations (GCO) group, I was tasked to design the MVP of the customer-facing chat page experience on mobile for the Hotels.com brand. As the time I was also a designer on the agent chat MVP - see here. This customer-facing chat solution was going to enable seamless customer-agent communication.
Role
I was the first designer to design the MVP of the customer-facing chat page experience. In the process, I collaborated with another designer responsible for other pages in the Customer Support Portal (CSP) domain. I also closely collaborated with the PM, TPM, content writer, and the engineering team.
I was the first designer to design the MVP of the customer-facing chat page experience. In the process, I collaborated with another designer responsible for other pages in the Customer Support Portal (CSP) domain. I also closely collaborated with the PM, TPM, content writer, and the engineering team.
I was the first designer to design the MVP of the customer-facing chat page experience. In the process I collaborated with another designer responsible for other pages in the Customer Support Portal (CSP) domain. I also closely collaborated with the PM, TPM, content writer, and the engineering team.
Process and solution
Process and solution
Process and solution
I sketched, whiteboarded, wireframed in Sketch, and finally produced annotated wireframes in Sketch and Zeplin. I used Hotels.com UI Kit to create consistent visual styles and keep brand's established look-and-feel.
I obsessed over the little details to make this chat experience user-centered and effortless. I had to tackle the following questions in my design iterations:
- Do I open chat in a new chat window?
- Do I use a back button once chat screen opens?
- How and do I indicate when it's a bot and not an agent?
- How do I transition from bot to an agent?
- Do I need an explicit close chat button?
- How do I show an undelivered vs. delivered message?
- How to make attaching a file an easy and even delightful experience?
- Is there a way to help our business minimize the number of customer contacts in the future?
- Do I show a 'send' button in the chat box or use an icon once the customer has started typing?
- Do I let a message to be sent on return/enter?
- What should be the value of the corner radius on the chat bubbles?
I sketched, whiteboarded, prototyped in Sketch, and finally produced annotated wireframes in Sketch and Zeplin. I used Hotels.com UI Kit to create consistent visual styles and keep brand's established look-and-feel.
I obsessed over the little details to make this chat experience user-centered and effortless. I had to tackle the following questions in my design iterations:
- Do I open chat in a new chat window?
- Do I use a back button once chat screen opens?
- How and do I indicate when it's a bot and not an agent?
- How do I transition from bot to an agent?
- Do I need an explicit close chat button?
- How do I show an undelivered vs. delivered message?
- How to make attaching a file an easy and even delightful experience?
- Is there a way to help our business minimize the number of customer contacts in the future?
- Do I show a 'send' button in the chat box or use an icon once the customer has started typing?
- Do I let a message to be sent on return/enter?
- What should be the value of the corner radius on the chat bubbles?
I sketched, whiteboarded, prototyped in Sketch, and finally produced annotated wireframes in Sketch and Zeplin. I used Hotels.com UI Kit to create consistent visual styles and keep brand's established look-and-feel.
I obsessed over the little details to make this chat experience user-centered and effortless. I had to tackle the following questions in my design iterations:
- Do I open chat in a new chat window?
- Do I use a back button once chat screen opens?
- How and do I indicate when it's a bot and not an agent?
- How do I transition from bot to an agent?
- Do I need an explicit close chat button?
- How do I show an undelivered vs. delivered message?
- How to make attaching a file an easy and even delightful experience?
- Is there a way to help our business minimize the number of customer contacts in the future?
- Do I show a 'send' button in the chat box or use an icon once the customer has started typing?
- Do I let a message to be sent on return/enter?
- What should be the value of the corner radius on the chat bubbles?
UX process details
UX process details
Sketches
Early lo-fi and mid-fi explorations
Early lo-fi and mid-fi explorations
Early lo-fi explorations
Visual design following brand's UI toolkit
Visual design following brand's UI toolkit
Visual design following brand's UI toolkit
Visual design following brand's UI toolkit
Visual design following brand's UI toolkit
Annotated wireframes in Sketch and Zeplin
Explorations for delivered / not delivered indication and attachment designs
Explorations for delivered / not delivered indication and attachment designs
Reflections and final thoughts
This project showcases that a designer should never underestimate the amount of thought and effort required to make, what might seem like a very simple and straightforward design, work seamlessly and delight the user!
Working on the customer-facing chat was a significant culmination of all the work I have done on the agent-facing solution at the time. Putting chat into the customers' hands was a huge step forward as it allowed us to offer customers to engage with us via a channel of their choice.
After the successful launch, hours of the chat availability were extended from regular 8 AM to 5 PM to a 24-hour-support. This solution was expanded to Expedia brand point of sale soon after the launch!
This project showcases that a designer should never underestimate the amount of thought and effort required to make, what might seem like a very simple and straightforward design, work seamlessly and delight the user!
Working on the customer-facing chat was a significant culmination of all the work I have done on the agent-facing solution at the time. Putting chat into the customers' hands was a huge step forward as it allowed us to offer customers to engage with us via a channel of their choice.
After the successful launch, hours of the chat availability were extended from regular 8 AM to 5 PM to a 24-hour-support. This solution was expanded to Expedia brand point of sale soon after the launch!
This project showcases that a designer should never underestimate the amount of thought and effort required to make, what might seem like a very simple and straightforward design, work seamlessly and delight the user!
Working on the customer-facing chat was a significant culmination of all the work I have done on the agent-side solution at the time. Putting chat into the customers' hands was a huge step forward as it allowed us to offer customers to engage with us via a channel of their choice.
After the successful launch, hours of the chat availability were extended from regular 8 AM to 5 PM to a 24-hour-support. This solution was expanded to Expedia brand point of sale soon after the launch!
This project showcases that a designer should never underestimate the amount of thought and effort required to make, what might seem like a very simple and straightforward design, work seamlessly and delight the user!
Working on the customer-facing chat was a significant culmination of all the work I have done on the agent-facing solution at the time. Putting chat into the customers' hands was a huge step forward as it allowed us to offer customers to engage with us via a channel of their choice.
After the successful launch, hours of the chat availability were extended from regular 8 AM to 5 PM to a 24-hour-support. This solution was expanded to Expedia brand point of sale soon after the launch!
This project showcases that a designer should never underestimate the amount of thought and effort required to make, what might seem like a very simple and straightforward design, work seamlessly and delight the user!
Working on the customer-facing chat was a significant culmination of all the work I have done on the agent-facing solution at the time. Putting chat into the customers' hands was a huge step forward as it allowed us to offer customers to engage with us via a channel of their choice.
After the successful launch, hours of the chat availability were extended from regular 8 AM to 5 PM to a 24-hour-support. This solution was expanded to Expedia brand point of sale soon after the launch!