Interactive Design - Final Project

Aina Ahmed Aleem / 0355701
Interactive Design / Bachelor of Design (Honors) in Creative Media

FINAL PROJECT - WEBSITE REDESIGN 

---

- CLICK HERE TO VIEW THE LIVE WEBSITE

- CLICK HERE TO ACCESS THE FULL PROJECT FOLDER

---

FINAL PROJECT REPORT- WEBSITE REDESIGN - SAVE THE BEACH MALDIVES

Project Overview
This project involved the complete redesign and development of a real-world NGO website - Save the Beach Maldives, with the goal of improving visual appeal, usability, and user engagement. The original website lacked a cohesive layout, intuitive structure, and clear messaging, which hindered its ability to effectively convey the organization’s mission and encourage user participation. This final version of the site was built in Adobe Dreamweaver and follows a simplified, modern, and mobile-friendly structure based on my Figma prototype.

Initial Observations and Design Proposal

Website Audit
The original site displayed several UX and UI issues:

• Layout: The homepage was cluttered, with key information like the mission, donations, and volunteer options scattered across the site.
• Typography: Inconsistent and hard-to-read fonts weakened the site’s professionalism and accessibility.
• Color Scheme: The colors didn’t align with the environmental mission. They lacked visual harmony and thematic relevance.
• Navigation: The menu structure was confusing, with too many scattered links and no clear user path.
• Imagery: The site didn’t take advantage of the beautiful Maldivian scenery or imagery relevant to beach conservation.
• Responsiveness: The site performed poorly on mobile devices.
• Interactivity: Forms were clunky, slow, and sometimes not functional.

Design Goals

The main redesign objectives were to:

• Establish a modern, clean look with a nature-inspired color palette (ocean blue, green, beige, and white).
• Ensure the website was easy to navigate, especially for donors and volunteers.
• Make the site fully responsive and visually consistent across devices.
• Provide clear calls to action and quick access to the “Support Us” form via a pop-up modal.
• Represent the organization’s mission visually and textually in an emotional and compelling way.

Target Audience

• Primary audience: Environmentally conscious individuals, tourists, and potential volunteers.
• Secondary audience: Donors, researchers, educators, and corporate partners.

The redesign aimed to create an experience that educates, inspires, and drives users toward supporting conservation efforts whether by volunteering, donating, or spreading awareness.

Development Process
Wireframing & Prototyping
I first created a detailed proposal, mood board, and wireframes using Figma, mapping out the visual direction and site flow. Key UX enhancements included:

• A sticky header for constant menu access.
• A hero section on the homepage with a large, impactful image and a concise mission statement.
• Organized content blocks with clear headings and scannable information.
• A pop-up “Support Us” form embedded into the “Engage” page instead of a separate Contact page, reducing user friction.

Building in Dreamweaver
I used HTML and CSS to recreate the design in Adobe Dreamweaver:

• Created separate HTML files for: index.html, about.html, reef.html, awareness.html, engage.html, and donate.html.
• Added a linked stylesheet (style.css) for consistency and easier editing.
• Integrated responsive design techniques (media queries, flexible containers) for mobile support.
• Created reusable components like the header and footer to maintain consistency across all pages.
• Used a pop-up modal for the support form, which appears on every page via a consistent “Get in Touch” section.

Challenges and Solutions

1. Font Visibility on Light Backgrounds

• Issue: The homepage had white text on a very light grey background, which reduced readability.
• Solution: Adjusted the CSS to apply black text for the homepage content, while preserving contrast and alignment with the rest of the site.

2. Dreamweaver Crashing

• Issue: Dreamweaver became unresponsive multiple times during development, especially while previewing.
• Solution: I regularly saved my files and restarted the program when needed. Eventually, I found that simplifying the live preview window and reducing open files helped performance.

3. Confusing File Structure

• Issue: Early on, I had multiple versions of HTML and CSS files saved under similar names.
• Solution: I renamed and organized everything into one final project folder with clearly labeled pages and a single stylesheet.

4. Publishing Confusion

• Issue: I wasn’t sure how to generate a live link to submit the site.
• Solution: With guidance, I zipped my final site folder and uploaded it to Google Drive with public access. This serves as my “live” submission folder for evaluation.

Key Features in the Final Site

• Responsive Design: Works across desktops, tablets, and phones.
• Consistent Theme: Nature-inspired colors and minimalist layout reflect the Maldives' beauty.
• Clear Navigation: Simplified menu structure and sticky header.
• Pop-up Support Form: Engaging and user-friendly interaction for those wanting to volunteer or donate.
• Optimized Performance: Images resized, code streamlined for faster loading.

Reflection
This project was both a creative and technical learning experience. From wireframing in Figma to troubleshooting Dreamweaver crashes, I gained a deeper understanding of:

• UI/UX principles
• Front-end development
• File management and responsive web design
• Problem-solving under time pressure

I also realized how important it is to keep users in mind especially for nonprofits. Every design choice must make it easier for people to connect with the cause and take action.

Conclusion
The redesigned Save the Beach Maldives website is now modern, organized, visually cohesive, and user-friendly. It reflects the environmental values of the organization while providing a smoother experience for its audience. I hope this version better represents the amazing work Save the Beach Maldives does and invites more people to be a part of it.