Della Terra — How to help a brand communicate its initiatives.
Turning an already stylish brand into a sustainability and inclusivity standard.
The fashion industry has historically been a very saturated space, making it difficult to break through and establish a new brand. However, as peoples’ preferences, priorities, and values shift through time, it allows for new brands to identify and address what is missing in the market.
In today’s climate, customers continue to pursue their personal styles and fashion trends, but now we know that sustainability and inclusivity are playing a much larger role than ever before.
This is where Della Terra comes into play. Della Terra is a women-led sustainable shoe brand, that focuses on ethical and inclusive products while maintaining a high standard for fashion and style.
Driven by a need to fill the gap in the industry mentioned at the beginning, by a leader with many years of experience designing shoes, Della Terra aims to revolutionize the current sustainability and inclusivity standard in fashion. The brand encourages people to opt for quality over quantity and buy with a purpose, rather than contributing to the wastefulness of fast fashion.
So, what does Della Terra need help with?
With the above being said, the brand has the smarts and products to deliver, so now it’s a matter of redesigning their current website that is not doing a great job at communicating these amazing sustainability goals, initiatives, and value propositions.
People were NOT getting a sense that this is a fashionable shoe brand with core values of sustainability and inclusivity, the common terms associated with the website were “generic”, “commercial”, and that it “lacked a soul”
Below is the original landing page that we needed to work off of.
Needless to say, as UX designers, we immediately saw a million opportunities to help the website right away.
However, we needed to hold our horses and get a thorough understanding of what Emily, CEO and Founder of Della Terra, wanted us to focus on, what were her biggest pain points, and what we were about to work on for the next ~3 weeks.
What are we getting ourselves into?
We jumped on a call with Emily to discuss scope, timelines, and deliverables.
Side note — I hope everyone gets a chance to work with someone like Emily, having a client that is open to suggestions but with a clear idea and end goal in mind helps the overall project have a solid path. So we were off to a great start!
After discussing her priorities and must haves, we agreed to focus on the following:
- Full Website Redesign.
- Deliver research and statistics regarding the markets POV on sustainability and inclusivity in fashion.
- Help communicate a sense of clean, organic, fresh, and chic at a glance on the website.
- Highlight their sustainability partners.
- Time permitting: Incorporate a shoe calendar drop view SOMEWHERE on the website, backed by user research.
Phew, is anyone else thinking “how on earth will we do this?”
Well, I will be walking you through how not only did we do it all just in time for their launch in Spring 2021, but the amazing results and data points we gathered that makes us EXCITED for the launch.
Now what? Where do we even begin?
Well, where do you begin when you don’t know anything? With what you DO know!
We began by putting down on paper our initial understanding of the problem space and industry.
Our Hypothesis was pretty straight forward -
Users don’t want to sacrifice style over sustainability when it comes to their fashion choices. Additionally, with a gender-fluid audience, brands need to keep up with inclusivity and a broad range of offerings to accommodate all lifestyles.
This plus our overall assumptions of the pain points led us to our initial problem statement:
How might we provide users with a reliable e-commerce website that reflects sustainability and inclusivity, while offering high fashion products?
With this problem statement, we were able to dive into Della Terra’s competitive standing. We leveraged:
- Business Model Canvas: Through which we learned that a new brand like Della Terra heavily leverages their customer base and partners to make their name known early on.
- Competitive Matrix: Where we distributed the X-axis as “Affordable vs. High-End” and the Y-axis as “Sustainable vs. Fast Fashion”, which placed Della Terra in the Sustainable and High End quadrant.
- Competitive Feature Analysis: This helped us notice that a few of the main features Della Terra could benefit from are a chatbot, rewards program, and potential physical stores in the future.
Okay, we understand Della Terra’s competitors and the industry, can we go back to the website redesign now?
Not yet! We need to know how the current Della Terra website is performing, its pitfalls, its high points, etc.
The first step is always the hardest, and undertaking this research is no exception. Before we let the wrath of users test the website, we conducted a Heuristic Evaluation following the ABBY method to understand what we were working with, clearly laying out the existing website’s navigation performance, accessibility, cohesiveness, etc.
We examined the site as if we were a user, and wrote down observations relating to each heuristic followed by recommendations to improve.
To highlight the main points of the Heuristic evaluation, we learned that:
- The fact that only 2 out of the 10 levels meets best practices is a very serious issue.
- Categories such as Findable, Accessible and Delightful all do not meet best practices.
- For an e-commerce brand and website, not meeting best practices for Credibility is a big problem since it relates to people needing to feel comfortable inputting their payment information.
After setting the baseline of where we were starting, we ran User Interviews to see if we could validate our initial understanding of the problem, all through quantitative and qualitative data of using the original website.
Through the user interviews we wanted to learn about 3 different topics:
- Online Shopping Habits
- Sustainability Preferences
- Opinions on Inclusivity
We interviewed 7 people over zoom, which lead us to identifying the following trends:
- Users don’t like being limited by gender on clothing. They want to buy whatever they want to buy.
- Users need to be spoon fed a company’s sustainability mission to notice it and get on board.
- A few of the biggest pain points right now are related to not being able to touch or try on an item online, and being bombarded with emails about brands’ new releases.
- If a user needs to contact a brand or return an item, how convenient this is is often a huge differentiator amongst people.
Through the feedback and data we gathered so far, we were able to build our Persona. We created Frankie, and the emotional journey she goes through when looking for brands that resonate with her.
Our main takeaway was that we would need to find a way to build and maintain a loyal customer base, continually referencing a resounding quote from a user interview who said -
“If I support the cause, I’ll buy anything.”
We kept Frankie at the forefront of our development, but before we move any forward, we want to ask ourselves — were we right? Was our initial understanding of the problem correct?
And in this case, yes! Well, almost. By redefining it a bit, we are now focusing on -
How Might We help Frankie feel confident that she’s purchasing a quality product that fits her body and style from a company that shares her commitment to sustainability?
So we have our understanding of the current website’s issues along with our interviews and persona, now what?
It’s time to see what people think of the current website! And we did this by asking our 5 interviewees to complete the following tasks:
- Find the brands sustainability partners
- Find information on the brands founder
- Select a heel in a color and size and add to the bag
The results were… expected. On average, it took users 42 seconds to finish the tasks, with an 80% success rate. These aren’t awful numbers, however, with how tight the competition is in the fashion industry, these need (and will) be better.
But you’re probably wondering, enough with numbers, what did people say about how it looks? Most said it seemed extremely commercial, lacked a bit of soul, and looked like just another women's shoe brand.
Now with this info, we know what needs to be tackled.
But, HOW did we land on our designs, information architecture, and navigation structure?
We started by conducting a round of Open Card Sorting to understand people’s mental model of how della terra’s existing website offerings are naturally organized. And with these results, we then ran a Tree Study to make sure our second iteration of the navigation structure improved users’ experience.
Below are the before and after of the navigation -
The Tree Study results all proved that the same tasks that were asked to be completed on the original navigation drastically improved in both time and success rate on the proposed navigation.
Now that we have the bones of the navigation, is it time to begin designing?
Almost! We’re so close! The last thing we want to do is leverage a MoSCoW map to fully lay out what features are necessary for the first release and which ones can wait. And a Feature Prioritization Matrix to realistically estimate how much effort said features will require to build and how essential they are for the experience.
This brought us to prioritize things such as:
- Search Filters
- Account Creation
- Sizing Chart
- Partner pages
We’re now officially moving into design!!
We conducted a Design Studio as a team to begin building our Mid Fidelity (gray scale, little to no copy, and no images) prototype so we can test our initial structure.
We conducted our second round of User Tests on 5 new users with our Mid Fidelity prototype, with the same 3 tasks as the first ones. And the results were looking up:
- It now took users an average of 23 seconds to complete the tasks, that’s a ~50% improvement.
- Success rate went up to 87%, compared to 80% from the first round of testing.
Users did run into a few issues such as confusing the location of partner information in the “about the company” area, along with sizing of fonts and images being hard to read or navigate through.
With this in mind, we developed our High Fidelity (full color, images, copy, and functionality) prototype applying the feedback we received.
So now… introducing… the new… and improved… della terra website -
We structured the website to communicate a sense of organic, clean, and stylish products for all bodies, genders, and walks of life.
What if we need to reprioritize what features and deliverables we’ll give the client?
This was a real thing we had to tackle! Based on our timelines and user research so far, we were able to re evaluate our scope and deliver the calendar drop option that was discussed with the client early on. It pays to be organized and ahead of schedule, kids!
So, before running our final round of testing on the latest version of the prototype, we added one new task:
- Find out when the brand is releasing new styles.
And this is a preview of what it would look like for users to find this feature -
Once we built the calendar drop view and functionality, and we incorporated the 4th task to test the flow, we conducted our final round of user testing in our High Fidelity prototype, using the 3 original tasks plus the 4th one we mentioned. And the results continued to improve!
- The average time on task went from 23 seconds to 16 seconds, that’s a 70% improvement.
- Overall success rate went up to 93% from 87%
Lastly, even though we did not run Mid Fidelity testing on the calendar drop capability since it was a later addition, the individual results were amazing to see.
We had 100% success rate on people finding and understanding the feature and navigation, and the average completion time was 12 seconds for users who had never seen the website before, these results made it clear that the tool and layout was a success.
Awesome! but, ultimately, what does it all mean?
This means that through many iterations of the prototype, and usability testing, both quantitative and qualitative data proved that we were able to deliver on the mission of making the new Della Terra website better communicate their fashion, sustainability, and inclusivity initiatives.
So what do we have to do for this to be live in the world, for people to use?
That’s a great question, we broke it down by what we delivered to the client and what we recommend should happen immediately after we hand off our research.
We delivered the Della Terra team the following items:
- Full Research Report: A very detailed and thorough document with all our methodologies, research, design process, and justifications.
- Spec Document: Includes detailed information on how the navigation was built, annotated wireframes, and the style guide we built to keep the website cohesive.
- Design File: A file for the developers to get exact measurements and information on button design, spacing between assets, hex codes, and fonts to begin development.
- Presentation: We walked Emily and her team through our findings and designs to be able to articulate our motivations and reasoning, and opened it up for any questions and feedback.
And, as with any brand’s product and design development, research is never truly done, therefore, we recommend the following next steps for implementation and continued growth:
- Run one more round of usability testing on the final iteration of the website to ensure that the final changes and updates are well received.
- Leverage further interactivity on the website’s butter bar and main hero image on the home page.
- Expand on the images used to really emphasize on the inclusivity aspect of the brand. (e.g: show diversity through including all body shapes and sizes, people of color, different genders/LGBTQ+, etc.)
Through this journey, we really learned that people are more straightforward than we thought when it comes to fashion, they simply want stylish products that fit and won’t hurt the environment.
Our job as UX designers is to help communicate and connect the brands that are doing this right with the audience that is craving this attention.
