DMRF Canada

Screenshot of Dystonia Medical Research Foundation (DMRF) Canada Homepage
Dystonia Medical Research Foundation (DMRF) Canada Homepage

Background

While I was working at the Dystonia Medical Research Foundation (DMRF) Canada as a Development Coordinator, I noted that the foundation’s website had an outdated and cluttered design, so I proposed a project to my supervisor to work on the structure, content and overall design of the website. The first step of this process was restructuring the navigation menu, followed by redesigning the website as I’ve detailed on this page.

This was the first website redesign project I worked on and was largely self-taught, so much of my process of doing this was exploratory and lacked a strategic methodology. Despite the many shortcomings, such as not creating personas or wireframes to guide this design, this project was an important stepping stone for me to get more involved in web design, so I feel that it is an important project to showcase.

Original Website

Screenshot of the old page on blepharospasm of dystoniacanada.org
DMRF Canada Old Page on “Blepharospasm”

Issues

After reviewing the design and layout of the original website, I came up with the following key issues:

  • About 50% of the screen was taken up by a dark-gray background, which severally limited how much content could be displayed on a page without getting too cluttered.
  • Main content for pages was sandwiched between widgets on the left and right. This created a lot of visual noise and limited font-sizes to be undesirably small.
  • Font types and sizes were varied and inconsistent and the color choice for links had poor contrast with a white background.
  • The homepage was especially cluttered and did not direct users to important content or resources.

Project Goals

After my initial review of the website and discussions I had with my supervisor and colleagues, I came up with the following goals:

  • Reduce clutter for all pages and increase the space provided for the main content of each page so it would be more readable.
  • Develop a homepage that is distinguishable from other pages and makes it easy for visitors to understand what DMRF Canada is for.
  • Develop and maintain consistent styling that matches the brand image DMRF Canada intends to have.

Design Process

As this was my first website design project, I was teaching myself what to do along the way, so my approach to this was somewhat haphazard. For example, I took a structured approach when working on restructuring the navigation menu, where I conducted tree tests to determine if the restructure was successful, but for the web redesign I skipped typical steps such as developing user personas and wireframes. My design process for this mostly involved experimenting with different themes that were available on Drupal 8, and constructing drafts of various pages to share with my supervisor. Unfortunately I did not take screenshots of those drafts so I have no evidence for the process.

Final Design

I redesigned the site with the Drupal 8 Zircon theme, adapting it to the specific kinds of information we needed to display, such as event listings and support groups. To see the result of this project, you can visit DMRF Canada website, but please note that the website has undergone some minor changes since I had last worked on it.

Reflection

For my first web design project I am happy with what I managed to do. The new layout of the site is significantly less cluttered than the old website, and has consistent use of colors, font types, font size and more. I think the homepage makes it very clear that DMRF Canada is a medical research foundation and non-profit organization. One area I think I could really improve on, knowing what I know now, would be the “What’s Making News” section of the homepage, which could benefit from better formatting. At the time I did not fully consider what this website would look like after I stopped working on it, so I never setup the formatting for news to be consistent because I was coding that consistency myself for every post.