Personal Styling Flow
Duration: October 2021 (Four Weeks)
Tools Used:
Figma & FigJam
Google Drive, Slides, & Analytics
Client: Eco-Stylist
Team of 3
Role: UX research & Design
Key Activities
Script and Moderate User Interviews & Tests.
Identify key pain points & insights.
Develop UX strategy to address User needs.
Build Wireframes & High Fidelity Screens for Prototype.
Overview
goal
Increase Personal Styling Conversions
Eco-Stylist wanted us to identify what was causing a deadlock in conversions regarding their Personal Styling services. Our business goal was to increase conversions in the Personal Styling feature of the site. Our tactic: Improve the user journey on this and the supplementary scheduling page.
The Problem
Users visiting the Personal Styling pages abandon their journey after two minutes.
Eco-Stylist founder, Garik, personally redesigned the styling page in July of 2021. Since then, conversions completely dropped off. Our initial analysis led us to our hypothesis to test: Users visiting this site are met with an interface so confusing, they can’t even complete the flow necessary to determine if Personal Styling Services are worthwhile.
Our solution
Give Users Greater Clarity and Control
The key structural adjustment entailed re-orienting the information architecture to ensure Users had clarity regarding the service offerings. We redistributed the User Flow, giving Users more freedom to explore their options and greater access to the Styling process prior to scheduling and purchase.
We aligned the visual style with the design guidelines established by a previous design team.
We re-phrased language to reflect User Goals and Concerns.
We cut out text that was unnecessary for the User Goal: Learn what Eco-Stylist is offering so that I can determine if I’ll be satisfied with the result.
Eco-Stylist Case Study
The Process
Enacting User-Centered Methods to Meet Business Goals.
While our initial analysis of the site revealed some clear interaction issues, the team was determined to base our redesign on insights obtained from talking with the Users and the main stakeholders.
A Unique Issue
The client had worked with several different design teams over the years, resulting in:
A recent brand overhaul that had not been fully implement across the site.
A User base that had been over-interviewed.
Considering the extensive re-branding and overall website redesign, we determined that brand design was outside of our scope as a UX Team for this process. We wanted to focus on the experience of the pages, and implement the existing brand guidelines to reinforce the Eco-Stylist identity for Users.
the Research
Know Your Starting Point
In order to know where you’re going, you need to know where you’re at. The team performed an internal heuristic analysis On Eco-Stylist’s current Personal Styling page. From that analysis, we developed our hypothesis for our initial interviews.
Info Gathering
Our first two weeks working on the project entailed info gathering from several sources, in order to build a well-rounded perspective on the problem. Given the timespan, we broke our process up into: two weeks of info gathering. One week of ideation and design. And a week to test and iterate.
We wanted to understand:
What is standard in the industry - where should we focus on consistency?
What is the main draw for users?
What’s the major stumbling block with the site as it exists?
Stakeholder Interview
Meeting the Man Behind the Curtain
The team met with the Founder of Eco-Stylist, Garik Himbaugh . Speaking with Garik clarified the goals of Eco-Stylist as a company, and put personal Styling into the context of the whole.
Garik’s goals were to increase conversions and determine how well Personal Styling ultimately fit into the business offerings of Eco-Stylist as a company.
Garik revealed that they undertook a redesign of the Styling page back in July, and conversions seem to have dropped since.
Secondary Research
Familiarizing ourselves with the Landscape
The team undertook competitive analysis of three personal Stylists, determining:
The Personal of Personal Styling- Each Stylist built up a personality that reinforces their expertise and care for their clients.
Focus on the User and how personal styling benefits them.
Brand Alignment
At this point, I asked Garik to send us the brand guidelines for Eco-Stylist, as well as the work from the previous UX team he employed during the redesign. While I enjoy the visual aspects of design, with our short timespan, I thought it a better use of our time to build off elements that had already been made, rather than reinvent the wheel.
Expert Interview
Eco-Stylist had recently hired a Personal Stylist, Hillary, who boasted years of experience in fashion. The team jumped at the opportunity to hear Hillary’s experience of styling clients after they had gone through the existing personal styling flow on the site.
Key Insights from Hillary included:
Clients were very concerned about receiving support after purchasing recommended clothing.
The main factor connecting her clients was they were short on time, or need help starting their Eco-Style journey.
User Interviews
One Eco-Stylist client and four new Users.
We had Users move through the existing Eco-Stylist Site, expressing their confidence in selecting a styling service.
Users mentioned liking the sustainability text, but did not cite it as meaningful for choosing a service.
Users had significant issues getting more details about the Styling Process. They clicked a Styling Service, and were thrown off by the expanding select a stylist option. They clicked the browser’s back button, and were sent back to the main styling page. After several cycles of this, Users determined that they were uncomfortable moving forward.
Insights
Directing our Focus
After five interviews, we built our affinity map, parsing out patterns in response and attitudes during the interviews and tests.
This affinity map led us to several key insights.
Users could not decipher the information regarding the services or process, and were missing info on Stylists.
Lack of original media undermined User trust in the results and missed the opportunity to build excitement.
The navigation did not follow Users’ natural inclination to seek out more info for each specific service.
The current focus on sustainability activism on the page did not sway Users’ choices.
Non-ux Concerns
Several testers pointed out that they didn’t like that personal styling would be an additional cost on top of purchasing more expensive clothes in service of sustainability.
They cited that they were seeking styling help because they believed they needed new and different clothes. Budget was a significant factor in their decision to pursue personal styling. We viewed this concern as having several different contributors that better UX could help to clarify and mitigate. We would be remiss if we didn’t acknowledge that the problem with conversion might not result solely from poor UX. It could be a poor market fit, or mismatched service to needs.
Since we’re not in the practice of enacting dark patterns to make people buy things they don’t want or can’t afford, our hypothesis included: Better UX can clarify whether your Users really ARE willing to pay for this service.
User Journey
What’s Their Current Experience?
We laid out the journey that Users took when they visited the styling pages, and presented it to Garik. The major UX problem we identified was that Users got tripped up on the navigation.
When they clicked “Start Here” they were expecting more service information, but are brought to the scheduling page. However, the scheduling page has some opaque descriptors for each service, so they click the service expecting it to lead them to details. Instead, the selection expands to show available times for selection.
The User tries to go back, but there’s no in-site back button, so they use the browser back button, and end up on the styling main page again.
Rinse and repeat and they give up.
This messy navigation is obscuring any other useful hypothesis we could make about Users’ affinities for personal styling at all. We endeavor to solve it.
Ideation
Creating Simple Solutions
From our interviews, we learned that Users were:
Already interested in enacting sustainable fashion choices by the time they reached the Personal Styling Pages.
Short on Time to do the research and purchasing themselves.
Want to be assured that they will look and feel great at the end.
With how the site stands, we hypothesized that increasing conversions was a matter of focusing the content to answer the second two points: saving Users time and making them look like the most amazing version of theirselves.
Rather than a total overhaul, we wanted to clean up and expand the ability of Users to learn more about:
The Service Levels
The Stylist
The Results
The available brands.
This new flow breaks apart the information gathering and the selection and purchase process, in order to more closely align withe commerce standard flow.
Sketching
Visualizing Progress
While the information architecture for this section of the site isn’t over-complicated, we wanted to quickly sketch our ideas to make sure we were on the same page before jumping into wire-framing.
The scheduling page was populated by a third-party app with it’s own design and interactions built in, so once the Users got there, we needed them to be ready to purchase.
Wireframes
Hierarchy before Beauty.
After sketching, each team member took one section to wireframe. I wireframed the Styling Main page, building a more direct progression of relevant information and calls to action. My goal was to present enough information for Users to move forward to their next step - selecting a service, learning more about the stylists, or the scheduling page.
We presented these wireframes to Garik, and moved forward with a high-fidelity mockup for testing. His main concern was Users getting frustrated at having to click through too many screens, which we addressed with CTA on each screen allowing Users control over how much they need to read through before moving on to scheduling.
Prototype & Test
Because of Eco-Stylist’s minimalist design, transitioning from wireframe to high-fidelity was fairly simple. Each of us took the wireframe we build and turned it into a high-fidelity mockup.
We put together a testing script, and sourced five more subjects, taking them through the new pages. The three of us conducted these interviews, recorded them, and put together another affinity map.
Our major finding regarding User aversions led to a deeper insight about trust, and served to direct the recommendations that we gave to Garik.
Personal Style is Vulnerable. Users want confirmation that they’ll be taken care of from initial contact to final fit.
Once the progression had been cleared up, Users were looking for signs that they could trust Eco-Stylist to provide them clothing recommendations that not only worked theoretically, but on their unique body.
The quote that came up in some way:
With this in mind, we realized that Eco-Stylist must:
Highlight the Personal Experience in Personal Styling.
Frame services and Stylist experience from the Users’ Need to know that their unique body and style will be taken care of.
Provide greater evidence of Eco-Stylist’s results.
Iterate
Incorporating Test Results to Improve the Product
With the little time we had left, we wanted to incorporate the testing results that we received. While the layout remained almost identical, we took to editing the copy to better reflect User goals.
Implementation
UX Revelations
With good insights and the confidence that our process revealed and solved some key UX problems, our team ended our time with Garik and Eco-Stylist. He implemented our design recommendations and launched the new pages within a month.
It Doesn’t always work out
On reaching out to Garik in mid-February 2022, I learned that he had determined that Personal Styling wasn’t a worthwhile business endeavor for Eco-Stylist. Ultimately, the services weren’t converting, even with better UX with greater alignment to User Goals & Needs. Users transitioning to a sustainable wardrobe would just rather spend their budget on the clothes, not the styling professional.
What I Learned
It can be discouraging to learn that your solutions didn’t actually solve the problem. But it’s a great reminder that a key function of UX is to ensure that you’re solving actual problems. It’s not a silver bullet for misaligned business activity or poor market fit. UX is meant to work in tandem with the other segments of a business to enable good ideas to become great products.
Question More
As my first interaction working with a business for UX, I was focused on performing UX methodologies with integrity. Garik expressed his concern that Personal Styling might ultimately be a lost cause. In my next endeavors, I expect that leaning into that concern, and performing a better gauge for User Affinities before launching the design process could ultimately save time answering the wrong questions.
While I do believe that the work we did was useful for Garik to learn more about the mindset of his clients and Users; it clarified for me that I have to dig deeper into stakeholder concerns from their use case and context.
Divide labor better
This team was working together for the first time, each of us looking to practice as many of the skills we learned at UNH as possible. This meant that each one of us interviewed, built architecture, ideated, wireframed, and designed. We did a good job referring back to the process, and building our deliverables together. The benefit of having multiple eyes on the test script meant that it evolved much more quickly.
It also meant that the interviews we conducted weren’t consistent. Each of us focused on asking different questions from the script, and that directed the flow of the test.
Check Bias often
One of our team members was coming from a career in graphic design, and it showed in the types of questions she asked, the recommendations she made, and the design choices she made.
While her experience meant her visual execution was competent, she made choices for the visual appeal before the practicality of the flow, or the ease of the experience. She focused on whether Users liked the design of the site, less than whether they could figure out how to get where they wanted to go.
Deciders and Facilitators
Our team opted for a very egalitarian approach to decision-making, opting for discussion and consensus.
We were good at:
Posing questions to be answered through testing, rather than debating at length.
Supporting and refining each others’ work.
Catching what others missed.
We failed to:
Reign in personal biases.
Regulate our approach with Users to ensure consistency.
Present fully unified and focused recommendations to Garik.
This could have been more appropriately done by selecting a decider for the team, or a lead for each stage. My graphic design teammate may have had good visual insights, but she opted to complicate the steps in the process in order to showcase her visual chops. By the time this happened, we built a team rapport of giving feedback on each-others’ screens, but leaving it to the team member to take or leave it.
What I Did Well
Getting to Pain Points
My interviews revealed key interaction pain points with Users. I love observing Users experience and work through issues, and am able to sit with them through the discomfort and allow them to figure it out. I’m good at reserving answers and aid for after a session. I was able to pick up on behavioral cues to dig deeper into an experience.
Build Rapport
I can be quite analytical and blunt, so building rapport with teammates, stakeholders and Users is a skill I’ve worked hard to develop. I enjoyed getting to know Garik throughout the process, and building communication with my teammates in such a short time.
Giving Feedback & Support
My third team member and I worked fairly similarly in terms of presenting elements for the team and incorporating and cleaning them up to build consistency across screens. While I wasn’t ultimately felt that our graphic design member took liberties, I know that I picked my battles and provided better context than if she had worked alone.
Getting Users Excited
My design focus was the main styling page, and I spent TIME on the header, hero and tag lines. Users connected with a photo of a real person and the punchy headline. With the insights from the script, the copy I edited became even more clear and User-centric. I’m so proud of that segment, and the evolution it took in such a short time.
Getting excited myself
I love having ideas. But I love even more when those ideas are accurate and effective. The more I learn about a product or problem area, the more excited I get about it. I want to contribute to the space and improve the offerings, and I think that shows in the way I conduct research, testing and ideation.
It’s natural to develop your own idea of what will work, but I become even more energized when I figure out an option that will be even MORE useful than my initial thought.
Once we learned that Users feel vulnerable during this process, lights flicked on for me. Had we had a longer time with Eco-Stylist, I would be chomping at the bit to continue to dig into the services and products that would best support them.