Work Experience

Klausner Research Group of USC

Overview

to enhance the UI/UX of the website within the constraint of the WordPress and Elementor website building platform

My Role: Web Designer

Duration

Sept 2022 - Present


The Klausner Research Group, led by Dr. Jeffrey Klausner, is part of the Division of Inequalities of Global Health in the Department of Population and Public Health Sciences at the University of Southern California.

Our key priorities are to increase website traffic, streamline the publishing process and researcher activities, and maintain a consistent and professional brand identity across the entire site. As the web designer, my responsibilities include creating mockups, wireframing and creating visual designs.

Client Brief

During my initial meetings with the Klausner Research Group representative, my primary objective was to gain a comprehensive understanding of the project's scope. The client referenced established websites such as the UC Global Health Institute, USC Institute on Inequalities in Global Health, and USC Research and Innovation (R&I) as sources of inspiration. To keep track of the project's progress and challenges, I developed a Gantt chart outlining the project workflow. It is crucial to iterate designs efficiently to create a timely product that meets both the client's and my expectations.

UX Flow


Client feedback showed that users were ignoring news in the press tab as it wasn't visible on the homepage. To improve the user flow, we added more call-to-action buttons on the homepage, making it easier to access information efficiently.

Low Fidelity Mockup

During the low-fidelity design stage, I prioritized margin sizing and image placement while ensuring usability and avoiding redundancy.During the low-fidelity design stage, I prioritized margin sizing and image placement while ensuring usability and avoiding redundancy.


Middle Fidelity Mockup

Following my meeting with the client to review the low fidelity drafts, I commenced making necessary revisions to incorporate their feedback.

High Fidelity Mockup

During the high-fidelity design stage, I focused on maintaining consistency throughout all templates by using the same design system, settling on fonts, and incorporating the official USC and Klausner Research Group logo.

To bring the designs to life, I implemented them on Wordpress using Elementor. This allowed me to incorporate animations and make the site fully responsive, ensuring that the design looked great on all devices.

View the full website: klausner.usc.edu