PROJECT 2

Background

Pamela Simpson has owned and operated her own beauty salon in Laguna Beach for almost 30 years. She rents a room inside another salon, and provides haircuts and coloring to over 100 clients. In September 2017, Pamela told me that she wanted to grow her business in profit, size, and reputation. To do this, she wanted to make more money and move into her own salon space.

My Role

When Pamela, my hairstylist, told me about her plans to expand her business, I offered to help her design and develop a website using user-centered techniques. She loved the idea, so now, in exchange for free haircuts, I have become her UX guru. The following case study outlines the process we undertook during this iteration.

The Business Needs and Goals

To begin, I interviewed Pamela, the client. I wanted to know more details about her business’ needs and goals, and to learn more about her vision for her website. We discussed success metrics for her website, as well as challenges and opportunities that the project could present. Four important findings stood out to me during this interview:

1. The client's main goal was to earn more money through her business by raising her prices, so that she could have more independence as a business owner.
2. The client wanted to ensure that her current customers would not abandon her due to higher prices.
3. The client believed that the best way to convince her customers to stay with her is to create a website that reflects her business' professionalism and high quality.
4. The client was not focused on gaining new customers.

Competitor Analysis

Next, I conducted a competitor analysis, to get an idea of what works and what doesn’t work on other hair salon websites. To find competing salons, I did a Google search for hair salons in Laguna Beach, and then selected four of the top results. I then created a matrix with columns for five criteria that I evaluated for each website:

1. Purpose of Site
2. Summary of Content
3. Notable Features
4. Visual Styling Strengths
5. Overall Weaknesses

I then reviewed each website carefully, recording my observations in the appropriate columns. I also tested each website on a mobile phone, to see whether it was responsive.

After I evaluated each website, I also summarized my findings into on the spreadsheet. Overall, the weaknesses of each website outweighed the strengths. The two smaller salons, Studio Taka and International Hair Salon, had websites that were outdated and neglected. On these, it was difficult to find important information, like photos of the salon or the stylists’ work or the menu of services. The larger salons, Vogue and Serandi, had better websites, although they both seemed to focus more on flashy animation than good user experience. For example, these websites failed to use the navigation to help orient users, and often the graphics obscured important text and photos.

User Interviews

Before I began designing, I needed to interview the users of the proposed website, because I had learned that it was good UX protocol. I also wanted to get an idea of what kinds of features the users wanted to see on the website, so that the website was something that the users would need and would use.

I collected the contact info of five of Pamela’s clients, and scheduled interviews with them. I then created a list of questions to ask each interviewee. Each interview was conducted over the phone, and lasted about 30 minutes. I recorded each interview, with the permission of the interviewees, and then later transcribed them. For the full insight report, click here.

After I finished all five interviews, I realized that Pamela’s current clients did not believe that would need to use her website. This finding presented a problem for me. On the one hand, my client was telling me that her business goal was to publish a website. However, I was discovering that the target users were unlikely to use the website. I brainstormed ways to overcome this challenge:

1. I could look for features that would entice users to visit her website.
2. I could extend the friendly relationship that Pamela had with her clients onto the website by including features such as:

• Pamela’s current product recommendations
• Pamela’s recent news and creative inspirations

Turning Findings Into Artifacts

To help me better understand the users, I created a few artifacts based on the findings of my research. I aggregated the data from the five user interviews into one persona, Jamie, and then also created an empathy map for her.

Feature Assessment

Next, I created a Feature Value Matrix to help me prioritize features before beginning the design phase. I chose to do a Feature Value Matrix, because I was completing one for a design project in another class. The Feature Value Matrix was especially helpful to me at the time, because I was very focused on learning how to develop websites, which prompted me to think in terms of features.

I collected all the features that were unearthed in my discovery and competitor analysis phases. I then reviewed my notes from the stakeholder and user interviews, and calculated how valuable each feature would be to the user and to the business. When assigning a priority to each feature, I also took into consideration the amount of effort necessary to implement the feature during development.

The results of the diagrams made it clear which features I should focus on during the initial round of development, and which features would fit better in later iterations.

Information Architecture

Referencing the feature prioritization artifacts that I made earlier, I selected the features with mid- to high-level priority. Of those features, I selected items that were commonly seen on navigation menus and added them to the sitemap. For three pages - Gallery, About, and Featured - I also broke the pages down into sections to help divide up the content.

Piecing It Together

I planned to create a six page website - Home, Gallery, About, Featured, Services, Contact. To get some ideas about what should go on each page and how each page could be laid out, I browsed examples of other salon websites, including those that I found during the competitor analysis.

To get myself started in the design phase, I sketched out different ideas of how I could design the home page. I then took the best elements from my sketches, and created wireframes for mobile and desktop versions for the home page. Next, I created wireframes for the remaining pages based on what I did for the home page.

After sharing the wireframes with Pamela and getting feedback, I created low-fidelity mockups of each page using Omnigraffle. I then imported the mockups to InVision, where I created an interactive prototype that I could use for testing.

Conducting the Tests

Before I created a high-fidelity mockup, I wanted to find out whether the basic structure of my designs would work well for users. So, I began some user testing:

To collect some quantitative data, I created ten task-based tests on usabilityhub.com ( #1, #2, #3, #4, #5, #6, #7, #8, #9, #10 ). I recruited four participants to do these tests, sent them the links to the tests, and then I reviewed the results on usabilityhub.com.

In addition, I wanted to collect some qualitative data, so I conducted a “think-aloud” test. I created a test protocol, recruited two participants, and conducted the tests in-person, using an interactive prototype on InVision. With my protocol in hand, I asked participants to complete a series of actions on the interactive prototype, and to tell me what they were thinking as they went along. I took note of their thoughts, as well as their actions and body language.

The Bad News

Both sets of testing pinpointed several critical usability flaws:

For example, it quickly became clear that users did not know what to expect on the page that I had labeled “Featured”. This page was meant to showcase news articles and reviews that praised Pamela and her salon. Instead, participants either did not know what to expect at all, or expected the Featured page to show examples of hairstyles.

As I was designing the homepage, I wanted to provide the users with information about Pamela’s specialities and services. However, another finding suggested that the homepage only indicated that this was a “salon” website, and left the other details unknown.

The Good News

On the other hand, the tests also called attention to several design components that worked well. I had placed contact information in several conspicuous spots throughout the site, and all testers were able to find it easily. Additionally, users had clear and correct expectations about what they would find on the “Gallery”, “About”, “Services”, and “Contact” pages.

To Be Continued

By the time I had finished my user testing in December 2017, Pamela and I decided to put the project on hold. I had accepted a new part-time job, and Pamela was reconsidering some of her business plans.

Reflection

As my first attempt at a UX design challenge with a real client, I was proud of the work I had accomplished. There were several points when I realized that I should have approached a process differently, such as during my competitive analysis and while creating my site map. These were excellent learning opportunities.

I also gained valuable insight into the challenges of balancing business requirements and user needs. There was a point during my process when I believed that I could not satisfy both Pamela’s business requirements and the needs of the users. However, through communication with Pamela and in-depth analysis, I was able to merge both requirements into one coherent solution.