Storytelling through UI

Telling an author, urbanist, and activist's unique story through a brand identity and website.

My role
UX designer

Team
Creative director
Developer

Timeline
May - November 2024

IntroductionApproachDesignTakeaways

Introduction

During my time at SuperWorks, a design agency with a focus on building brand strategy and web design for women-led organizations and women-owned businesses, I had the opportunity to lead the website design for author, urbanist, and activist Alison Sant.

View published site  

The problem

Our client, Alison Sant, is a widely successful urbanist who has worked with both private and public sectors, written multiple books, and teaches at institutions such as UC Berkeley to the Harvard Extension School. Her greatest pain point was explaining the interdisciplinary nature of her work, as well as presenting her business identity to future stakeholders in a simple, cohesive way.

Our challenge was to build a brand identity, website, and branding collateral that visually communicates Ali's diverse work and unique business.

Approach

My main task was to design the website, which also needs to act as a portfolio that can hold Ali's past, present, and upcoming work. Our design process began by drawing parallels between her work and metaphors, due to the physical and structural nature of her work.

We proposed a set of colored shapes to represent the multiple themes that the client's work spans across, and worked with them to determine this set of building blocks, which acts as the foundation of the brand identity.

Design

Website

Using the brand guidelines, I led the design and development of the website. Our goal was to utilize the colored building blocks to convey the coming together of the multidisciplinary work that our client creates.

Preliminary explorations of the website.

Final prototype

View published site  

Animation

To bring Ali's vision of a dynamic, visually compelling site to life, I created an intro animation for the website using Figma and Lottie.

Intro animation for desktop.

Intro animation for mobile.

Takeaways

I was able to lead a major part of this project, and I'm so grateful to be able to learn new project management skills to make key design decisions. This project also allowed me to explore and experiment with the design process alongside my teammates and client, to collaboratively create a beautiful and effective brand identity.

More Projects