Goal: Design Goldsmith Universities online learning website
Timeline: 2 weeks
Deliverables: Hi-fi mockups, Style guide
Tools: Figma
Role: I led the design for this project
Overview
Goldsmiths, University of London is a constituent research university of the University of London. They have a rich history of providing world-class teaching and research, and they offer a range of both undergraduate and graduate programs to approximately 10,000 students. We were tasked with designing their online learning website using a customizable Figma template and updating the color and typography to match their new brand guidelines.
Research
I began by conducting an in-depth audit of the existing website to understand its UI patterns, functionality, and overall information architecture. During this analysis, I found that while the site used a range of brand colors, their application lacked consistency across pages and components. I also identified several areas where the interface did not meet accessibility guidelines. These findings informed the creation of the style guide and helped prioritize improvements in consistency and accessibility.
Branding & Design
One of the school’s primary goals was to create an online learning website that reflected their updated brand identity. After reviewing the brand guidelines and auditing their existing websites, I developed a comprehensive design system for Goldsmith. The system included a structured color palette, a library of reusable components, and UX standards for typography, spacing, and screen layouts, while also adhering to accessibility standards. Establishing these guidelines improved consistency across the interface, reinforced the brand visually, and allowed teams to scale new features more efficiently. It also created a clearer handoff between design and development, reducing implementation friction and improving collaboration.
Hi-Fidelity Prototype
After establishing the style guide, I designed hi-fidelity mockups for both the microsite and landing page using the system’s components. These mockups helped the client visualize the final experience and ensured alignment before development began.
