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.
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.
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.
Before redesigning the website, the navigation was in desperate need of restructuring. I created a map of the original structure below to showcase the kinds of issues it had:
It should be quite apparent at a first glance that this navigation menu did not meet good information architecture principles. What stuck out initially was that it had a great deal of nesting and categories that overlapped in meaning while not adequately encompassing the many things the site had to offer. Below are some specific issues I had highlighted:
- “What is Dystonia?” had many sections about types of dystonia, treatments and others that could be consolidated into a smaller number of pages or other forms of content.
- This section was also missing some important content such as a section on symptoms and diagnosis and FAQs about dystonia.
- “Research” did not include resources on funding opportunities for dystonia research. These funding opportunities were listed under the “Professional” section, which added little value since the only other sub-section it had was an outdated surgical guide.
- “Resources” had subsections that opened a “Patient Package” PDF document in both French and English. This package had useful information such as financial resources, caregiver resources and more, which could all be turned into their own webpage sub-sections under “Resources”.
- “Support” was somewhat a ambiguous title which could have been interpreted as support for patients (which “Resources” was already for) or a section on how to support DMRF Canada (which “Ways to Help” was already for).
- “Support Groups” had all the provinces and territories listed as subsections, even though some of them did not have any active support groups at the time.
I first created a diagram of the original structure and annotated issues I found with it, including items in the list of issues above. I then developed a first draft for a possible new structure, which I reviewed with my supervisor to get feedback and come up with additional revisions. I then developed a second draft and created a tree test to see how easily our users could find content in the updated menu. After analyzing the tree test results, I made minor additional changes to my second draft and then implemented the changes on the website.
Annotated notes and drafts are in the gallery below:
I used Optimal Workshop’s Tree-testing tool to recreate my second draft of the menu navigation and created the following 3 third-person task scenarios for our participants to walk-through, with their respective intended choices:
- You are a patient with dystonia and want to find other dystonia patients in your area to connect with.
- Intended Choice: Community > Local Support Groups
- You are a medical researcher interested in dystonia and want to find grants or other funding opportunities to support your research.
- Intended Choice: Research > Research Funding Opportunities
- You are the parent of a child who has just been diagnosed with dystonia and want to find resources on how you can best support your child.
- Intended Choice: Resources > Caregiver Resources
The testing link was sent out to people within our support group network and I received a total of 16 responses. The results for each of the tasks are shown below:
For the first task where participants looked for support groups, all participants succeeded in making the intended choice, though two had first attempted to check “Online Support Groups” before visiting “Local Support Groups”. For the second task, where participants looked for research funding, there was complete direct success. The third task had the most difficulty, where 10 patients directly succeeded, but 5 succeeded indirectly and 1 indirectly failed. Participants indicated in follow up survey responses that they couldn’t find the word “parent” anywhere, so this took them some more time to figure out.
Overall our participants felt that the new navigation was easy to use and that they could find what they needed quickly. Based on the tree test results, I made a few additional changes, including:
- Changing “Caregiver Resources” to “Parent and Caregiver Resources”
- Adding an additional “Donate” button at the end of the navigation, which took to a page where they could donate directly. While this was redundant with the sub-section under “Support Us”, we wanted users to only have to make one click to find where they could donate.
The original website design was exceptionally dated and had a host of issues. After reviewing the design I came up with the following as top priorities to work on:
- 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.
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. I skipped typical steps such as developing user personas and wireframes, and instead experimented with theming and HTML/CSS. Below is a comparison of the old design and resulting final design:
For the restructuring part, much of this project involved consolidating a large number of sub-sections into one section that could link to all the different pages. This did involve additional work to create new pages to link to that information in a way that wouldn’t appear too overwhelming, which was challenging. I also had to address some ambiguities in navigation titles, such as “Support” representing the support group section. I believe I was able to come up with elegant solutions to disambiguate the navigation, which was supported by the tree test results where participants always succeeded directly when selecting the main sections. Overall, as part of my first web design project, I believe this was a success.
For the rest of the design, I am happy with what I managed to do given my limited real-world experience at the time. 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.