Elevating Eco-friendly Styling
As the UI/UX Designer on the the Eco-Stylist project, my role was to help to uncover how users were unclear on which services they’d actually receive in their paid styling session. We found out via guerrilla usability testing that the users couldn’t determine if the eco-friendly styling service was something they needed or if it was even worth the price tag.
The Solution: Clear messaging with a new layout
Design a styling page that delivered clear messaging via a new layout. Specifics included: Include a styling process overview, Individual pages for the styling services and the stylists, Use of real client imagery replaces stock photos, Walls of text were replaced by inviting sustainable fashion-related CTA’s.
Research
I worked with a team of two other designers. We began with the stakeholder interview, reviewed Google Analytics, conducted 5 user interviews, and ran a competitive analysis.
The site analytics showed that users spent an average of under 2 minutes on the styling page. Furthermore, almost half the users exited the site after visiting the styling page.
Competitive Analysis
The competition had one thing in common: well-designed pathways that began with meeting the stylist then flowed to explaining the styling process and ended with a call to action to purchase the services.
You can view the Competitive Analysis here
User Interviews
Initially, we wanted to conduct a survey to garner more users for testing further down the line, but due to time constraints, we decided to move right into interviewing users to gain insights on the current styling page flow. We interviewed users who had previously been users on the eco-stylist website. We asked them questions pertaining to their feelings about their own personal style. We finalized interviews by having the user’s review eco-stylist’s current website, while we asked them questions about their experiences.
Affinity Map
After the interviews, we compiled the data into affinity maps. After three rounds of iteration we pulled out these key user insights:
• Lack of clear messaging and information
• Lack of real client imagery and too many stock photos
• Intrigued by company mission, but lacked trust to purchase from the website.
Main Insight:
A lack of clear messaging
User Persona
Based on all of the information we gathered, we created a User Persona to better understand who the styling client is.
Styling Page User Flow
The team and I met to ideate further on the new flow that was necessary for the styling page redesign. This new flow would guide the user on a clear path from an introduction to the Eco-Stylist mission all the way to conversion.
User Flow:
Styling Page
Wireframe and Prototype
With a foundation set for a redesign, we created a low fidelity wireframe before creating the high fidelity prototype of the new screens. We made sure to stay within the Eco-Stylist design system, and we created a new flow that utilized client imagery and clear messaging.
Wireframe & Prototype
Prototype Testing & Improvements
Testing was completed by a combination of new and previous eco-stylist users. They were given the prototype to work through, starting at the home page and ending potentially at the stylist bio pages. The users were pleased with the redesign. They said that the new layout was easier to follow and to understand.
We compiled the insights and test results and made recommendations to the stakeholder. Due to time constraints, only a few minor tweaks were added to the new screens. For example, green certifications and accolades were added to the stylist pages to create user trust.
The Final Screens
