Then & Now Web Design

UI/UX DESIGN

Then & Now Web Design

UX/UI, RESPONSIVE DESIGN, WEB DESIGN

The website is to provide a platform that will educate individuals on textile waste, shift people’s perspective of fast fashion and to promote shopping circular. This site will meet the end users’ needs through clear navigation and good usability. 

Role

UX/UI Designer

Content Creator

Software

Figma, Photoshop

Process

01. Understand

 

Brainstorm

Content Creation 

 

02. Empathize

 

Target Audience

Persona creation

 

03. Ideate

 

Site Map

Wireframing

Hi-Fi Prototyping

04. Design

 

Final Design

01. Understand

The primary audience is women and men aged 18 to 35 who are environmentalists, fashion forward, and are open minded to change the way they shop. The secondary audience will be public figures who play a role in the Vancouver social scene. They can help promote the event.

The users goals will be met by finding out more about textile waste. Also, it will promote how the user can make a difference through recycling their garments or attending the monthly popups.

02. Emapthize

User Centered Design

When designing websites, I always use a user centered approach and put myself in the users position. For a website to have a low bounce rate, it’s important that the user doesn’t have to click an unneccesary amount of times. It should take less than 3 clicks to go where they want to navigate to. For this design, I used a lot of buttons so the user could quickly navigate to that page if they were intrested in that section.

03. Ideate

The usability of a website is crucial when designing a website. It’s important to set a strong foundation using information architecture to build out the site. For the navigation, there should not be more than 7 +/- 2 in order to reduce the amount of clicks for a user. I added the key pages to the site navigation. Once the site frame was complete, I created lo-fi wireframes.

04. Design

For this website, I intentionally chose a minimal design style because I wanted to highlight the cause, the impact of textile waste on our planet. Using a font pairing of a serif and sans-serif font for the paragraph text, the message is clearly presented. The colour choice are muted colours, to make the images pop and really speak to the audience. Continue scrolling to see the three mockups for Then & Now!

Home Page Mockup

Textile Waste Mockup

Mockup of Textile Waste Page

Our Impact Mockup

Mockup of Our Impact Page

Mobile Site Prototype

Want to bring an idea to life? Let’s make it happen. Reach out here.