Combining sustainable fashion and education.

Project: Trashion is an annual fashion show bringing sustainable brands and practices to local communities. In anticipation for their second season, I worked with them to conceptualize a new website that would both educate and excite their growing audience.

Creating a Distinctive Brand

Project: Trashion is inspired by high fashion runway shows – stylish and effortlessly modern. The existing logo draws from the thick to thin, high contrast typefaces of editorial fashion magazines. To keep in touch with these roots, I chose a monochromatic colour scheme and classic Serif font. I then designed organic accents reminiscent of this year's theme on ocean plastics, in order to highlight the environmental sustainability aspect of the organization.

#202020

#EFC574

#FFFFFF

COLOURS

FONTS

Linotype Didot

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

LOGO (WHITE)

Avenir

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

PROJECT: TRASHION

BRANDING GUIDELINE

Challenges Ahead

The next step was to break down the user experience using a site map and user journey map. While a simple event page sufficed in their inaugural season, this year the site would be used by both sponsors and event-goers. That meant more pages, and more opportunities for confusion. My solution to this was to simplify as many pages as possible, so the maximum amount of items in the navigation bar would be 3-4 links. I went through several iterations of wireframes, experimenting with the homepage in particular. 

Putting It All Together

My final job as a designer was to create high-fidelity mockups of a sample page. With the new branding guideline in mind, I chose to design the homepage in order to set the mood for the remainder of the project. After testing the user interface in sprints with the Artistic Director, we had a much better understanding of the user flow and information hierarchy. We found that one of the strengths of the organization was their striking photographs and videos. This meant that we could leverage strong imagery and original copy-write to create an engaging web experience. What we ended up with was something classic and modern, but recognizably Project: Trashion.

Takeaways

Though I was the only active designer on this project, I was able to complete a fresh rebrand and show the executive team a compelling concept for the fashion show's new website. In the future, I would love to develop a prototype to demonstrate potential transitions and animations, as well as incorporate video players into the site. I believe Project: Trashion has an exciting opportunity to craft a unique digital experience for its audience.

Tools

Category

Figma (Wireframes)

Adobe XD

Adobe Illustrator

UX/UI Design

Website Design

Branding

© JESSIE HUANG 2020