Bernardo Caram: UX Design | Duration: 2 Weeks | Project Status: Completed

Project Overview

I collaborated with two team members on this project to redesign the appointment booking feature in Sephora’s mobile app. Our objective was to create a more intuitive, efficient, and informative interface for customers.

Sephora’s Mission: At Sephora, our mission is to cultivate pride among our employees by encouraging them to make meaningful contributions every day. We aim to deliver the preferred beauty experience to our customers and establish ourselves as leaders in the prestige beauty market through strong partnerships with our business associates.

Process

Problem Statement

After uncovering these takeaways and developing our persona, the problem was evident:

Customers using the Sephora app, like Henrietta, need a booking experience that allows them to make quicker and more informed decisions so that the abandon task rate decreases.

With this in mind, how might we design a more intuitive, efficient, and informative interface for scheduling appointments within Sephora’s mobile app?

Methodology

We decided to conduct a Feature Analysis of the Ulta, Nordstrom, and Hongmall apps as part of our Competitive Analysis. These companies offer similar products and services, directly competing with Sephora for the same customer base and market share. Our objective was to examine the features offered by these companies to identify any valuable additions that Sephora might be missing.

Our analysis revealed that none of the companies, including Sephora, provided users with the ability to learn more about their makeup artists or compare different artists to find the best fit for their needs. By incorporating an option to review a makeup artist’s bio and profile, Sephora would distinguish itself from its competitors.

After realizing that enhancing the appointment booking feature in the Sephora app would be beneficial, we conducted a Task Analysis of the Calendly, OpenTable, and Airbnb apps. These apps are highly regarded in the industry for their seamless booking experiences, and we aimed to assess how Sephora’s booking process compared and identify potential areas for improvement.

Our findings indicated that almost all the mobile apps examined, including Sephora’s, had booking features with 10 steps or fewer. To maintain the convenience of using the Sephora app and remain competitive with user experiences outside the app, it would be prudent to limit the updated appointment booking feature to 10 steps or less.

Lastly, we conducted contextual interviews with six different users. In each interview, we assigned the users the task of booking an appointment through Sephora’s mobile app and observed their behavior while asking them questions. All users answered the same set of five questions, and additional questions were posed when necessary to gain contextual insights into their actions.

Competitive Analysis:

We chose to conduct a Feature Analysis of the Ulta, Nordstrom, and Hongmall apps for our Competitive Analysis. Each of these companies offers similar products and services and therefore, competes with Sephora for the same customer base and market share. We chose to analyze what features each of these companies offers to see if there was anything Sephora might be missing that would be of value to customers.

We discovered that none of the companies in our analysis, including Sephora, offered users the ability to learn more information about their makeup artists or to compare one makeup artist with another to see which one would be the best fit for them and their needs. Thus, if we created an option to further review a makeup artist’s bio and profile, then it would set Sephora apart from its competitors.

Comparative Analysis

After discovering that improving the appointment booking feature within the Sephora app would set the company apart, we decided to conduct a Task Analysis of the Calendly, OpenTable, and Airbnb apps. Each of these are top-rated app in the industry for a seamless booking experience, and we wanted to see how Sephora’s booking process compared and if there might be areas of opportunity to improve.

What we discovered is that almost all of the mobile apps for the different companies had booking features with 10 steps or less. If we want to maintain the convenience of using the Sephora app and stay competitive with the experiences that users have outside of the Sephora app, then we should keep our updated appointment booking feature to 10 steps or less.

User Interviews

We conducted a contextual interview with 6 different users. During each interview, the users interacted with the Sephora app while we asked questions and made observations of their behavior. All users answered the same five questions, and when applicable, additional questions such as, “Why did you press that button?” to provide context for their actions.

1. What is your name, age, and where are you currently located?

2. How would you go about booking a Lash Application in the Sephora app? Please talk me through your process along the way.

3. What did you like about the experience?

4. Is there anything that you wish to change or improve about your experience?

5. Is there anything else that you would like to share about your experience that you haven’t had a chance to say?

Affinity Mapping

We then mapped the behaviors and sentiments shared by our users to uncover the common themes.

Key Takeaways:

· Some of the menu and button names are not clear and mislead customers. We should consider renaming them.

· Consider starting the booking process with the option to choose from a list of services/events before choosing the city, date, etc. in order to simplify the process.

· We should consider removing unnecessary flows that lead users to external websites. Keep users in the app to book their appointments.

· Users need the ability to search stores by postal code when booking.

· Users need the ability to search for services or events by name.

