Treste Moda, Web Redesign

Nicole Zepnick
4 min readMay 24, 2021

--

Ironhack, Case Study

Treste Moda is a boutique clothing store in Madrid that specializes in plus-size fashion. It’s objective is to dress real women and open the world of fashion to all body types from urban fashion to elegant wear. Their slogan, “Tenemos Tu Talla” (“We Have Your Size”), is their promise to give accessibility to all women and make them feel comfortable and confident with their curves and their style. All garments are designed and made in Spain.

Treste Moda

Objectives
Our team, Ana Villar Eiroa, Noelia Casado, RuthG Galvin, and I, were drawn to the ideals of the brand and its desire to make fashion more accessible. Our goal was to improve the structure and design of the website and make Treste Moda’s values more visible to their target market, curvy women. We had two weeks to complete a complete site redesign.

Our data also showed that 65% of people have trouble getting the correct size when buying clothes online. This also proved a major pain point in Treste’s web, as sizes were unclear and many products did not offer a Size Guide to help users throughout the process. These two pain points for consumers represented big opportunities for Treste to grow its online presence and create confidence in its brand.

User Persona / User Scenario
With all our data and information compiled and collected, we were able to embody our User Persona, Adriana Cardona, “Curvy Fashion Victim”. This allowed us to empathize even more with our users, and be more precise with their wants and needs.

Our User Persona also allowed us to validate our previous ideas and “put ourselves in the customer’s shoes” to create the User Journey and Scenario. We took Adriana Cardona through the process of shopping online using Treste Moda’s webpage. We recognized her pain points and opportunities for improvement in order to complete the User Scenario, which corrected the user experience by improving the filter system and correcting its errors and creating a Style Guide and a system that allows the user to Find Their Size based on the user’s answers to some simple questions.

Solutions
Finally immersed in the problems and understanding the users, it was time to take all of our research and data and turn it into solutions. We started our brainstorming process with an Affinity Diagram to organize our ideas and start coming up with solutions. After, with our How Might We questions we focused on solutions to these questions in an additional brainstorming session.

Our next step was to begin our restructuring of site content. Here we focused on information architecture and in order to regroup categories that resulted in confusion with our users, we implemented a Card Sorting test. With our test results, we were able to reorganize categories in a more intuitive way.

Next, we completed the Site Map and User Flow to take Adriana through the experience of shopping online with Treste Moda with the new changes carried out.

Wireframing
Now it was time to redesign the website. We started with a Crazy 8 and Low-Fidelity and moved on the Mid-Fidelity. Here, we highlighted important changes like our updated categorization, new filter method, product card, style guide, and find my size.

UI
Now with our frames and information architecture mapped out and organized, it was time for the design. We started with a Moodboard for our brand, trying to evoke feelings of self-confidence, happiness, and custom-built, all confirmed with a Usability Test by users.

From there we moved on to color. We wanted a color palette that demonstrated the values of the brand, to be made for women of all shapes and sizes. We aimed for an elegant color selection of a white, black, and bordeaux. We chose our typography and icons to match. Below you can see our Style Tile.

After completing our Style Guide, Atomic Design, and choosing alignment and spacing, we were ready to put everything together for the final version; the high fidelity. You can find the results here.

--

--

No responses yet