Website Redesign

Redesigning a Website for a Neuroscience Research Lab.

OVERVIEW

BACKGROUND

During my second semester, my professor asked me to redesign the website for a research lab he worked at, as the existing design was outdated and didn’t meet modern standards. Along with the redesign, he also requested the following:

  • Add a "Contact Us" form to streamline communication.
  • Introduce a "People" page to showcase team members and their roles.
  • Develop a mobile-friendly version of the website for better accessibility.

GOALS (BASED ON PREDEFINED REQUIREMENTS)

  • Revamp the website to create a modern, visually appealing design.
  • Develop a user-friendly "Contact Us" page with an interactive contact form for inquiries.
  • Introduce a dedicated "People" page to highlight team members and their roles within the lab.
  • Ensure the website is fully responsive and optimised for seamless mobile and desktop experiences.

ROLE

UX Designer

DURATION

3 weeks | 10/02/2024 - 02/03/2024

RESPONSIBILITIES

  • Designed wireframes, user flows, component library, design system and prototype.
  • Optimised screens for mobile responsiveness.

LIMITATIONS OF THE OLD DESIGN

Before diving into the redesign, it is important to analyse the existing website to understand its limitations. While it served its purpose, the outdated design created challenges for both users and administrators. Here’s a look at why the current design needed improvements and how it could be enhanced to better serve the needs of its users.

REDESIGN

Before creating this final design, I took several preparatory steps to ensure a well-thought-out approach. This included referencing other modern and relevant website designs for inspiration, creating rough sketches to explore layout ideas, and developing a comprehensive design system to establish a consistent visual language and style.

MOBILE

SITEMAP

I created a site map to provide more visual clarity and help users easily navigate the website, ensuring a better understanding of the overall structure and flow.

MID-FIDELITY SCREENS

After finalizing the layout concept through sketches, I moved on to creating mid-fidelity wireframes to refine the design.

WEBSITE

MOBILE

DESIGN SYSTEM

For the redesign, I built the design system around the existing color palette, making small tweaks to improve visual appeal and usability.

PROTOTYPE

WEBSITE

MOBILE

FIGMA LINK