Kanelis Laboratory Website Redesign

Enhancing usability, structure, and accessibility.

During the fall of 2024, I had the opportunity to work with the Kanelis Lab at the University of Toronto to redesign their website. Check out the finished website here!

• Role:
  Solo Product Designer & Developer
• Timeline:
  5+ months (ongoing)
• Methodologies:
  Competitive Analysis, Information Architecture, Iterative Design, Design Systems

Problem

Goals

• Improve Navigation:
  Create a clear, logical structure for visitors to easily find information.
• Enhance Readability & Accessibility:
  Optimize layout, typography, and contrast.
• Streamline Content:
  Organize research, publications, and lab member details in an easy-to-read format.
• Simplify Maintenance:
  Select a platform that allows the client to update content quickly.

Research

Studying Other Groups

I conducted a competitive analysis of other university research lab websites to identify best practices in structure, navigation, and content presentation.

I found some common issues in outdated lab websites, such as cluttered navigation and hard-to-find content. The best websites prioritized clarity and a professional yet approachable design to improve user experience.

Navigation

Common pages include home, research (with a dropdown), people, publications, contact, instructor bio, positions, news, contacts, and photos.

Lab Research Page

Research pages include lots of text, so it's nice to have some diagrams, summary highlights, and subsections to help make the content more digestable.

Publications

Publications pages are usually a list of papers, sorted and organized in reverse chronological order or by publisher. Diagrams and list numbers are nice to have.

Open Positions

This page is usually very minimal, with a short list of open positions, contacts, links, and clear call-to-action buttons.

Design

Sitemap Planning and Information Architecture

Using insights from my research, I mapped out a sitemap and connecting links to get the overall structure of the website. I kept the navigation simple, with clear distinct labels and categories.

Since the target audience was prospective students, I made sure it was easy for them to find information about what the lab does, who the team members are, and how to get involved.

Sketches

I developed 2 very rough low-fidelity wireframes to visualize the layout and content hierarchy.

Version 1

Version 2

Internal Feedback

Refining the Design

Incorporating feedback from the client and users, I refined the design to create a mid-fidelity prototype in Figma.

Branding and Design System

I developed a design system to maintain consistency across the website. This included typography, color, effects, and icons.

Getting to the Final Product

A few additional changes were made to the design based on user feedback, the client preferences, and the capabilities of the website building platform.

Reflection

Lessons Learned

Considering Client Needs: When I first started this project, I made the mistake of overcomplicating the design. The client wanted a simple, clean website that was easy to update. For future projects, I'll make sure to clarify the client's goals and constraints before diving into the design.

Expect Changes during Implementation: Even with a detailed design system, some elements had to be adjusted during the development phase, such as font sizes, button styles, and page layout. Some things that worked well in Figma didn't translate well to the website, so I had to be flexible and make changes as needed. Even when adding images, I realized the colours and contrast needed to be adjusted to meet accessibility standards.

Next Steps

As I continue working on this project, I'll implement more user feedback and test the website's usability to ensure it meets the client's needs.

✨ More updates coming soon!