Redesigning Hjerteforeningen.dk for a better match between internal strategic goals, user needs and a UX best practice.
CLIENT
Hjerteforeningen, Mar – Apr 2020
MY ROLE
Usability testing, UX Review, Wireframes
CHALLENGE
Hjerteforeningen had a lot of knowledge and tons of well-prepared content, but experienced that users were having a hard time finding what they were looking for, and a lot of sites on the website were never used. With a deep dive into their Google Analytics it was clear to see that only a handful of sites were used and that a lot of users enters directly through a Google-search. Ultimately, these initial hypothesis had direct impact on retrieving new members and receiving donations. Different elements of the website were influencing this, and I would research and finally laying the foundation for a new and more intuitive navigation and site structure.
___serialized2_edited.jpg)
SKETCHING & BUILDING BLOCKS
The first part of the project was focusing on creating a few new templates, that would be flexible for the employees at Hjerteforeningen to work with. A requirement was that the sites would function as templates to plug'n'play with their content. This way, each department were able to choose whatever works best for a specific article without having to design a completely new site each time an article is published.
With a deep-dive into Google Analytics and Hotjar, we retrieved some insights into where and how long the users stay on the website. We could see what elements was clicked on the most, which I used in the decisions on which parts we wanted to re-use and which one needed a complete redesign.
Based on initial stakeholder interviews, analytics and a UX review I began the process of re-structuring all the content by sketching each block and functionalities.
WIREFRAMING THE NEW SITE STRUCTURE
After a few rounds of sketching and a lot of different ideas, I was now ready to turn these into wireframes. Wireframes are a visual representation of the websites structure and functionalities, and leaves out actual content and design. They were very useful in the beginning of the design phase, as it was much easier for the client to concentrate on the information architecture and at the same time we spent less time and resources on correcting/adding/removing elements early on in the process. After designing the new layout and we had the foundation in place in regards to the exact content, we could move into redesigning the navigation.
NAVIGATING THE USERS INTO THE INTENDED CONTENT
To kickoff the redesign of the navigation, I wanted to test the current navigation with a Tree Testing. I wanted to focus on the navigation structure and completely leave out layout and design at this stage. The participants were asked to complete a series of tasks where they would attempt to find specific content via the current navigation on Hjerteforeningen.dk. Then we were able to analyze how many of the participants chose the intended path, how many that didn't succeed with the task, which detours they attempted before reaching the content, and how long time it took them to complete each task.
An example of one of the tasks:
Task: Imagine you have a heart condition and you want to find someone to share your experiences with. See if Hjerteforeningen can offer you associations, social clubs or something else.
Solution: Frontpage > Get support > Community & Associations
(and additional seven potential paths to the solution)
This task is quite "open" in order to give the participant the opportunity to find information about social gatherings in multiple places. However, the participants clearly struggle to find this. Four users gets a direct fail, one success.
​
Another example of users struggling is when trying to find information about "Hjertebørn". The intended path (the green) is visualized as a direct line. Two users do not complete the task (the red ones), the three other users (light green) completed the task, but had a lot of detours before doing so.
RENAME, REARRANGE, REGROUP...
For the next step in the process of a new navigation, I used Card Sorting as my primary method. I wanted to explore the target group's interpretations and immediate attitudes to how the various menu items should be grouped in order for it to make logical sense to them.
In practice, card sorting means that each menu item is written on a card and then you must try to group these individual cards together according to what makes sense for the individual participant. There is no right or wrong answer, but instead it opens up the exploratory part of how the target audience captures and understands the current content on the website.
Using this unmoderated method, we are able to get a data collection where all test participants have been given the same starting point – And therefore I remove the possibility of me changing the wording of the tasks or answering questions differently along the way.
We preferred not to do either closed or open card sorting, but instead a hybrid that could benefit from both methods. We predefined 6 categories that we would like to test.
At the same time, it enabled the user to create and name their own categories, if they did not find the existing ones adequate or had another idea.
ANALYZING THE DATA
We wanted to include participants from both target groups: Patients and relatives – With a mix of both gender and age. We gathered 16 participants to join the remote card sorting.
Afterwards I had a lot of data to analyze in excel (16 participants x 46 cards). I made a spreadsheet with the data for each participant, but more interesting is to look at the sum of all the data to see similarities or differences in where the cards have been placed. This way, I tested how many times e.g. Card A is placed in Category A, B, C etc.
The higher percentage, the higher is the agreement and certainty of that card. The lower the percentage is, the more disagreement is seen in regards to which categories are chosen for that card. For an easier readability, I color-coded the percentage from green to red (high to low agreement).
For example it was clear that there was a high agreement with the cards "Treatment" and "Coronavirus & The Heart" as they scored 93% agreement in the category "Information about the heart". On the opposite side, I can see that "Facts and key numbers" and "From researchers" was spread out in all categories and it was not very intuitive for the participants.
Based on the analysis of this data, the future strategy of Hjerteforenigen.dk and with a best practice within UX, I structured a new navigation to do a tree testing on.
TESTING THE NEW NAVIGATION
I created a final tree-testing of the new navigation with the same tasks. This way, we were able to see the improvements from the existing to the new navigation. I used this to see if there still were some categories or cards to adjust/add or remove before we initiated the wireframes.
The same task from the initial tree-testing, now with a different solution:
Task: Imagine you have a heart condition and you want to find someone to share your experiences with. See if Hjerteforeningen can offer you associations, social clubs or something else.
Solution: Front page > Activities & Health > Clubs & Communities.
This changed from the first test (4 direct fails) to now with 3 direct success and 2 indirect success. The participants all found the intended path to the content, and therefore we can interpreted that the new category "Activities & Health" is a better match than "Get support".
Existing design
New design
GATHERING EVERYTHING INTO ONE
The entire process have been leading up to how we can design a new and improved navigation. I needed to accommodate the fact that Hjerteforeningen.dk contains a lot of content and make sure that users are able to donate or become a member at any time when browsing the website.
I chose to implement a global menu containing the five general categories of content. Within each category the user can directly scroll in content or choose a specific area in the left-side local menu. This way, the user are able to keep an overview of where on the site they are located. All dropdown menus are removed which further enhances the possibility for the user to keep track of where they are on the site. Another reason for this global & local menu structure is that it will instantly provide the knowledge of "You are here" on the site - independent of whether the user comes from a Google search into a specific site or through the front page.
At the end, 36 out of 46 menu items either got placed within another or a new category, changed the level in the hierarchy, changed the wording of the title or got integrated or deleted completely.
THE FINAL OUTPUT
Along the way I documented my design rationale and turned it into a 18-pages report that I could present and hand-over to the client.
