A better way to share

Branding + UI/UX Design + Website Build | Austin ISD Crisis Support Fund

Mobile mockup screens of the Crisis  Support Fund website in navy, light blue and white palette on light blue background

The Austin ISD Crisis Support Fund was established to help Austin Independent School District (Austin ISD) students and families through the pandemic, which has taken a toll on public education. It has raised over $10 million to date, and some of the ways it has provided help include: meal programs, telehealth fees, translation services and online learning assistance. In addition, the fund has raised money from

ROLE

The idea for this website grew out of a need to turn an infographic PDF into a digital asset. So, I made a site by applying UI/UX design principles to the branding + styling of the PDF (which I created). I took on this project because I wanted to learn what goes into building a website. And, in my experience, the best way to do that is to take the initiative to dive in and figure it out.

Image of infographic PDF that the Crisis Support Fund is based on. Colors are navy, light blue and white. Mix of text, numbers, icons and logos.

GOALS

The website grew out of a need to improve the user experience of the Crisis Support Fund. What was it? Why did it exist? And who was it helping? All these questions originally lived in the infographic PDF that I designed. However, the PDF was difficult to distribute, cumbersome to update and not mobile responsive. Therefore, the goal of the PDF, to share the fund's success, was not being met. So I created the site to give the Crisis Support Fund an accessible and scalable way to reach as many people as possible, and show the Austin ISD community how it was making a difference on the ground and in people's everyday lives.

Two wireframes options for the Crisis Support fund website including text and placeholder for images.

CHALLENGES

Since this was a web design project, I had to shift my mindset. I was used to thinking in layers, but designing for the web forced me to think about the box model, various screen sizes and web content accessibility standards (WCAG). I had to take into account who would use this product and how they would access it, which led to a deeper understanding of UX principles. Because what good is a website if nobody can see it?

UI style guide for the Crisis Support Fund website including colors, button styles, photo styles and typography.

SUCCESSES

I translated the infographic into a website and evolved the existing brand themes using UI/UX design principles. I also used Webflow's built in accessibility tools, such as alt-text on images and the contrast ratio to deliver a product that met the client's needs and increased the fund’s accessibility and visibility in the community. I also broadened my knowledge of how websites are made and got a new understanding of Figma, Webflow, CSS and HTML.

Desktop screens for the Crisis Support Fund website on a navy background

LEARNINGS

This project taught me the importance of follow-through and experimentation. Because while anyone can have a good idea, achieving goals can only come from those who take action and commit.

Previous ProjectNext Project