DL1961 Sustainability Portal

UX/UI Design for DL1961, 2020

DL1961 wanted to create a new and improved sustainability portal to highlight the innovative, environmentally friendly manufacturing process that makes their denim so unique.

As the UX designer on this project, I was responsible for developing the interface, using their brand guidelines and beautiful photos to inform the designs for both the responsive web and mobile views.

Role: UX Designer
Tools: Figma, Invision

Platform: Desktop, Mobile

 

The live site is accessible here on both desktop and mobile.

2_edited.jpg

goal

Highlight DL1961's mission and sustainability process in a way that is both informative and engaging in order to increase and maintain a loyal customer base in a competitive market for sustainable fashion.

competitor research

As consumers make an effort to move away from fast fashion, sustainability continues to be important to increasing and maintaining a loyal customer base.

Reformation and Boyish are two competitors whose sustainability pages I reviewed to refine our direction. For this audit, I used Miro to make a board to compare and contrast their design choices with DL1961's existing sustainability portal.

SS21_RACHEL31_MILK RAW_12880 � VIKA_TERAMO_8320_edited.jpg
SS21_FREJA_ECRU_8306_03_edited.jpg

audit findings

Reformation

Reformation's page is very clean but it feels endless without any segmentation outside of the use of textless images. The space on the page could be used more effectively but the image choices are nice.

Boyish

Overall, space and graphic elements are well utilized but execution could be improved to communicate their message more effectively.

FW20_PATTI_MARCEAUX_12669 � VIKA_KOLDING_8299_edited.jpg

conclusions

  • New page should prioritize the user experience without compromising on aesthetics.
     

  • Best to use the space effectively and place text and images next to each other if possible. Competitors' pages have images taking up too much space, forcing users to scroll a lot for information.
     

  • Consider adding floating navigation so people can navigate to specific sections instead of scrolling- neither competitor utilizes this.
     

  • Use videos/gifs to make the page more engaging- neither competitor utilizes this.
     

  • Current page is concise but can be improved by adding a summary in addition to the title.

features

Two of the most exciting new features we added were flashcards that flip on mouseover to reveal details about specific  sustainability efforts and the inclusion of a map that I drew to visualize contributions to local organizations.

final designs

I worked with the creative director to iterate on wireframes and eventually high fidelity mockups on Figma. The mobile version was designed to display the same information in a more compact way.

 

The site is live here.