Pearl: A Sustainable Retail Website

• 

  A look at The Prototype Design

• 

  The Seller's Page

• 

  Our Home Page

• 

  The Accessible Version of the Clothing Information Page

• 

  The Clothing Shopping Page

Inspiration

We were inspired by websites and campaigns focusing on fashion sustainability and wanted to create a website that can deliver the user all the information about a brand’s carbon footprint while shopping. Nowadays many customers want to be mindful of what they purchase online, especially in our era of fast fashion and a global crisis. Through Pearl, this information is now clear and concise which helps improve the user experience.

Pearl is also a storefront for small retailers, as shopping at small businesses is a great alternative to shopping at large fast fashion companies. Lately, small business owners have left retail stores like Etsy due to mismanagement of their businesses. By letting drop-shippers steal their products and profiting off sellers, many business owners opted to leave Etsy but still desire a website that they can utilize to sell their products. We wanted to create a solution for these small businesses and create a fair and sustainable shopping site for everyone.

What it does

Our website allows users to buy products in a climate-conscious way and small businesses to sell their products. Our website shares details pertaining to how sustainable a product’s source is. This website shows the company’s statement and sustainability score of each product’s source. This data was collected from Fashion Revolution, an organization that prioritizes sustainability in fashion. There is also an accessibility page that makes the website easier to read by a change in contrast in the colors, specificity of buttons, and making links easier to see.

How we built it

Our website is built through the UI interface tool, Figma. Through Figma, our group was able to work on separate pages and linked them together through the prototype tool. We also included research and statistics from fashion sustainability organizations such as the Fashion Transparency Index. Certain pages of our website were also designed to have a more accessible interface so that all customers can enjoy the website. We did research into how to make our website more accessible and used tools such as a color contrast checker and font spacing guides so that our design was WCAG compliant. Additionally, the muted color scheme and simple design allow for users to navigate effortlessly through pages of our website.

Challenges we ran into

One major challenge we ran into was getting each page to flow seamlessly from one to another and each individual page to run smoothly itself. We ran into difficulty with creating the carousels and hovering actions due to the many layers we made in Figma. An important concern we had was making an easy to follow website, as many retail websites are overwhelming with distracting pop-ups and bright colors. We

Accomplishments that we're proud of

One design accomplishment that our group is proud of is the carousel galleries we designed on the home page and sell page of our project, since it was particularly difficult to make it so that each image and review rotated properly.

What we learned

We learned about the basic functions and utilizations of Figma . Specifically, we learned more advanced skills in Figma, such as animations, carousel galleries, scroll bars, and other such functionalities. We also learned the basics of accessible web design and the importance of including design principles that make our website easy to enjoy and navigate for all audiences.

What's next for Pearl: A Sustainable Retail Website

The next logical step for Pearl is to integrate full-stack development so that Pearl can be a fully developed website. Additionally, Figma doesn’t allow for fully integrated keyboard controls to navigate the entire website which is an important accessibility feature, so in the future, it will be a goal to implement this important feature. We also plan to add more pages such as a fully designed seller interface and a My Account page so that the seller can add their products to Pearl, and customers can have a Pearl account and view their purchases.

Built With

• figma