Redesigning della terra’s Website
My Role: UX Designer | Duration: 2 Weeks | Project Status: About to Launch
della terra is Italian for “of the land.” They are a women-led, sustainable, inclusive, hi-fashion shoe brand. It’s up to us to make sure their online shopping experience conveys those same emotions. This can only be done by really getting to know the users. Through UX we were able to give della terra the Website Redesign it needed for launch this Spring!
The Challenge
Users currently don’t associate della terra’s website with their values. They also don’t notice the partnerships della terra has created. della terra has tasked us with establishing a better connection between their users and their beliefs.
The Solution
Design a site that expresses della terra’s values at a glance, while maintaining a quick and fluid shopping process.
The Path We Took to Get There
RESEARCH
Understanding della terra’s Place in Fashion
della terra encourages people from all walks of life to opt for quality over quantity and buy with a purpose. They want to show the world that high fashion is for everybody, and has the potential to give back to the earth.
Core Values
High Fashion
Sustainability
Inclusivity
Through business research, we are able to get a strong idea of exactly where della terra lies in the fashion market. We are also able to see how they compare to their competitors. Doing things like creating a Business Model Canvas, and a Comparative Feature Analysis gives us the jumping-off point we need when going into user interviews.
Getting to Know the Online Clothing Shopper
Once we had an idea of della terra’s values, it’s time to see how users feel. We sat down with 8 users to try and understand how they feel about online shopping, sustainability, and what inclusivity in fashion means to them.
What We Wanted to Learn
People’s overall fashion habits and preferences
How people look at online shopping
General perspectives on sustainability
What role inclusivity plays in fashion
Interviewing users helps us get rid of personal biases, and focuses our redesign on the common feeling of the online clothing shopper. Being empathetic towards the user base makes the difference between designing the right things, and designing things right.
SYNTHESIS
Who is della terra Trying to Reach?
After our interview process concluded, we were able to see common trends and create a persona of della terra’s target audience. Meet Frankie!
What Users Had to Say
Fashion — If they like the brand/and or need an item, they will make it work.
Online Shopping — Appreciate the convenience and variety, but is risky due to the lack of texture and fit clearity.
Sustainability — An aspirational aspect of fashion at the moment, but difficult to prioritize.
Inclusivity — People want to wear what they want to wear without limitations or judegment.
We can see many trends from user interviews. Users care about where they shop, and they make that judgment based on the companies values, price, and clothing limitations. Boling out the common beliefs between online clothing shoppers gives us the ability to design features that counteract common pain points. We can also bring the things they’re looking for to the forefront of the user-facing portals to drive a strong understanding of the company. This will help establish a sense of trust between the user and the company.
Their Journey
Now that we know what our users had to say we are able to visualize the emotional journey they embark on while shopping for hi-fashion shoes, and donating their retired pair.
How They Feel
— Users need a shop that offers competitive pricing while also being a place our users can recycle their old products.
— Users want to know about the brand they shop with and think brands should be more transparent about their values.
— Users don’t really buy based on gender but sizing.
— Users want to know if they are making a difference when buying into a brand.
User Journeys give us a visual understanding of what online clothing shoppers feel when trying to replace an old pair of shoes. We can see that emotionally users currently go through many highs and lows. The purpose of redesigning della terra’s website is to assess the lows and create a journey that only gives a positive experience and outcome to the users.
DEVELOPMENT
What Our Shoppers See Currently
“It feels like just another clothing brand, it’s lacking a soul.”
Now that we know our users, let’s dive into how they feel about the existing site. We want to see how well users could find out more about the brand's sustainability initiatives and tell us who their partners are, how easily users could find more info about the company, and the overall process of purchasing a heel.
How the Users Felt
- It was hard to find information on the brand.
- It was too commercial.
- Fonts and sizing were small.
- The images regarding inclusivity should be people of all types
We usability tested the original site to get not only quantitative data but qualitative data too. By getting this information we can see exactly what the current site is expressing to our user base. We can see that the paths to finding information are confusing and visually the beliefs of della terra are not reaching the users.
How it Preformed
We can see the users are struggling with finding della terras sustainability initiatives and partners. Users are still able to find info on the founder and ultimately always able to purchase a heel, but task length isn’t ideal and overall the values still went completely unnoticed.
Proposing A New Layout to Shoppers
“I can find things quickly with little effort”
We can tell from the feedback on the original site that we needed to create a new layout that gives della terra the room to express its values without sacrificing the ability to quickly purchase a new heel. We created a gray-scale prototype of the new layout to see if the structure is addressing users' ability to find information and navigate the site, without hindering the purchasing process.
How the Users Felt
- It was inconvenient to have to scroll back up to the top when they wanted to navigate to different sections on the page.
- Hoverable dropdown menus made it quick.
- Unsure if “Partners” was in “Who We Are” or “Social Impact”
Through usability testing on the Mid-Fi layout proposal, we can see that we have successfully assessed the navigational issues. We can also see that bringing in sections to immediately display things like Sustainability and Inclusivity didn’t hinder the user's ability to navigate the given tasks.
How it Preformed
We can see from the quantitative data that we increased task success across the board. We can also see large decreases in the time on task with only losing 1 second when it comes to purchasing an item. This is proof that the proposed layout is one to keep moving forward!
What Our Shoppers are Seeing Now
“Right away I can tell this is an organic, eco-friendly, high-end shoe brand.”
We can see from how our users flowed through the new layout that overall it was a success! With some minor tweaks to the name and placement of a page in the navigation, we are ready and confident to bring fonts, colors, and images into this design. Now we can see how well della terra’s values are being expressed to the user through their journey.
How the Users Felt
- Branding felt organic.
- Colors are relaxing and easy on the eyes.
- Extremely easy navigation.
- Shoes seem like they would be comfy.
We can see from usability testing on the final design that we had given users a sense of the company culture. Immediately users were able to express an understanding that della terra was a sustainable and inclusive brand. User’s noted that the color scheme felt “organic” and “chill.”
How it Preformed
Being able to see how users reacted to the final design is key to understanding whether or not it should be implemented. We can see that we successfully expressed the brand values through users commonly expressing that they could tell that the brand was sustainable and inclusive off the bat. Being communicative was one of the biggest challenges in the redesign. User’s can now tell even when directly going to a product that the brand cares about the world and how they impact this situation.
IMPLEMENTATION
The HEART of the Design
Once della terra’s website is live, it will be beneficial to measure the quality of a user’s experience. In order to identify what to measure, we used Google’s HEART framework, which stands for the following categories: Happiness, Engagement, Adoption, Retention, and Task Success. Using this framework will allow us to define della terra’s goals and track progress with signals and metrics.
Where to Go from Here
Recommended Additions
— Users really wanted to know exactly what they did for the world. We recommend showing the users messaging that let them know how they contributed to sustainability.
— Users also felt that the site was full of model images and weren’t clear on what “Real Shoes For Real People” meant. We recommend including diverse images of people from all walks of life.
— Users could complete all the tasks on the original site but had no idea of the companies values. We recommend that the hero image in the home page should be automatic rotating images that showcase how fashionable the products are, the sustainability initiatives, and the inclusivity of della terra.
Next Steps
— Run one more round of usability test on the last version of the website to make sure that the last few points of feedback were applied and help the navigation of the site.
— Continue iterating on the calendar drop section. The iteration is designed for monthly drops, but the bones of the structure are built to adapt to different timelines of new releases.
— Bring the spec doc and design file to developers to make this a full fledged working product!
Reflecting
After getting the opportunity to work with della terra we truly felt like we got a chance to be a part “of the land” and we believe this new design will make users feel that way too. Shoes may not grow on trees, but della terra has proven shoes can plant them!
Want to experience the site first hand? Free to play around with this prototype as much as you’d like!