The Sexual Violence Prevention & Response Office (SVPRO) at UBC Vancouver offers support and resources for victims of sexual violence as well as faculty, staff, and administrators who work toward making UBC a safer and more welcoming campus.

The problem:

The legacy SVPRO website was constructed in the UBC Wordpress ecosystem and its backend was not user-friendly. Knowledge of CSS and HTML was required in order to make edits to the site, but program staff lacked training in web design and development. Thus, edits would take a long time to implement and resulted in a significant backlog. The front-end design was also not accessible or aligned with user experience best practices.

The solution:

I began migrating the text-heavy SVPRO site content to a staging site and first created a structured typographical hierarchy. I utilized set brand standards to adjust the font settings and colours, then checked the design against web accessibility standards (WCAG 2) and implemented edits. Because most pages of the website were incredibly long and filled with information, I endeavoured to chunk out content and check for redundancies or opportunities to consolidate content. I replaced static site elements (such as flow chart PDFs) with interactive and dynamic content to enhance the user experience. I also redesigned the home page for improved user flow, layout, and aesthetics. The overall goal was to reduce custom CSS to the bare minimum and build as much as possible using only the Gutenberg editor and no additional plugins. The client was extremely happy with the end-state product and how easy it was for them to make changes or edits on their own.

Software used: Wordpress