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.
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.
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.
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.