· Consider adding a feature that hints at the content of the bottom tabs so that people don’t have to click around to find out what each of the features does.

· Consider creating only one entrance for the booking page.

· Change the “Services, Events, and Classes” buttons to a drop-down menu and move higher on the screen.

· A user’s booking summary/history should be on the same page instead of on different pages.

· The booking page has no clear directions and too many ads so users find it difficult to read and use.

· A complicated booking process may increase the abandonment rate, which is harmful to community engagement.

· The Community Function is in disorder. We should consider organizing the info into categories and differentiating between main posts and replies.

· Consider moving some of the promotional information in the community feature to the “offers” section.

User Persona

In creating our persona, we used our initial company research of Sephora to come up with the demographics and brand affiliations and then the research from our user interviews to come up with the biography, goals, needs, and frustrations.

Design Studio

For this project’s sketches, I tried to imitate the stage as much as possible. I utilized “The Visual Alphabet”.

Based on the User Flows I developed in the early stages, I attempted to replicate the flow while also adding some additional details to this particular step. Here is an example of how my user flow appears:

User Flow 1:

User Flow 2:

By connecting all of this information, I was able to determine the steps needed to create the first sketch for our project.

Sketches

To create our sketches, we decided to conduct a Design Studio. Yi and Bernardo each made their own sketches of key pages from our user flow. Once complete, they compared their designs and, ultimately, combined them into one final set of sketches that we then used to create our wireframes.

Bernardo’s Sketches

Yi’s Sketches

Process Note: After each designing the flow from their perspectives, Yi and Bernardo combined their ideas into one flow.

Process Note: After combining their two sketches, Yi and Bernardo reorganized, reordered, and streamlined the flow to create a final flow and set of pages to design.

Prototype ~ Version 1:

Usability Test Plan

With our first prototype ready to go, it was time to put it to the test. We conducted a free, remote, moderated usability test with six users who acted on behalf of our persona, Henrietta.

During the test, we gave the users one scenario and five tasks to complete.

Scenario:

Henrietta is a frequent shopper at Sephora and is super excited about the in-person services that her local store offers. In preparation for an upcoming event, she is interested in hiring a makeup artist to help her with her lashes.

Tasks:

1. Locate where you would book a Lash Application appointment.

2. Open the Lash Application page and read the details about the service.

3. Book an appointment for Monday, May 15th at the Sephora on Bloor Street.

4. Review Alyssa and Ike’s profiles and book an appointment with one of them for 9:45 am.

5. Complete your booking process.

   
   

Goals:

Our goals are:

● For users to make one click or less before clicking the Services tab on the homepage.

● For users to move from the Main Services Page to the Lash Application page in less than 10 seconds.

● To score an 80 or higher on the SUS Test.

Testing ~ Results

Results Our results were:

● On average, it took users one click to go from the homepage to the Services tab.

● On average, it took users 4.6 seconds to move from the Main Services page to the Lash Application page.

● System Usability Score: 86.66

● On average, users made 1.16 errors during the 11-step appointment booking process, making the Error Rate = 10.6%.

● Despite making any errors along the way, all six users were able to complete all five of the tasks given, making the Success Rate = 100%.

The graph below shows the collective number of errors that were made by the six users during each of the five tasks

Based on our test results and user feedback, we came up with a list of action items to complete in our next iteration

Make “Choose Location” words clickable as well.

● Make the drop-down menu button larger.

● On the “Services Page — Services”, reorder the available services so that “Lash Application” pops up first.

● Hovering isn’t an option on mobile. Change the hover feature to an “i” icon so users can click to learn more if they want to.

● Change the black + “book” button on the artist profile page to a button that reads “book.”

● Redesign the “Enable Location” pop-up to be bigger and show up in the middle of the page.

● Change the “Description” drop-down menu on the Lash Application Service page to always be open.

Final Prototype

Solution Statement

We redesigned the Artist Booking Feature, and users rated our new Artist Profile feature 4.83/5.

Next Steps:

Moving forward, we’d like to conduct another round of usability tests, with our iteration, and compare the two results.

Since we removed the “Store Locator” feature from the bottom navigational menu and replaced it with the “Services” feature, we’d like to conduct further research to see if other changes to the bottom menu need to be made and streamlined accordingly.

With that information, we’d like to conduct a Card Sorting Analysis and establish a new hierarchy of information for the app.

Finally, we’d like to build out an opening Onboarding Series for all new users to explain each of the menu items and stand-out features within the app.

The End.