Case Study for Web Design

CASE STUDY Fall 2025

Client: Goal 12 Responsible Consumption and Production

Sustainable Resource: UN Goal 12, Beyond Plastics

Project Title:
A Sustainable Web Design and Development (UX and UI)

Course:
ITECH 120 Web Design, Fall 2025

Designer:
Diana Demaj

DESCRIPTION: While there’s many important topics about Responsible Consumption and Production, my website theme is focused on plastic waste and the importance on recycling and using reusable products to reduce the amount of plastic used. I decided to redesign an existing website: Beyond Plastics.

Beyond Plastics seeks to educate the media, policymakers, and the public on the plastic pollution crisis; encourage businesses to eliminate single-use plastics; train students to become leaders in the anti-plastics movement; and help block new plastic manufacturing and plastic burning facilities.

^{Images of Beyond Plastic Home Page:}

RESEARCH:

1) Sustainable Theme: When researching my sustainable theme, I used the UN Websites to get a general understanding of what Goal 12 Responsible Consumption and Production is about. I googled some organizations online to find out more on Plastic Waste which is a more specific topic. I read through organization sites like plastic for change and end plastic waste.

_{Resources: PlatsticForChange; EndPlasticWaste}

2) Landing Page: I was searching through organizations on Google to find a website I can make more appealing to users. That’s when I found Beyond Plastics. It’s full of information but it feels very clutter. Based on the other organization I saw and landing pages ideas from Pinterest, I designed a mockup for this site.

_{Resources: BeyondPlastic, OceanCleanUp, America’sPlasticMaker}

3) Wireframes:

4) UX and UI findings: UI findings I searched through Google Fonts and Adobe Colors to find the right style for the website.

5) Prototype: My final design for my prototypes were made in Adobe XD. I watched a couple YouTube tutorials in order to learn how to use the program. I’m used to working in Figma but wanted to see how Adobe XD works. I wrote in my blogs posts on what videos I found on YT.

CHALLENGES:

One of the challenges for my sustainable theme was deciding what exactly do I want to focus on my theme. Goal 12 is a very broad topic with consumption and production, I read through a lot of examples through the UN site.

I also struggle in deciding whether I wanted to create my own landing page or redesign an existing one. I looked through many organizations to redesign but majority of them had a wonderful UX/UI design. Even though, I struggle finding a website to redesign I found a lot of references and inspiration on how to create a new Landing Page.

Wireframe design were something I enjoyed doing, I feel like its something I didn’t really struggle with, I could always improve my designs and how to make things visually clearer in future project. But looking at examples on google was all I really did to help me create the wireframes.

For the UI design, finding the font I wanted took some time. They’re thousands of fonts to choose from and to go through so many just to find the right one was time consuming.

Another struggle was for my UI animations for my prototype, I wasn’t satisfied with the results of my water bottle animation. I wanted to be able to show an animation of a hand letting go of a bottle into a recycling bin. But the results could have been better if I found similar hand images that matched the interactions.

STRATEGY:

When redesigning Beyond Plastics, I tried to include all of the information on the original website. I wanted to make my design simple and easy to navigate. One of the first things I did was refine the logo which I did in Photoshop.

_Original _Refined

My strategy was to make sure my entire website follows the color scheme which is why I changed the logo to match the color palette I chose. My sustainable theme is plastic pollution so I choose my colors according to what I felt like gave the aesthetic of plastic and recycling bins.
With my wireframes, my tactic was to follow a grid to make sure my site is proportional to give a clean look since my design is so simple. Once I began making my final design, I kept looking back at the original website for reference for making sure I’m displaying all the information that they have.
With my prototype, my strategy was to create as many micro interactions with my UI animations. I want the users to be able to have more subtle interactions to keep their attention to the screen since I don’t have a lot of major animations. I made sure all my buttons and links have some type of subtle animation.

DESIGN APPROACH:

When designing my sustainable theme website, my goal was to create a simplistic and organized website so users can find what they’re looking for easily.

Since my website is a redesign, I tried to make it look more modern and brighter with the color palette I’ve chosen. I narrowed down the navigation bar to have less links so it isn’t as cluttered. I designed a search bar so users kind find what they’re looking for much faster. I made the donation button stand out on the navigation bar to catch the users attention for this call of action. I tried to create an hierarchy of what I want the users to see first when they go to my website. I wanted the users to learn more about this organization and to help donate to the cause.

My design approach for my UI animations was to follow the storyboard I created. I wanted to do a motion graphics where someone drops a plastic bottle into a recycling bin. I wanted a simple animation to show how easy recycling can be, a small step to prevent plastic pollution.

With my other animations, I included hover motions for my buttons to make my website more interactive. I want to keep the attention of the users by creating microinteractions so it’s visually pleasing and engaging,

SUMMARY | RESULTS:

Video trailer of my sustainable theme website made on Adobe Premiere Pro: