While I was working at the Dystonia Medical Research Foundation (DMRF) Canada as a Development Coordinator, I noted that the foundation’s website had numerous issues, chief among them being that the navigation menu was bloated and difficult to use. I proposed a project to restructure the navigation as a first step to redesigning the website. For details on the overall website redesign, you can have a look at my DMRF Canada website redesign post. This was part of the first web design project I had the opportunity to work on.
I’ve mapped out the original structure of the menu navigation below and listed some key issues I had with it below:
- “What is Dystonia?” had many sections about types of dystonia, treatments and others that could be consolidated into one page with several links.
- 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 out-dated 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 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.
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.
You can visit DMRF Canada’s website to see the current menu navigation, but do note that I had completed this project over 2 years ago and they have made changes to the navigation since then. You can also view the final navigation structure I created at the time below: