ux – Camille Zapata

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.

March 18, 2020

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.

Investment Ideas

Project Summary

The team designed an online private banking platform for Credit Suisse‘s customers to manage their investments. It also informs clients of opportunities and suggestions the company are giving to improve their portfolios. This was part of an initiative to digitize private banking.

I joined the team after the project has kicked off, and designed a part of the full experience.

My Role

I was part of a team of UX designers and an art director. I was responsible for Investment Ideas, where clients can view suggestions by the bank that could ultimately improve their portfolio’s value. I worked on the content, visual design, and user experience for this segment of the app. We engaged the clients in co-design sessions to better understand their needs and expectations and hosted user testing sessions with their customers to get their client’s perspective.

I used Sketch for visual design and Axure for prototyping.

Process

Unfamiliar with the finance industry, I had to do some personal research on investments and personal banking. Co-design sessions with the clients and customers helped me understand how the bank’s clients think and what their motivations are.

Apart from user interviews, we used card sorting to identify the information that are essential for the bank’s customers to make decisions regarding products.

I went through a series of iterations on the visual design, adding and removing elements based on what’s most important for our users to see. Although there were a few compromises due to some technical limitations, the design still focused on important information first.

The first few designs integrated more images to break the text in the page. However, these images were not helpful for users to achieve their goals and I had to make adjustments.

Early headers hid critical information at first. This was changed based on our interviews and user testing.

Cards have been adjusted to show the most relevant information for the client.

The design for the Ideas dashboard changed to accommodate critical information.

Evaluation

The platform was initially released for the bank’s Asian clients. The digital app was adopted by 40% of the client’s customers and helped them generate a billion dollars. It has also helped Credit Suisse win awards for their digital banking experience. As a team, we’ve successfully empowered our client’s customers to manage their investments at their convenience and bridge the communication between clients and relationship managers. Due to the results, I consider the project to be a huge success.

September 14, 2017

Email for the right time and right context

Project Summary

What’s the future of email? Chat apps are now the primary tool for everyday communication with friends and colleagues and email has shifted its purpose. People use it as a todo-list, or part of a security workflow that people need to validate their accounts (think: logging onto Slack). Email seem to have changed into something that validates our identity, or gives you purposeful information: meeting agendas, upcoming lunches, or a bill waiting to be paid.

The team at Huge designed proposal of an experience that helps people do more by helping people think less.

My Role

As UX designer, I was involved in user research through one-on-one interviews, competitive analysis, and designing user flows and wireframes, and user testing. I worked with an art director and visual designer who set the brand guidelines, which I applied onto the rest of the screens for the app. I designed the interactions using Framer.

Process

The team engaged the client through a workshop to understand their brand and the goals of their team internally. User interviews and competitive analysis was done prior to the design phase. We interviewed a small group of professionals and narrowed down common use cases for email:

Communication
Planning and Organization
Relationships and Networks
Identity

Email has gone beyond being a ‘communication tool’. Looking at it from a different perspective, people have been using it to form new habits or accomplish personal and professional goals. Although traditional email as we knew it was changing, it was not necessarily dead. APIs have made the email experience faster and convenient for people.

The team proposed an experience that can push people towards accomplishing tasks rather than digging for information in their Inbox.

Design

Emphasis was put on bottom navigation and gesture-based browsing. Swiping through emails makes it easier to go through important agendas quickly. The screen estate was optimized to show the most relevant information where additional info can be pulled from the top.

Evaluation

The team had user testing sessions to evaluate the proposed experience. We implemented some design and content changes following the tests to improve on the usability and clarity of the experience. Icons that were too vague were redesigned to conform to imagery that people were more familiar with.

The proposal was received well by the client. We had a month for research, design, and prototyping and I was happy with what our team was able to accomplish in a short timeframe. Building the prototype using Framer helped the team bring the experience to the client’s devices especially when we had to present the product remotely.

If I were to do the project again, I would like to accomplish a few things:

Integrate more services into the experience to show email as part of an ecosystem.
Demonstrate the impact of personalization and NLP when managing tasks.

September 11, 2017

Developing learning habits in kids through a media platform

Project Summary

The team worked on a pitch for a media consumption experience that focused on learning for kids.

My Role

I was part of a team of two other UX designers and an art director. The user flows were divided among the team and I designed the onboarding and search experiences. I did visual design that followed some design guidelines set by the art director.

I used Principle to prototype interactions for some of the screens.

Process

One of the members of the team conducted user interviews (children aged 3-10). We also conducted a survey among parents from different parts of Asia, UK, and US to understand what their concerns are regarding media content apps (TV shows, e-books) and their kids’ interactions with these products.

Following our findings, we designed an experience where media consumption for kids doesn’t have to be boxed within their favorite characters. We explored showing videos and books under learning buckets such as maths, music, outdoors, geography, or careers like doctors and dentistry. We also integrated short quizzes to put emphasis on topics and terms that children may learn from.

Design

The app was designed for kids. I’ve taken a more visual approach to the experience: more space for thumbnails and images, bigger and readable text, and wide tappable areas. Children should be able to navigate through content without reading.

I started with wireframes and went through iterations to polish the copy and content.

Early wireframes of the onboarding experience.

Interactions were done using Principle to demonstrate animations for some screens.

We wanted to highlight different ways of discovering content by bucketing videos and ebooks under content themes such as ‘Play Outdoors’, or exploring space.

September 10, 2017

Camille Zapata

Tag: ux

Digital tools for custom wear

Challenges

My Process

Success

Manage hotel bookings in your pocket

Project Summary

The Problem

Discovery

Design

Launch

Learnings

Beauty as a service

Project Summary

My Role

The Problem

Strategy

Process

Research: looking at the landscape and understanding customers

Design: navigation framework

Design: pages and user flows

User Testing

Evaluation

Investment Ideas

Project Summary

My Role

Process

Evaluation

Email for the right time and right context

Project Summary

My Role

Process

Design

Evaluation

Developing learning habits in kids through a media platform

Project Summary

My Role

Process

Design