Spa de Esperanza Online Redesign

UX Design —

Figma

Prototyping

Usability Testing

User Research

COGS 187B Winter '22

Background

This course follows up on design skills taught in COGS 187A. Students probe more deeply into selective topics, such as animation, navigation, graphical display of information, and narrative coherence. Final project involved a quarter long redesign with real life client Spa de Esperanza.

In this project, my team and I:

Cold called and networked to find a project to redesign
Worked with client to establish business priorities and objectives
Conducted user research by gathering demographic information and conducting interviews
Created personas based on user research, then generated scenarios, use cases, and a functionality table to guide our redesign
Did a competive analysis looking at other brands functionality, site architecture, and content to understand what we should use in our redesign
Wrote a creative brief that explains our motivations, objectives, audience, and more.
Created wireframes and a page layout for our redesign
Conducted Usability testing and leveraged feedback from other teams to make usability improvements
Worked closely with our client throughout the 10 week project and presented our final prototype at the end

Client and Requirements Gathering

Our First task was to identify a potential client to work with for our project. We started off by identifying potential clients and we narrowed our target down to small businesses with an online presence. We had one week to network, cold call, and send emails. Out of our potential clients, we chose Spa De Esperanza, a Spa in the Bay Area, California that sells facials, cosmetics, and other skincare products and services. Spa de Esperanza is run by Kristina Shapona-Rodriguez, who acted as our liason to the company.

After finding our client, we had to figure out her needs and requirements. We meet with Kristina and she explained the current direction of her company and what her website could do better. We learned that Kristina was not looking to expand her in-person clientele with her website, but rather strengthen her online client base. To this end, she expressed wanting to do Zoom facials or create blogs or educational videos to teach clients how to take better care of themselves. Kristina mentioned the limitations of her in person business like the challenges of training new staff, and reinterated the importance of building out her online store for asthetics and usability. Based on this information, we generated a priority list with 10 action items we would focus on along the course of our redesign.

Priority List

Streamline the click and buy process for cosmetics.
Focus on developing the online business, specifically the zoom facials and cosmetic sales
Make the website more usable for older customers, while keeping it fresh for younger ones. Targeting a middle ground of 30+
Show of the brand’s blend between an integrity of science and natural and holistic options
Show off education as an important part of the website and brand. Its more than just a service, it teaches you how to take care of yourself.
Convey how personalized and wholistic the brand is. It is a relationship with the customer, much more than just a service.
Market the membership option to improve sales
Show of the credibility of the brand, the research behind the cosmetics, and the brand’s clinical aspect
Prototype new color palette and logo options
Generally declutter and make the site a bit easier to read. Make it more usable and intuitive.

User Research and Interviews

The first step in our redesign is to understand our client base and the people who are actually using the site. We gathered information from our client about the demographics of her clients and got information about several who would be willing to meet with us. We began by creating an interview guide to understand our clients. This included:

General Demographic Questions
Spa Experience Questions
Skincare Knowledge Questions
Website / Online Store Questions

We then interviewing 11 different clients and potential customers to understand how they use, or would use Spa De Esperanza's website. We started by building out persona types based on the information our client gave us about her customer base.

The in-person Customer
The DIY customer
The Online Shopper

Next, we built out 3 detailed scenarios and 15 use cases for each of the personas. The goal is to understand common problems and client use cases to refine our redesign. For example, for the in-person customer:

Scenario 1: JM, a local resident, heard about Spa de Esperanza from her friend who knows Kristina personally. She is mainly interested in anti-aging facials and products and would like to book a first time consultation at Spa de Esperanza.

Scenario 2: MW had an appointment for an upcoming monthly facial but has a scheduling conflict due to a family emergency. His appointment is in two days and needs to reschedule to sometime next week. He needs to check on the availability of his staff member and if the services he needs are available for that day.

Scenario 3: BK is a 30+ woman who wants to book a facial for herself and a group of her friends from Church. They are looking for group facials with services that cater towards anti-aging

We then compiled all of the different use cases to generate a use case summary table. This helps us understand which features are used the most, and which features we should prioritize in our redesign. From there, we built a feature and functionality table which breaks down the feature demanded for each type of client. Since our client wants to focus on the online customer base, this helps us understand what features and functionalties we should expand.

Competitive Analysis and Mood Board

Next we researched Spa De Esperanza's competitors. We searched for competitors in the Bay area, San Diego, Los Angeles, and ones that operated nationally. The five companies above were the ones we ended up doing an analysis on. We chose the Drunk Elephant and Wholy Dose because of their refined beauty-products online stores. We chose Spa Belles, Yoso, and Angelica B Beauty because they’re all spas similar in nature to Spa De Esperanza and have relatively clean and well organized websites. Overall, we focused on sites with online stores or blogs to address our client’s main wants from our initial interview

For each competitor, we conducted an in-depth analysis of their Brand, Functionality, Site Architecture, and Content. Based on our research, we compiled action items for our redesign

First, we looked at competitor branding. We looked at designs, key words, color pallette, brand terms, and more for each competitor

