Background
Pamela Simpson has owned and operated her own beauty salon for almost 30 years. She rents a room inside another salon in Dana Point, and provides haircuts and coloring to over 100 clients. Pamela wants to grow her business in profit, size, and reputation. To do this, she wants to make more money and move into her own salon space.
My Role
After a break, I restarted this project in July 2018. (I previously worked on this project from October - December 2017. Click here to view the case study for that iteration.)
Restarting the project was a great opportunity for me to gain further experience as a UX designer, and to showcase how my UX skills had improved since I had graduated from UCI. Last but not least, I wanted to finally publish a live website for Pamela!
The Business Needs and Goals
As we restarted the project, I conducted another informal stakeholder interview with Pamela, to see if her business needs and goals had changed since October 2017. For the most part, they remained the same:
Pamela’s main goal was still to earn more money through her business by raising her prices, so that she could have more independence as a business owner. To convince her current clients to stay with her as she raised her prices, Pamela wanted to create a website that reflected her business’ professionalism and high quality.
While Pamela still felt that she was unable to take on more clients at that time, she had begun to consider building a new, larger salon in Dana Point in the near future. This raised the possibility that she may be able to take on new clients sometime soon.
Competitor Analysis
Next, I conducted a competitor analysis, to get to know the strengths and weaknesses of Pamela’s competition. This would help me to make informed and strategic design decisions as I moved forward with the project.
For this analysis, I selected three direct competitors. To select the competitors, I searched Google and Yelp for salons that matched at least three of the following five criteria:
- Located in Orange County, California
- Has fewer than 5 stylists
- Specializes in highlights
- 5 or fewer salon chairs
- Has a website
I then evaluated each of the three salon websites based on Nielson’s 10 Usability Heuristics, keeping track of my findings in a spreadsheet. Afterwards, I summarized and analyzed the results in an insight report, and identified six areas in which Pamela’s website could outperform those of her competitors.
User Surveys
To get to know the users better, I began my research with an online user survey. I compiled a list of questions that would provide data about the demographics of Pamela’s clients, as well as some statistics about the clients’ relationship with Pamela.
I ran the 13-question survey on Google Forms, and collected answers from 21 of Pamela’s current clients. After summarizing and analyzing the data in an insight report, I also created a list of insights and recommendations.
User Interviews
To supplement the quantitative data that I discovered from the surveys, I wanted to collect some qualitative data. To do so, I conducted nine user interviews - six with Pamela’s current clients, and three with people who have not gone to Pamela’s salon.
I created an interview script with two variations (one for current clients, one for non-clients). I interviewed the clients in Pamela’s salon, before or after their hair appointments. The three non-clients were interviewed over the phone.
As with the user surveys, I summarized and analyzed the interview results in my insight report. One finding stood out as especially significant:
- Pamela has an uncommonly loyal set of clients, who are willing to travel from far away to see her. They love Pamela’s personality and her talent, and most have been visiting her for decades. They cannot imagine going to another salon.
To capitalize on this insight, some of my recommendations included:
- Extend the friendly relationship that Pamela has with her clients
- Prominently feature the loyalty of Pamela’s current clients, whenever Pamela is ready to gain new clients
Personas & Empathy Maps
Building on the understanding of the users that I gained from my research, I created three personas. Within the category of “current clients”, I noticed two distinct trends: a young adult generation (who had been going to Pamela since they were babies), and an older generation of women. I also created a persona to represent the non-clients that I had interviewed.
To elaborate on these three personas, I also created empathy maps for them. I used data that I had collected from my research along with online resources to further define the emotions, preferences, and experiences of the three personas.
These personas and empathy maps painted a very vivid picture of the target users of Pamela’s website, and helped guide all of my future design decisions.
Scenario Maps
In preparation for the information architecture phase of my project, I wanted to think carefully about the different kinds of tasks that my personas would most likely do.
To that end, I created three scenario maps, one for each persona. The maps outlined the different steps each persona would need to take to complete their goal.
Storyboards
Next, I translated the scenario maps into three different storyboards that illustrated the experiences my personas would likely encounter when trying to perform their most common tasks. Being able to visualize the stories allowed me to further explore the experiences my users would encounter, and to develop a deeper empathy with them.
To create the storyboards, I used graphics from the SAP AppHouse’s Scenes collection and Adobe Stock, and put the scenes together on a Google Slides deck.
Task Flows
To ensure that I would create designs that encompassed each step in the users' main goal, I created task flows for each of the main personas. Relying on the data I had collected in my research and the characters I built with the other artifacts, I thought carefully about what each step would look like. Then, I used Jesse James Garrett's Visual Vocabulary to draft out each flow.
MVP
Last but not least, I wanted to test whether the website would be a success with Pamela’s target users, and to start ironing out problems early in the design process, so I created an MVP.
I included the components that Pamela requested, such as a “new website coming soon” message, address, and contact information. I also showcased a few products that Pamela recommended, as a way to extend the Pamela-client relationship outside of her salon. I knew I’d want to be able to monitor the usage of the site, so I also added Google Analytics.
After the MVP site was live for a few weeks, I checked the Google Analytics. The site usage had gone up, with most users arriving via Facebook or LinkedIn. (Pamela added the URL to her salon’s social media pages.)
User Stories
To launch the information architecture phase of my project, I decided to begin by creating a list of user stories, based on my knowledge of the users that I gathered during my research. These user stories would keep the content of my site user-focused, and would form the foundation of the card sorting task that I would undertake as my next step.
Card Sort
Before designing the site map for the Pamela Simpson Beauty website, I wanted to learn more about the mental models of my users. Knowing how the users think about and organize the information on the site will help me ensure that the information architecture that I create will provide the users with a good experience.
I conducted the card sort activity remotely online, using Optimal Workshop’s tool, OptimalSort. I created a set of 30 cards, and then recruited participants who represented each of my three personas. In total, I got results from seven participants.
After the participants finished the card sort activity, I took a look at the results, keeping an eye out for trends and outliers. I standardized the categories first, and then examined the Dendrogram and Standardization Grid that Optimal Workshop provided to me.
Next, I summarized and analyzed my findings in an insight report. Here are some of my findings:
- Two participants grouped all of the cards related to social media into a separate category.
- There was a high level of agreement in two separate categories - Products and Contact - 72% and 62%, respectively.
- Four participants created a category that corresponded with an About section, with an agreement of 52%.
Finally, I created a sitemap for the website based on my findings from the card sort analysis. In the open card sort activity, the users created categories for Home, Gallery, Services, Products, and Contact Us. (The full details of my reasoning behind the sitemap are available on the insight report.)
Sketching
With my site map in hand, it was time to start designing the website. To design the website using the Mobile First methodology, I started with sketches for smartphones. I created three different versions of the home page, and then one version for each of the other four main pages on my site map. Next, I took the mobile designs and rearranged them to fit on desktop-sized screens. I wanted to keep the experience consistent between mobile and desktop, while at the same time putting the extra space on desktop to good use. Finally, I sketched the layouts for a horizontal tablet screen, to check if anything would need to be rearranged. It turned out that the tablet screens fit the content the same way as the desktop, so no changes were necessary.
When I brought the sketches to Pamela for review, she was unfortunately busier than normal. Rather than reviewing the sketches, she preferred to wait to look over the designs when I completed the prototypes. She did remind me that she does not want to use any stock photography in the live website.
Wireframes
Next, I created wireframes in Adobe XD, based on the sketches that I had drawn. For this step, I used Adobe XD’s wireframing kit, starting with the mobile screens and then moving on to desktop.
As I built out each screen, I made further decisions about the interaction design, visual design, and content strategy. While making these decisions, I researched best practices about each component. I chose where the icons and buttons would link to, and what each block of content would be about.
I also carefully considered the navigation menu - whether I wanted to hide the navigation menu in a hamburger menu, or keep everything visible. I decided against a hamburger menu, largely based on advice about Mobile First methodologies from Luke Wroblewski. I originally planned to have the navigation menu at the top of the screen, to keep things consistent with the desktop version, but I realized that a top navigation menu plus a header at the top of the screen made the page feel off-balance. So, I moved the navigation menu to the bottom. Then, I chose icons that represented each of the five pages the website would have, and I labeled them.
Style Guide
Up next:
Style Guide