Tag: research

Manage hotel bookings in your pocket

Project Summary

Before 2019, customers who booked a hotel through Qantas could only access the details about their booking through their email confirmation. In 2019, our team released the portal in which customers can finally view and access all their current and past bookings.

I was the product designer, and I was responsible for user research, design discovery, and the final visual/ui designs. I tested user flows through prototypes. Our primary goal was to provide customers the information they need exactly when the needed it, and to give customers a way to manage bookings through self-help.

The Problem

How might we give our customers more control over their bookings?

The company was aware that it was falling a little behind our customers’ expectations. While all our competitors already had tools that allow their customers to manage their lodgings online, Qantas customers could only view details about the hotel they’ve booked by combing through their inbox and looking for their confirmation email.

Customers could already cancel bookings through a special link in their confirmation email. In this project, our goal was to extend that functionality and give our customers the ability to change or manage their bookings. The benefits to the company was two-fold: customers can make changes quickly (which would make them happy), and our call center won’t be bogged down by small tasks. If customers can resolve some booking issues through self-help, our customer service team can focus on resolving bigger tickets that require more of their time and knowledge.

Discovery

The team had to first decide which key functionalities, apart from viewing bookings, that we have to build for our customers. We were able to get data from the Customer Service team, who managed the calls the company receives from customers. Cancellations was the top reason for customer support calls (and this feature was already available, we only needed to integrate it into the customer’s account section). This is followed by changing booking details (such as guest name, email, and phone number). Other sources of customer information included surveys and customer call recordings. I had access to the types of questions customers typically asked when they call customer support, and saw an opportunity to address these topics through the customer’s account portal.

An ideation workshop with different stakeholders, developers, and the customer service team based in Manila.

I facilitated a number of workshops to generate ideas from the team and other stakeholders. We involved the Customer Support team, which was based overseas, since they deal with our customers directly. Discovery and design workshops uncovered needs not just of our customers but also of our customer service representatives.

Some workshops I facilitated:

listening to a few customer support calls with the product team to build empathy and share ideas to solve customer pain points
prioritization with the customer service team to understand which features they think our customers would need the most
sketch sessions with different teams and stakeholders to involve everyone in the early design process, as well as listen to their insights
a gamification of the customer journey

A card game I created to simulate the unexpected problems that arise during travel.

The team developers roleplaying to simulate the experience of a customer with issues in the middle of travel.

Design

The MVP for the customer’s account section included:

the new navigation for customers to access their account
the ability for a customer to view their bookings
the ability for a customer to cancel a booking

I went through a process of adding and subtracting elements when refining the designs for each screen. I created prototypes via Sketch, Axure, and Framer (depending on what I want to test) to demonstrate interactions and test various flows in different platforms. It was important that the site worked excellently on mobile, since travelers would use it as their primary device to manage bookings on the go.

Some early designs that was too cluttered.

I refined the screens and removed unnecessary information. I reused design patterns that the team was using on other products to keep the design consistent, whether the customer is searching for a hotel or managing their bookings.

I also went through a few design rounds to make elements scalable. We had a number of features we were planning to build next and I had to think ahead to accommodate these in the future. A menu with 2 links on launch may have 4 in the next year or so.

The final designs can also be viewed when a Qantas customer logs in here to manage their bookings.

Launch

After launching the MVP, we put up a poll on the Account section to ask customers what they would want to see on this page. This gave the team direction in terms of what to build next.

One of the top requests by customers was the ability to change the guest name themselves. Unfortunately, this was just one of the few things they had to resolve through a call because of identity verification steps. There were other top requests such as rebooking (instead of cancellation). Since we would need more time to implement features that would resolve these hot pain points, we thought about adding an FAQ at the bottom of the page with the top questions/requests.

To measure the effectiveness of this feature (and the relevance of each question), a small yes/no question appears at the bottom of each FAQ question.

Other small and quick-wins for the team were useful features that were easy to add. While we were working on features that would take time to be delivered, we wanted to provide a little convenience for customers where we can.

An “Add to calendar” link makes it convenient to copy booking dates to any calendar

