Context

This project was developed during a UX/UI design course. We were o team of 2 people and it was proposed that we redesign Berardo’s museum website for both mobile and desktop. Berardo’s museum is a museological space of reference in Lisbon. Hosting the Berardo Collection, the Museum presents the most significant artistic movements from the wentieth century to the present day.

SCOPE

UX & UI design

TIMELINE

3 weeks

TOOLS

Figma

The challenge

DELIVERABLES

User interviews

Affinity mapping

Competitive analysis

Paper wireframes

Mid-fidelity wireframes

Usability testing

Design style guide

Berardo’s museum website is outdated and gets bad reviews from users. We were proposed to restructure the website architecture information and to fully redesign both the homepage and exhibitions page.

Evaluate pain points users face when navigating the current website.
Understand the target/users.
Easy and fast view of the exhibitions page.
Easy understanding of the main activities the museum has to offer

High level goals

Design approach

Discovery

Heuristic Evaluation

Using Jakob Nielsen's heuristics, we did a heuristic evaluation as a way to test Berardo’s museum usability. We found out several pain points on the website that would not facilitate the user’s journey on the website.

Competitive Analysis

We did a detailed competitive analisys of other museum’s websites, analysing both positive and negative aspects. This way we could see what other museum’s websites were doing right and what could be improved to avoid making the same mistakes while implementing elements that already worked.

User interviews

We conducted in-person interviews by reaching out to 7 people who enjoy visiting museums. Each interview took approximately 30 minutes and the questions were open-ended, to make sure people could think out loud and share more details about their habits/expectations when going to a museum. 3 people had visited Berardo’s museum at least once and 4 people had never been there (even though they were aware of it)

• What does the user enjoy the most at a museum.

• How does the user plann a visit to a museum.

• Does the user usually visit a museum website before visiting.

• What does the user expect to find in a museum website.

Interview goals

Affinity diagram

We mapped out user responses with an affinity diagram and grouped them based on needs, motivations and behaviors.

Usability testing

We conducted usability tests on 7 users, we asked them to perform specific tasks and then recorded their interaction with the website. After, we conducted a small interview asking them about their experience.

• Find the current exhibitions.

• Find the information about furute exhibitions.

• Find the tickets prices.

• Find what other events are on the museum.

Tasks asked

Homepage

Findings

• Users can’t understand all menus and become overwhelmed by the quantity of information that is displayed.

• Homepage is too long and visually confusing, users couldn't seem to understand information and quickly got tired of scrolling down.

Exhibitions page

• Users had difficulties finding upcoming exhibitions.

• Couldn’t find the exhibitions’ archive.

Analysing Berardo’s museum website

Define

Problem definition

Our challenge was to redesign the homepage and exhibition page. After conducting user interviews and usability tests we could now understand what were the user’s pain points and wants, allowing us to clearly define what we would resolve in the redesign.

Information architecture

To start developing the Homepage we did 3 options of menu strutuctes and did usability tests with 3 users.

Evaluating Information Architecture

Homepage: hierarchical menu

We did a tree testing before starting the homepage layout design. We presented 3 menus to the users and ask them to perform specific tasks in order to evaluate which option would be better.

Tree testing

Sitemap

Having the results from the tree testing we did a hierarchical diagram of the website representing how pages are prioritized, linked, and labeled in the homepage.

Ideation & Design

Paper wireframes

We started designing the layout of both homepage and exhibitions pages. We design mobile first and then proceed to the desktop version.

Mid fidelity wireframes

We started designing the layout of both homepage and exhibitions pages.

User Interface

Design style guide

Our next step was developing the design style guide: since we designed both desktop and mobile versions, we had to design specific components for each. We maintained Berardo's museum brand identity color: red, having complemented it with a secondary color (black) and a neutral color (beige).

Visual design & final prototype

We simplified the homepage, taking away unnecessary elements and leaving only usefull infomation needed by users.

Homepage

We added a permanent tab bar with a quick access to tickets, localization, search and calendar (of events and exhibitions)

Exhibitions page

• Current and future exibitions.

• Acess to exibitions archive.

• Acess to calendar of events/exhibitions.

We Added (on top of the the tab bar) a permanent acess to the archive and calendar.

• We evidenced both future and current exhibitions, as previous research findings showed us users wanted.

• We reduced the quantities of menus and links the current homepage has, making it so the user doesn’t feel overwhelmed and lost.

Homepage: mobile version

Homepage: desktop version

We opted for a horizontal scroll and added a permanent side menu, with only the necessary links (following what the tree testing results indicated us previously)

We simplified the exhibitions page by taking all the unnecessary elements and by giving an easy acess to what users really look for when they visit this page:

Exhibitions: mobile version

Exhibitions: desktop version

We maintained the permanent lateral menu access, and opted to use a three-line menu. We used this type of menu due to our user’s research findings that was more important to evidence what users want/need when they visit the exhibition page: upcoming and current exhibitions, archive and calendar.