Web Design
UI/UX Design
Brand Systems
Giving Site Redesign
UC Santa Barbara
130% Increase
Donation Page Views
14% Increase
Site Engaged Sessions
Role
Lead Graphic Designer
Assistant Web Developer
Team
Director of Communication
Senior Managing Director
Web Developer
Photographer
Deliverables
Figma Designs Mocks
Image Library
Site Map
Overview
I was tasked to redesign the Giving Website with the Development Communications team at UCSB which oversees all media that goes to donors or potential donors for the university. In building their Giving website, I worked closely with the Director of Communications to develop content strategy and timeline for the site launch. The Office of Development sought to establish a more engaging site for their audience and to raise awareness of how donations or contributions helped elevate the university community. I wanted to bring attention to the students, departments, families, that are benefiting from these donations. Not only with content, but with compelling imagery, and an improved navigational experience.
Approach
In preparing for this redesign, I focused on research on the giving community at universities; this being my first website design based on university philanthrophy. I looked for elements we should incorporate, elements in our current design that we don’t need. How can this site attract the ideal person, who will then want to contribute?
First things first, we need to improve the user experience and interactions on each page. We need to create a better navigational system within each page, refresh the site with updated branding and improved responsive design. We need to highlight CTAs and correctly integrate them within the site. This will help with interactivity between the web pages. We also need to boost web performance and optimize page with keywords for not only search engines but for those already on the university site who can then navigate to our site for their needs.
Home Page Redesign
Building this website in Figma was a blank canvas. I needed to first build out their design systems (colors, text styles, icon library, logo variations, etc) and then start building pages and web components. Once a web component would be established, I would add it to the template library. I was the first to introduce Figma to my team so I taught them how to successfully use it for review. So not only was I designing and building, I was also teaching.
For the new Home page design, we have a clear understanding on what the giving site is about. You have a bright color hero image with header text and a CTA that tells you how you can contribute to UCSB. We have impactful statistics and capture your attention, not just because of the text size but also with color. We include staggered content blocks that makes the audience interact with the page. We have purposeful imagery! And at the end we have a student quote to bring it all together on what a donation meant to them
Our Stories Page Redesign
For the Stories page on the Giving site, the first thing the user sees is a large hero image that does not provide any information on what this site is about. It serves no purpose on this page. Apart from that we have a long scrolling page since all the stories (100s of them) are only on this page; making the web page way to long. We need a way to filter stories and view them in a better layout.
For the new design, we removed the hero image since you want to emphasize the stories images instead. We have a header text block that provide a quick blurb of the kind of stories you will find below. We added a filter search that allows the user to search by year, area, and keywords. Having a story limit on this page and creating a two column grid reduces the page length which can deter a user from scrolling for too long.
Design System
With my expertise in a web design and working frequently in Figma, building a brand design system allows us to streamline design mockups for any future web assets. With this system, I also built web components with their variations to easily create pages.
