Design Project 1 | Prototype Work In Progress

Link to Student
Journal Entry For
Project 1 - Prototyping Plan

Share your work-in-progress using any media that works well for you:

https://www.figma.com/file/Tp2iNJZezhH2s0hH1uUPY9/SUST-DESIGN-PROTOTYPE?type=design&node-id=0%3A1&mode=design&t=7IOnhAWS22Fgqfkv-1

  • Worked with Figma using interactions and a chrome extension prototype
  • Brands used: H&M, Reformation and Pact
image

Figure 1: Interactions in Figma

image

Figure 2: ‘Landing Page’

Here, the ‘b.’ tab will pop out for the user to click.

image

Figure 3: ‘H&M1’ - Brand sustainability review ‘landing page’

User can click ‘show me sustainable alternatives’. Home button will redirect them to H&M1. Exit button will close the tab.

image

Figure 4: ‘H&M2’ - Sustainable alternatives

User can choose between ‘Most sustainable’ and ‘Most cost-friendly’

If ‘Most sustainable’ chosen

Directed to Reformation’s pages.

  1. Website’s page showing the top alternative, cost, sizing and colour options
    1. User can be directed to sustainability rating, material details and most cost-friendly alternative
  2. Brand sustainability rating
  3. Product material class
image

If ‘Most cost-friendly’ chosen

Directed to Pact’s pages.

  1. Website’s page showing the top alternative, cost, sizing and colour options
    1. User can be directed to sustainability rating, material details and most cost-friendly alternative
  2. Brand sustainability rating
  3. Product material class
image