Sustainable fashion goes responsive

Ever since I was a little girl, I thought I was going to be a fashion designer. Things have changed quite a bit since then. I fell in love with graphic design and am now pursuing a degree in this field. Never the less, fashion still has a special place in my heart. Recently, I watch the documentary called “The True Cost” and it revolutionized they way I saw the fashion Industry. It exposed some impacting facts about the industry like “The fast fashion industry is the world’s second biggest world pollute”.

I took it upon myself to research more about this subject to try to find a way I could help. When the opportunity came in one of my classes at my university, I chose to revisit this subject and work on a project that dealt with sustainable fashion brands.

I came across as part of my research on sustainable brands. Eco Fashion World is an online educational platform that educates their users on sustainable fashion. Their main objective is to educate the consumer while giving them alternate options to the mainstream fashion brands. I found the content of their site unique and valuable to this subject.

Even though the content was valuable their site faced some challenges that complicated the user’s experience on their website.

Good content, not well organized
At first glance, you will notice an abundance of elements and content on the home page. From icons, ads, to blog posts, the user is bombarded with content. Don’t get me wrong I love the content, it is just not prioritized and organized in the most efficient way.

Lack of hierarchy
With the abundance of content, come a lack of content hierarchy. Content is thrown on the pages without consideration of size, color, spacing or layout.

Content Singularity
Once I started navigating through their site, I noticed some pages had a lot of content singularity. The content serves gives the users what they asked for butt doesn’t consider related/suggested content or links.

Responsive Web Design
Their website is non-responsive, which make is difficult for the user to use while on another device that is the laptop or desktop. Whenever I was out and about shopping, I wanted to see their brand guide for reference, but couldn’t access it easily on their non-responsive website.

These challenges motivated me to work on a realignment and restructure of Eco Fashion World website.

Putting the user’s need first
The first step I took was to create personas, to familiarize myself with the user’s needs. I established user’s goals to give myself prompts of user actions that needed to occur during the site’s user experience. In addition, I wrote down the user’s story to help clarify how their goals are going to be accomplished. Here’s an example of two personas I made.

Making content simple and understandable
Through using post-its, I started dissecting all the content, prioritizing, and eliminating unnecessary content. This process took me the longest because I had to keep going back-and-forth to make sure all of my users’ needs were met.

Personalized content for a better experience
After researching competitors and comprehending their content, I came to the conclusion that Eco fashion World should offer the user the ability to create an account. This account will give the user the opportunity to be more proactive with the content. the ability to save brands, deals, and receive personalized content are some of the actions you could do with your account on their site.

Good old paper for the win
After understanding the users and content, I went to the good old paper to sketch out possible layout ideas. After long hours of sketching, I kept going back to the original site to make sure I was fixing the challenges that I had identified in my personas.

Exploration of layout for different devices.

For my sketches, I created different ‘sections’ of content to prioritize the content across all the breakpoints. I created a key with colors for all these sections so that I can easily explore arranging the content.

Rough sketch of content placement.

A fresh new look
Since the content was getting a makeover, the branding also needed a new look. With the old logo, the letters were easily misunderstood for ‘ehv’ instead of EFW. The new identity gives the organization a fresh new modern look, while still simple and straightforward.

By using Acumin Pro Wide Bold on ‘eco’, it creates emphasis in the sustainable part of the company which is their main focus. For the rest of the identity. I used Museo Sans Rounded to create an inviting but yet sophisticated look to the brand.

In addition to the identity, the aesthetics changed completely. A new color scheme with bright colors appear. The coral accent color is used for ghost buttons and selected state. The orange is used for contextual links and important ‘call to action’ buttons. Black and white also play an important role in the color palette, by maintaining the modern feel of the site in combination with the coral and orange.

Here’s a snippet of how the home page would look.

I hope you have enjoyed reading my little adventure with Eco Fashion World. Would love to hear some feedback and suggestions.