Sustainable Development Goals Website Prototype
High-fidelity website prototype in Adobe XD designed to communicate the UN's 17 Global Goals.
Project Overview
This project was part of my Introduction to UX Design & User Research course at Pierce College (Winter 2023). The assignment required creating a high-fidelity website prototype using Adobe XD, based on real content from the United Nations' 17 Sustainable Development Goals (SDGs).
The focus was on developing a design system and applying it consistently across pages, ensuring clarity, accessibility, and strong hierarchy. The final prototype included two homepage variations, a design system page, and multiple components.
Goals
- Create a high-fidelity prototype website using real content from the UN SDGs.
- Build a design system page with typography, colors, and reusable components.
- Develop at least two homepage variations that showcase real content.
- Apply principles of visual hierarchy, accessibility, and usability.
My Role
- UX/UI Designer: Designed two homepage prototypes with consistent branding.
- System Builder: Created a design system with fonts, color palette, and reusable UI components.
- Researcher: Analyzed the UN SDG content to structure information clearly and effectively.
- Accessibility Advocate: Focused on contrast, font sizing, and logical information flow.
Tools & Skills Used
Process
1. Research & Content Review
Studied the United Nations' 17 Global Goals and identified key messaging for the homepage.
2. Wireframing & Flow Planning
Outlined the navigation and structured layouts for effective content hierarchy.
3. Design System Development
Created a design system page with fonts, colors, and five or more components (buttons, icons, cards, navigation).
4. Homepage Variations
Designed two homepage prototypes, each applying the design system but exploring different layouts.
5. High-Fidelity Prototype
Finalized the prototypes with real content, clear typography, and visual storytelling aligned with the Global Goals.
Gallery & Mockups