For the full slide deck Click Here

Then we looked at each competitor's site functionalities. We created a list of key functionalities, features, and all dynamic content

Then we looked at each competitor's navigation design and compiled a detailed list of all the primary labels on each competitor site

Lastly, we researched our competitor's content to understand the full range of content possibilities and how they are presented

Competitor Analysis Insights

Brand

Use a subdued color palette that enforces Spa de Esperanza’s existing professional branding
Incorporate Spa de Esperanza’s holistic treatments through images, graphics, or earthy tones.
UI writing should be personalized to enforce branding at online customer touch points.

Functionality

Store should be organized in a hierarchical - drop down manner
Simple and sensible filtering / sorting are necessary to facilitate smooth shopping.
Online booking should readily show availabilities of staff members. The more dates the better

Site Architecture

Hamburger menus seem to be a must on mobile whereas top navigation bars are the standard for desktop interfaces
“Book now” feature should be apparent on navigation
A search bar could be helpful considering the portion of Spa de Esperanza’s older client base.

Content

Services page are a great place to include images of the location
There should be some inclusion of reviews or client testimonials to build credibility
Blog and journals must be well organized.

Creative Brief

In our creative brief, we outline the strategy of our redesign project. This brief acts as our vision, outlining the scope, goals, purpose, audience, and requirements we will adhere to. Our brief includes the problems we anticipate, pieces of key audience insight that will drive our final product, as well as a Low Res Sketch which shows a draft version of the labels, pages, and navigation our design may use.

Product Summary

Spa de Esperanza is a spa in the Bay area dedicated to personalized and holistic skincare. It’s currently moving towards expanding its online presence through its online services and educational media. The new website will focus on a sleek and intuitive experience, making navigating a reinvigorated online store and educational media accessible to all patrons

Content Summary

Services

Shop

This will contain three carousels split between online services, in store services and a third as a placeholder if the client decides to expand their services options later. A search bar will be available at the top for users who prefer not to navigate the menus.clickable to sub categories. A search bar will be available at the top for users who prefer not to navigate the menus.

Blog

This portion is a main goal as stated by the client is to expand their online support and the blog is the main area where this will occur. In the blog there will be a large button which will lead to a video tutorials page, beneath will contain product recommendations separated by either product or purpose. At the bottom will be a journal which will contain articles both internal and external linked to topics of the clients choosing.

About Us

In line with most competitors there will be an image of the client and team with a values statement below. This will provide insight into what about the clients branding, values and history sets them apart. Below this will be a FAQ’s section and company information below.

Audience

Primary Audience: Skincare DIY-er

The “skincare DIY-er” is most likely a 25-60 year old woman looking to educate themselves on proper skin care practices and carry out the routines on their own. Their reason for sticking to at-home independent care can range all the way from COVID concerns to simply not being a fan of the in-person spa experience. What this audience needs from the website are easy to follow video tutorials (best case: hands-free) and helpful articles regarding skin care practices or recommendations from specialists. Ideally, the site can contain something like a skin-type questionnaire and product recommendation list to maintain Spa de Esperanza’s devotion to personalized skincare. We will target this audience by highlighting Spa de Esperanza’s journal / blog on the home screen as well as advertising video tutorials wherever applicable (services, shop, etc).

Secondary Audience: Online Shopper

The online shopper is an individual who is simply visiting the site to purchase products. This person is looking for product recommendations and an intuitive shop layout. Their reasons for shopping can include searching for a gift all the way to looking for products manufactured to cater to their already known skin care type. For this reason, the filtering / sorting capabilities of the online store should be powerful but generalizable such that it can service this diverse audience’s needs. Furthermore, this audience is probably already familiar with giant online stores such as Sephora or Amazon who are able to sell products usually at a much lower price. This may make memberships or loyalty programs a necessity to compete for their wallets. Lastly, the mobile port of Spa De Esperanza’s store must be mobile-friendly as many online shoppers do their shopping solely on their phones.

Tertiary Audience: In person customer

The in-person spa goer is an individual that is visiting the website simply to check business hours, location, contact, and most importantly, book their appointments online. Though the age range varies greatly, it’s important to note that in-person spa goers will contain the subgroup of elderly customers who are generally unable to interact with Spa de Esperanza through online facets. That being said, the in-person spa-goer usually goes to a spa to relax, get professional help for their skin care, or for a day out with friends /family. Since more people are moving away from calling in to make appointments, it’s essential that the online booking system on the site is intuitive and easy to use. Especially considering that the elderly subgroup of customers are some of the main in-person spa goers. It should be noted that the website needs to strike a good balance between this division of online / in-person customers. Booking should be made readily apparent to in-person goers, but shouldn’t be so overbearing such that it frustrates the DIY-er’s or online shoppers.

Objectives

Client Objectives