The ‘Book again’ links appear in a few screens, useful especially for our business travelers

Learnings

The workshops and customer call recordings highlighted very early on just how much we could “empower” our customers. With a product that was primarily online, there were limitations on what we can do for our customers. A traveler stuck in the middle of a town without internet, or lost in a city whose language they cannot read or understand, are already common pain points that our product cannot address. We had to move away from some of these in order to focus on problems we had the ability to solve.

We were tracking engagement and regularly had polls on the site to provide the team with a constant feedback loop with our customers. I left Qantas shortly after our launch and was unable to keep track of the usefulness of some of the features.

We needed more time to measure the impact of the product on the number of customer calls our customer service team was receiving, although our customers had quickly shifted to managing and checking their booking through their account once the feature went live. There was a consistent upward trend of user adoption, so we knew that managing their bookings was a much-awaited feature.

One of the challenges for me as a designer was this constant mental debate about consistency in design patterns. Should I stick to a pattern used by a different team on a different product, since it is ‘familiar’ to our customers, or should I introduce a better pattern that fits for the context I am designing for? (I went back and forth through different designs because of this issue!)

I tried to find a balance in between and at the end of the day usability won. If an interface or design pattern had some similarities (for example, same color for links), if it is easy to use and understand then the customer won’t have any trouble adapting to some slight differences between the products under the Qantas umbrella.

I also discovered just how much I enjoyed facilitating workshops with my team, even as far as doing an ideation workshop with a remote team where we were able to share designs with each other. Gamification of the customer’s journey was so enjoyable, we were planning to apply it to other projects. It wasn’t often that I had so much time for design discovery, and I learned so much about collaboration by facilitating different types of workshops.

This project has affected how I work, not just with pixels but also with people, in the best way possible.

Project Summary

A project brief from a client lead to a proposal to transform their business into a service-oriented experience instead of focusing only on consumer products.

Our team designed an omni-channel experience that could differentiate itself from other skincare brands in the industry. We wanted to give women confidence by building trust between them and a luxury beauty brand brand through a freshly integrated online and offline experience. The online content was geared towards guiding customers to understand skincare and encourage them towards booking consultations with Beauty Consultants in retail stores and counters, while building trust as they use SK-II’s beauty products.

My Role

As the product designer in the team, I assisted in various phases:

The first phase was the vision phase, in which I did some initial research work for the team members to compare how some brands have been evolving, and what new technologies are being used to connect physical and digital experiences.

The second phase was design and development, in which I was part of a UX team with 3 other designers. Our team was responsible for the user flows, initial UI proposals, and overall UX design. I proposed a collaborative workflow for the designers using the Sketch design tool, the Craft plugin, and a library synced over Box and this was used for the project. I was responsible for user flows for certain pages of the site as well as prototyping navigation patterns and interaction designs.

The last phase was future vision work, where I designed and created a chatbot prototype for an internal client event, where stakeholders and attendees were able to access rich content by talking with a Facebook chatbot on their mobile phones.

The Problem

How could we convince customers to repurchase our skincare products?

The skincare market is saturated with options and the products use very similar ingredients, address the same skin concerns of their customers, and with little differentiation from each other. How could our client transform their current customers into lifetime customers?

Strategy

Future brand experiences are making themselves present in the life of the consumer at different times both digitally and physically, accompanying them in every step of the way. Our client’s brand experience should go beyond the products they sell and be more involved with the customers’ skincare journey. It’s very important for the brand to educate their customers on proper usage of their products so that the customers could see the results on their skin, which could lead to repurchasing. The client’s data showed that customers who repurchase have a very high probability of becoming lifetime customers which is the brand’s overall goal.

One of the channels in which our customers start their journey is the brand website or social apps (WeChat) and for this project the team focused on the web channel.

Process

Research: looking at the landscape and understanding customers

We looked at how brands are transforming their businesses and I did some research to assist the business and strategy teams. I identified trends and technologies from other brands in various industries and listed down companies that have evolved or expanded their product experiences.

