By Kendra H. Oliver
We’re live!
For user experience designers like myself, one of the most exciting and challenging aspects of our work is the opportunity to bring fresh design concepts and user-centric approaches to websites. Recently, I had the privilege of working on a project that allowed me to do just that—applying the new FutureVU design system to the School of Medicine Basic Sciences website. I’m excited to share the processes we used and the transformative impact it had on the user experience.
The need for change
Before diving into the design process, it was crucial to understand why a redesign was necessary. The existing website had become outdated, difficult to navigate, and didn’t align with the university’s evolving brand and digital goals. Overall, we sensed that users found it challenging to navigate and access critical information. Basic Sciences recognized the need for change to improve usability, accessibility, and overall user satisfaction.
The changes that we implemented were simplified into three statements: we went from flat to clean, from layered to horizontal, and from complex to simple. Check out this short presentation for more information and examples of how we did this.
Discovery and research
The first step in the process was thorough research and discovery. I discussed the website over the last year with various center and core directors to better understand their needs and challenges. With Eann Malabanan, Program Coordinator for the MMPC, we conducted user surveys with various faculty and staff who have used and built websites. Additionally, as part of a BRET internship with the Basic Sciences communications team, Ph.D. student Dora Obodo analyzed web analytics data to gain insights into user needs and journeys through our website.
We discovered that visitors to the website were primarily internal: our own students, faculty, and researchers seeking information about academic programs, faculty members, and research opportunities. Yet, when we talked with stakeholders it was clear that the intended audience should also be external. Armed with this data, we had a clear picture of how to distinguish and simplify the experiences for both audiences.
The FutureVU Design System Integration
FutureVU is Vanderbilt University’s official design system, designed to provide a consistent and cohesive visual identity across all university websites and applications. The design system includes guidelines for typography, color palettes, iconography, and components such as buttons, forms, and navigation menus.
Integrating FutureVUFutureVU into the Basic Sciences website was both exciting and challenging. We started by aligning our design concepts with the system’s guidelines to ensure a consistent look and feel. This step helped establish a sense of unity with the broader university brand while creating a visually appealing interface.
User-centric design
Our user research played a crucial role in the design phase. We created user personas and user journeys to map out typical paths users take through the website. This information helped us make informed decisions about content organization, navigation menus, and layout choices.
Redesigning the information architecture for the website was a strategic endeavor aimed at tailoring the digital experience to the unique needs and roles within the ecosystem. We organized content, menus, and pathways to ensure that students, faculty, and researchers could effortlessly find relevant information pertinent to their specific roles. For example, we created dedicated sections within the internal resources page, streamlining access to essential content. We will continue to evaluate how this restructuring not only improves the user experience but also enhances the website’s effectiveness as a resource hub.
Prototyping and testing
Once the initial design concepts were ready, we created interactive prototypes to test within the Dean’s Office. We collected feedback through surveys and individual user interviews and have made—and will continue to make—iterative improvements to address usability issues.
Results and impact
Throughout this project we were focused on user-centric design and the benefits of integrating a cohesive design system like FutureVU. This project reinforces Basic Sciences’ commitment to excellence and innovation.
We hope that you are excited about these transformations! If not, we would love to hear your feedback. We will continue to be collecting feedback on all aspects of the website including navigation, layout, and accessibility. Additionally, we will be monitoring website analytics to see if people get to where they want to go faster than before.
We hope that this launch showcases how thoughtful research, collaboration, and adherence to design principles and processes can result in a website that not only looks great but also serves its users effectively.