Eco Fashion World Home Page
WHAT IT IS

A branding strategy and web design for a fashion nonprofit

MAIN GOAL

Design an interface for their dynamic content

AUDIENCE

People/businesses interested in fashion and sustainable practices

WHY I MADE IT

As a lover of fashion and sustainability, I wanted to make the relevant information on this website accessible to their audience.

MY ROLE

UX and Visual Designer

STEPS I TOOK

Personas, Sketching, Site Map, User Testing, Wireframes, & Prototypes

Eco Fashion World Blog Post Eco Fashion World Home Page
Eco Fashion World
Eco Fashion World
Eco Fashion World Blog Post Eco Fashion World Home Page
Eco Fashion World Responsive
HOW I DID IT

Cleaning up the clutter

ECF's website was very visually cluttered. They had no hierarchy and it caused confusion with the user. With the new look, I used negative space and type to guide the user through the content .

Eco Fashion World Comparison

Making personas to help me organize the content

By establishing three personas, I could focus on designing for both consumer side and the business side. I gave each persona a set of goals to help me prioritize the content that should be high level.

BFA Empathy Map
BFA Empathy Map

Sketches, sketches and more sketches

Before jumping on the computer, I did a lot of sketches to explore how the content would be displayed on the screen. This gave the opportunity to explore how the responsive layout would work.

Customer Journey Map
Customer Journey Map
DISCOVERY FROM SKETCHES

The news section needs to be placed at the top because it is the most updated content.

Establishing a new look with a focus on typography

I chose a mix of neutral and bright colors to represent the good-nature ethos of the Eco Fashion World brand. A mix of san serif and serif gives the brand elegance and reliability, while also making it stand out from their competitors.

Other apps that helped
Other apps that helped

Designing for a CMS

Because I designed this with a CMS in mind, I created modules of content. I created five different modules where ECF's content would live in.

Style Tile
Style Tile
DISCOVERY FROM SKETCHES

I used scale and rules to differentiate the different sections.

OLD VERSION

Previously, I had worked on another mockup for ECF. But after some time, I felt the need to fix some of the layout and type issues of this mockup.

Fixing the errors I previously made

I went back and looked at the old style tiles I had created and looked for areas of improvement.

Other apps that helped
Other apps that helped

Establishing what needed to be fixed

I went back to my previous mockup and found the issues I needed to fix.

Books for Africa Home Page Physico To Do List
THINGS I LEARNED
  • With this project, I learned the importance of iteration within design. By iterating, I achieved a better solution than the one I previously had.
  • Personas are a crucial step in my design process because they help me establish a relationship between content.
  • Choosing beautiful typography while keeping a low budget in mind.