Once the design process started, I first wanted to understand our customers. I identified the types of people visiting the site based on their knowledge on skincare, modified it based on our client’s target market, and then mapped out their journeys in a diagram:

The Novice's Journey — The Novice’s Journey

The Beauty Enthusiast's Journey — The Beauty Enthusiast’s Journey

I wanted to dig into the emotions of people who had experienced the skincare consultation from the brand’s counters before and use that to guide the intent for each page. I looked at blogs to get some quotes and feedback about their experiences, collected those in a document, and mapped out their emotional journey in a table:

Customer emotions as they go through different pages

Design: navigation framework

The team shared various ideas for the pages of the site but we were assigned to own specific pages. We first started with the overall sitemap, followed by the navigational structure for the site.

We were inspired by bottom navigation commonly found in apps and gesture-based interactions. It’s becoming more common to see web sites adapting UI usually seen on apps. People are now spending more time on apps compared to the web browser that their mental models have been shaped by various apps. The website would be accessed by customers in Japan who were more likely to view it on their phones rather than on desktop so we proposed ideas with a distinctive mobile experience.

The ideas were exported into Invision as clickable prototypes for quick proofs of concepts.

Gestures would revert to scroll interactions when viewed on the desktop so that navigating through pages would be comfortable and convenient contextually. Because Invision lacked the capability to develop gesture-based prototypes and animations, further iterations on the navigation patterns were made on Framer.

By working together with the UX team, we went through more iterations on the navigation framework. We discussed which ideas could scale and weighed in some reservations of the client when it came to patterns that they were unfamiliar with. We looked for a sweet spot that leveraged what people are used to while introducing swipes or bottom navigation elements to categories and product detail pages.

We prototyped early to communicate the concept and framework to the team and the client. Due to internal processes and stakeholders, the navigation implemented was replaced by a traditional hamburger menu.

I created wireframes and prototypes; the visual design of the site was owned by the Visual Design team. We worked closely with the copywriting team for the content strategy of the site. As the project progressed, the wireframes used for the prototypes were slowly replaced by the visual designs. The team worked with an outside development company, and the prototypes helped communicate the interactions the design team wanted to execute.

Design: pages and user flows

The team split the different user flows among ourselves. One of the pages we had to propose was the user’s account. What could draw customers back into the brand site and use it as a service?

I used Aaron Otani’s four stages of behavioral design as a guide:

I went back to the customer’s goals to design a page that could motivate them to come back. Knowing this, we could design the messaging and information we show to the customer in ways that would help them reach their goal.

On a conceptual level, there were a lot of things the brand could build. We split the Account page into 3 phases: Now, Later, Future. This could help the client prioritize based on the features they currently have and the technologies they should be investing in right now, as well as the improvements they can execute in the future.

Clickable prototypes were created at the minimum to communicate user flows to the rest of the team. Module lists and documentation was also created to guide other teams. We discussed pages with other designers, the copywriters, and members of the team so we could quickly identify modules that were missed or business goals that were overlooked.

User Testing

The team conducted user testing sessions on the product detail pages to observe and understand how customers purchased skincare products. I assisted another UX designer by listening and taking down notes as he conducted the sessions. Together with the visual design team, we updated our designs through iteration based on the discoveries made during user testing. Some of the changes were visual and simple but the sessions also forced us to pull back on concepts that wouldn’t be built to its best potential due to deadlines and cost.

We synthesized our findings and brought the recommendations back to the Visual Design Team.

Evaluation

Overall, I was proud of a number of things:

My contributions towards a collaborative workflow (introducing to the team a Sketch + Craft Library synced online). We had to work around constraints in our tools but overall it made sharing assets easier and sped up our workflow.
Prototypes were created to communicate concepts and to test how well the navigation and interactions feel through actual touch and gestures.
The website experience we proposed was in line with where I believe brand web experiences are headed: with a focus on the mobile experience, influenced by UI from apps.

I learned a lot about working on bigger teams and client-related roadblocks during the 5 months that we were working on this project. This track of work was only one of the many that the brand needs to implement to truly transform itself from a consumer goods company to a service company.

The redesign has been launched and is currently live on the Japanese and Singapore markets.