Eco-Stylist

 Overview

Eco-Stylist, an online sustainable fashion source, wanted to improve user traffic to their site. While our team encountered many opportunities for improvement, including information hierarchy and user flow, we discovered the recurring challenge that users faced was an inability to understand the brands’s mission and purpose. As a result, we repositioned Eco-Stylist from an e-commerce site to an educational resource site by redesigning their homepage so that users could easily and immediately understand what Eco-Stylist offered and why it mattered to them.

 Context and Scope

For this 6-week project, I worked closely with 2 other UX/UI designers to help the client solve their business challenge.

Our team met weekly with the client to discuss goals, strategy, and progress. Our tasks consisted of researching, wireframing, testing, prototyping and iterating on a high fidelity mockup. Final deliverables included an updated style guide, user insights, and redesigned homepage.

While our client’s main concern was to increase user traffic and engagement, we found multiple ways to improve the site and address this issue. However, to fit within our 6-week time constraint, we focused on the most impactful solution of redesigning the homepage to position Eco-Stylist as a resource site. The homepage was not only the face of the business but also served as the gateway to other pages; by revamping this, our strategy was to help seamlessly lead users to other areas of the site, therefore maximizing engagement.

 Analyzing Eco-Stylist

Our team independently assessed Eco-Stylist’s homepage to gain an understanding of how their site worked, what they offered, as well as what our own initial thoughts were upon landing. We unanimously agreed that Eco-Stylist had 3 main offerings on their homepage competing for attention:

• the Brand Directory, a list of fashion brands and Eco-Stylists’s rating of whether they were or were not sustainable.

• the Shop, an e-commerce component of the site that allowed users to shop for eco-friendly clothing.

• Personal Styling, a white glove service whereby Eco-Stylist provided customized wardrobe assistance.

Eco-Stylist’s lack of a clear focus leads to confusion for users, who don’t know instantly what this site is and what it offers. Why are users even on Eco-Stylist to begin with?

After discussing our initial findings with the client, it was decided to reposition Eco-Stylist as an educational resource first and foremost, with the site’s shopping experience as a supplemental value. Styling would be a bonus service. This information served as the primary catalyst for how we changed the layout and components of the homepage to better engage users.

 The Problem

How do we redesign Eco-Stylist’s homepage to better position the brand as an educational resource for sustainable fashion enthusiasts?

Analyzing Eco-Stylist’s main competitors

As a first step in the redesign of the homepage, our team conducted a competitive analysis on Eco-Stylist’s main competitors, Good on You and Done Good, to evaluate the strengths and weaknesses of each. (see image to left for a portion of the Good on You analysis).

We found that Good on You presented instantly as a resource. Upon landing on their homepage, there is a clear featured headline that allows the user to instantly understand it is an educational site. Good on You’s “Search Ratings” in the upper-right navigation, as well as a clear hierarchy listed in their hamburger menu, also reiterates that their site is for users to find knowledge and information about fashion brands and how they rate.

Our group quickly shifted into Sketching and Low Fidelity Wireframes

We brainstormed ideas and developed an improved layout for the homepage. From interview insights, our core objective was to make sure the user understood Eco-Stylist was their go-to guide, instead of a go-to shop.

After narrowing down our approach from a variety of sketches, we created one low fidelity wireframe to test out the new homepage layout. (see right for low fidelity wireframe).

We decided to display a large hero image in place of the revolving carousel that Eco-Stylist currently had. To convey the website’s offering, we placed one large, bold statement with supporting explanation alongside the image.

Additionally, we elevated the placement of the blog to be directly below the hero module. Because a blog’s inherent goal is to inform, this was done to make the connection with users that Eco-Stylist is a resource.

Eco-Stylist was still presenting as e-commerce

Low Fidelity Wireframe Testing Results

Key Findings:

• The homepage was still presenting as e-commerce.

• The main statement did not explain to users what Eco-Stylist is.

• The added icons were immediately interpreted as shopping.

• Users were still confused. They understood the brand directory was important based on its position in the upper navigation and on the hero image, but did not understand immediately what a brand directory was.

• Users automatically default to what they are familiar with, which in this case is e-commerce.

• Users had an A-HA! moment after reading the disclosure at the bottom, which states “We only promote brands that pass our sustainable brand criteria”. This section was key in helping users understand what Eco-Stylist was.

  Should we add “How It Works?”

Due to overwhelming response on how the disclosure at the bottom clarified the site to users, we decided to add an edited, more clear “How It Works” section on our high fidelity prototype near the top of the homepage. We had hoped we would not need a step by step to inform users, however our wireframe testing clearly showed users needed more direction.

 High Fidelity Prototype

Round 1

Our team built multiple versions of the high fidelity mockup homepage, using insights from our low fidelity testing, to better provide users with clarity. After discussing with the client, we decided to conduct A/B testing of the below mockups. *Note the differences in the hero images and the messaging. We added the “How it Works” section in Mockup A while we kept it more minimal in Mockup B.

Key Takeaways:

• Both iterations successfully presented Eco-Stylist as a resource for education, first, and fashion, second.

• Users thought Mockup A (pictured below left) was too busy and the statements created more confusion. However, they found the “How It Works” section was very helpful.

• Users preferred Mockup B (pictured below right) and were drawn to the clarity of the hero image.

• The “sustainable fashion topics” section, a curated list of blog categories, felt redundant next to the “what’s new” section. **Our client felt strongly about keeping this section despite user testing showing that it was not a driver of clarity or engagement to them.

Round 2

Our team iterated and tested a second round of high fidelity mockups. During this round, we added the “How It Works” section from Round 1’s Mockup A to the layout users preferred of Mockup B. Because the client was adamant about keeping the “sustainable fashion topics” section, we updated from an image-based module to a text-based list for simplicity and to ease repetitiveness with “what’s new”.

At this time, our team had a discussion on adding a Best Sellers section to help boost sales for our client’s e-commerce business. While we had apprehensions about adding this section due to the goal of pivoting Eco-Stylist from e-commerce to resource, we wanted to validate this approach. *Note the addition of the Best Sellers section in Mockup B (pictured on the right).

Key Takeaways:

• The site is narrowly presenting as a resource. Users believed the fashionable hero image eluded to shopping, however the strong text of “go-to guide” and the “How It Works” section helped reinforce the resource positioning.

• The addition of the “Best Sellers” section did indeed change the perception of Eco-Stylist from a resource back to e-commerce.

• “Best Sellers” was well perceived if the user had the intent of shopping. There were some users who called out they would not use this site for research but would come to buy something.

• The “sustainable fashion topics” could be further improved because users were still not gravitating towards this section. We recommended to the client that this segment should not be included in the homepage redesign, however if the client decided to keep it, we recommend tracking through Google Analytics to measure engagement.

 Conclusion

This project exemplified the challenges that come with repositioning a brand. Imagery, copy, structure, and layout are all incredibly important in ensuring that users know what a brand’s website offers, and more importantly, how it serves them. I believe we developed a redesigned homepage that successfully conveys Eco-Stylist’s value propositions in a clear, meaningful way, which will ultimately lead to higher engagement for the brand.

Our team had a great relationship working with Eco-Stylist and hopes to be in the loop as they implement and test their website changes in the coming months. I sincerely believe their metrics will have improved and that user engagement will soar.

Click here for final deliverable Prototype A and click here for final deliverable Prototype B.