—ROLE
UI/ UX Designer,
Researcher
— DURATION
4 Weeks
— TOOLS
Figma, Miro, OW
Problem:
New visitors to the National Gallery's website often feel frustrated due to confusing navigation, unclear text, and difficulty finding popular artworks. The search function is also inadequate. These issues negatively affect the user experience and may cause visitors to lose interest. A more intuitive and well-structured layout is needed to address these problems.
Goal:
The goal of this project is to improve the organization of the National Gallery's digital collection. We aim to make it easier for visitors to find artworks, artist information, and other relevant content on the website. This will enhance the experience for new users and help art enthusiasts access the museum's resources more efficiently.
Target Audience
Primary: New visitors and tourists
Secondary: Receptionist at the National Gallery
Exploration
Our project start involved thorough research of the National Gallery’s current website. This provided us with insights into user needs and opportunities for improvement. We discovered, for example, that the filter for artists/producers was not in alphabetical order, which inspired the direction for the next steps.
Understanding the target audience
To improve the digital collection, we first identified the target audience by conducting a quantitative survey tailored for this purpose.
After distributing a survey through social media, it became clear that many people had not visited the National Gallery’s website, and the majority showed limited interest in art. As a result, we decided to focus on creating a more user-friendly experience for new visitors and tourists. We believe that by making the solution easier to use for those less familiar with art, it will also enhance the experience for those who are already interested in the field.
Museum Visit
We conducted in-depth interviews with the target audience, including a receptionist, a staff member from the National Gallery’s shop, and a student. The latter two had no prior experience with the website. This insight was used to create personas representing the target audience.
The importance of user interviews
We have learned that careful preparation before an interview is crucial for obtaining the right answers. An important insight came when we realized the need to interview a student while working on personas. This emphasized the importance of gathering sufficient insights, as the success of the entire project depends on understanding the users we are designing for.
More insights
Our observations at the National Gallery provided valuable insights into how wall colors can enhance artworks. This inspired us to consider automated color suggestions for the digital collection.
We also conducted a competitor analysis of the Munch Museum’s website and found inspiring features, including collection filtering, sorting options for search results, a ‘See more’ option for details, and thematic categorization such as nature, interior, and landscapes.You can you this place to talk a little bit about the image on the side.
User Yourneys
We created user journeys for two personas to identify pain points, expectations, and experiences with the current solution. From this, we learned to understand how users interact with the service over time, as well as their experiences, needs, and emotions throughout the user journey.
Key insights:
- Too much irrelevant information, excessive text
- Desire for categories, such as periods or art styles
- Simpler filtering
- Keyword search
- Filtering by popularity
- Easy navigation with all features in one place
You can you this place to talk a little bit about the image on the side.
User Yourney 2
Card Sorting
With the aim of understanding how people categorize artworks and how they name these categories, we conducted a card sorting test. The analysis of the test reveals the following:
- 45 participants
- On average, each participant created 7 categories
- Participants took an average of 6 minutes and 34 seconds to complete the test.This indicates that we estimated the duration quite well, with an expected time of 5-10 minutes.
Only 42% (45 out of 87) completed the study. This was likely due to the fact that card sorting did not work on mobile, and we didn’t realize this until after the test had been sent out.
Generally, participants placed artworks into a wide range of categories (typically 25 to 50 per artwork). You can you this place to talk a little bit about the image on the side.
Treejack
We also conducted a Treejack test. The goal was to assess how well the menu navigation of the current solution worked. The analysis of the test reveals the following:
- 32 participants
- Less than 50% were able to complete the task on their first attempt.
- Task 2 (artworks in the collection), Task 3 (exhibition archive), and Task 4 (my profile, log in) had poor results, with Task 3 performing the worst with a score of 1.
No one was able to find ‘My Profile.’ This may be because the National Gallery’s website has both ‘My Profile’ and ‘My Page,' with the latter being easily accessible in the menu. The fact that we didn’t specify that we didn’t want 'My Page’ in the task could have affected the results.
- 15 out of 47 participants did not complete the study. This could be due to some of the tasks being too challenging, despite the option to skip tasks.
- It was clear that some participants were systematically clicking through the menu to find the correct endpoint.
Crazy Eights
We used the Crazy Eights exercise to quickly capture ideas on paper. The exercise involves spending one minute sketching an idea before immediately moving on to the next, filling a total of eight frames. The goal is to encourage idea generation without self-criticism, as even less realistic ideas can lead to valuable insights.
Through this process, we decided to implement a filtering function on the left side of the website, allowing users to choose what they want to see. We also opted to showcase “Most Viewed," "Exhibitions," and "The Entire Collection” on the homepage of the digital collection.You can you this place to talk a little bit about the image on the side.
Information Architecture
To better understand the current solution, we created a sitemap of the existing website. We discovered that the site is highly complex, with a vast amount of information that needs to be structured in a logical and intuitive way for a broad audience.You can you this place to talk a little bit about the image on the side.
Excisting solution
Our Solution
We then created an overview of the site as it would appear in our solution. Note that we only included the path from Nasjonalmuseet’s main page to the collection and its navigation from there. This was done to focus on the aspects we actually modified, as our work centered on improving the collection.You can you this place to talk a little bit about the image on the side.
Low- Fidelity
We then started working on a low-fidelity prototype, focusing only on the pages needed to test specific features. In hindsight, we should have created a more complete prototype, as the limited navigation affected the user testing experience. Navigation is a crucial part of information architecture.
We tested the prototype on three participants from our target group. Below are some of the improvements we made based on the user testing results.You can you this place to talk a little bit about the image on the side.
High- Fidelity
After revising the low-fidelity prototype, we began working on the high-fidelity version. We had already decided to adhere to Nasjonalmuseet’s visual profile, allowing us to focus our resources on improving the information architecture and user experience for our target audience.
In the high-fidelity prototype, we created a more complete version to ensure smoother navigation between pages and to better visualize the information architecture for both the client and participants in upcoming user tests.You can you this place to talk a little bit about the image on the side.
Our Process
What have we learned from this collaboration?
- Regular meeting times and standups can improve efficiency.
- Create a more detailed plan for work structure.
- Organize digital meetings better and make them more efficient.
Next project->