Our client’s primary objective is to invigorate and expand her online client base. As the business’ primary esthetician and as a busy mother of five, it is challenging for her to keep up with in person demand. Hiring and training new staff is expensive and time consuming and does not fit her business model. To achieve this primary objective, three secondary objectives must be pursued. First, the website needs a redesigned product shopping interface to make it more competitive for new clients. Second, the site needs to do a better job of selling and promoting the zoom facials and DIY kits. Lastly, the site needs to be more on the educational aspect of her brand by sharing teaching manuals for estheticians or clients themselves. At the tertiary level, our client would like her site to sell per special services like wedding treatments and cancer skin packages. She would also like to share the brand’s holistic approach, and its focus on developing long term treatments for its clients which work.

User Objectives

Spa de Esperanza’s clients want a seamless and integrated online experience that feels purposeful, practical, and that guides them to what they are looking for. Clients don’t want sites that feel empty, cluttered, or that lack direction. Clients want to be able to easily understand the differences between various online and in-person services, they want an easy booking experience, and they want to understand the professionalism of the care they are getting. Online clients want transparency around the DIY and zoom facial process. They want to be able to understand the different online product options, how virtual consultations work, how DIY kits are tailored for them, and they want instructions and tutorials to be simple enough for them to do . Those that are mainly using the online shop want a decluttered interface that easily helps them find products and that is very visual to break down product categories. Finally, all repeat customers want to learn about loyalty benefits, memberships, and current sales.

Personality and Tone

By reviewing the previous survey of Spa de Esperanza, and the feedback from our client on the competitive analysis and mood board, we summarized three main impressions of the brand.

Firstly, our client is a cancer survivor, so she hopes to help the customers' health through her professional knowledge and positive attitude.
Secondly, customers can not only buy products or book services through the website, but also learn new knowledge
Third, the brand combines ancient philosophy and modern science

Therefore, we hope to match the brand's concept of "Bring the integrity of science and holistic therapy to serve the customer’s skin care and life in general" by adding the following functions:

The whole website style should be clean,simple and elegant, which is also convenient for browsing and operation at all groups of age.
Carefully selected graphics and photos will not be boring or bulky.
The writing style is simple and easy to understand, and there will be no big paragraphs.
Reclassify web pages to make users have a smoother browsing experience.

Wireframes

Wireframe & Functional Spec

First, we started by building our product's page layout

Then, we build out the header, footer, and nav menu for our mobile design

Next, we built out the home page, services page, and the other pages in our mobile design

Then, we build out the header, footer, and nav menu for our desktop design

Next Phase Development Plan

Based on our usability test, we established a dev plan for the next iteration of our design. We divided up the work, and created time estimates for completion

Critiques

The next part of our project involved running some usability tests on our prototype to identify any weaknesses or things that are missing. We held usability sessions with other groups in the class and compiled their feedback.

Changes we will make

Change the font color on the services page to a more visible one
Shrink the size of several elements on the services page
Create and standardize the back buttons used
Add more back button functionality to the shop / services flow
Remove the arrow on the carousels and indicate in some other fashion that they are scrollable
Add more white space to the margins of images on the blog / services page
Standardize the header size on the services page
Fix the functional elements pointed out by team 19 (broken home buttons, large button click radius)

Reasoning

Overall, we agreed with most of the critiques we got or simply thought that they were necessary to the functionality of the product. The broken functional elements for example (8) were something that we must fix and were simply overlooked by the team in our rush to finish the prototype. As for the font color (change 1) our group was somewhat torn on whether the text was sufficiently visible but eventually agreed to change it after remembering our client’s sizable elderly customer base. They were actually the reason motivating our “zoomed in” aesthetic (change 2) but upon running through our desktop site with team 10, we realized that we had definitely gone a little too far with the sizing. Moving to change 3, we decided to standardize the back button because it’s good practice to keep UI elements predictable for the sake of ease of use and visual consistency. This same logic is what motivated us to also adopt the changes suggested by change 7. Change 4 was something not necessarily touched upon on our critiques but something we noticed as members of team 10 were going through our site

Here are some summarys of the feedback we got

Here are some examples of the feedback being implemented (More in the full project link below)

Final Design

We iterated more on our design. Here are some screenshots of it. Check out the figma link for more!

Reflection

I’m happy with our redesign and feel that our final project is a big improvement over Kristina’s current site. Although it leaves a bit to be desired in the looks department, I think we did very well considering just how big the site is. This project taught me that it is hard to incorporate everyone’s creative visions in a way that looks cohesive and that delegates work in a fair manner. I also learned that creating elements that are visually appealing for the web is very challenging, and it’s easy to get locked into a design idea without thinking out of the box. I also got a lot better at writing professional emails while keeping regular contact with our client, sending our deliverables, and letting them know of our needs ahead of time.

What I learned

I leared a ton about figma prototyping, about usability testing, about working on a team and coordinating projects with a real life client. The deadlines were also quite aggressive, which gave this project a real life feel.

Instructor Feedback

This is an aesthetically pleasing and ambitious design that showcases the clients' products and services well. We can see how much this design has improved over the weeks and we're very impressed with the way that you have responded to feedback. However, there were several lingering usability issues which impacted the design, in particular the shop filtering, and the interactivity. Overall great job.

Figma

Link to Project