Genovia Art Museum

responsive website

10 Minute Read

Role

Product Designer (Independent Project)

Timeline

Apr - May 2024

Outcomes

Responsive Website Information Architecture Branding

A responsive website for the Genovia Art Museum. This project's aim was to 1. Give detailed and updated information in a variety of areas and 2. Outline clear and secure processes for ticket purchase and donations. The second project completed as part of the Google UX Design course. Inspired by The Princess Diaries (2001), the goal of the museum is for it to be a space for celebrating the history of Genovian art as well as a place for the people of Genovia to share and enjoy their work.

Genovia Art Museum

responsive website

10 Minute Read

Role

Product Designer (Independent Project)

Timeline

Apr - May 2024

Outcomes

Responsive Website Information Architecture Branding

A responsive website for the Genovia Art Museum. The second project completed as part of the Google UX Design course. This project's aimed to: 1. Give detailed and updated information in a variety of areas and 2. Outline clear and secure processes such as for ticket purchase and donations. Inspired by The Princess Diaries (2001), the museum aims to celebrate Genovian art and offer a place for the people of Genovia to share and enjoy their work.

Genovia Art Museum

responsive website

10 Minute Read

Role

Product Designer (Independent Project)

Timeline

Apr - May 2024

Outcomes

Responsive Website Information Architecture Branding

A responsive website for the Genovia Art Museum. This project's aim was to 1. Give detailed and updated information in a variety of areas and 2. Outline clear and secure processes for ticket purchase and donations. The second project completed as part of the Google UX Design course. Inspired by The Princess Diaries (2001), the goal of the museum is for it to be a space for celebrating the history of Genovian art as well as a place for the people of Genovia to share and enjoy their work.

Genovia Art Museum

responsive website

10 Minute Read

Role

Product Designer (Independent Project)

Timeline

Apr - May 2024

Outcomes

Responsive Website Information Architecture Branding

A responsive website for the Genovia Art Museum. This project's aim was to 1. Give detailed and updated information in a variety of areas and 2. Outline clear and secure processes for ticket purchase and donations. The second project completed as part of the Google UX Design course. Inspired by The Princess Diaries (2001), the goal of the museum is for it to be a space for celebrating the history of Genovian art as well as a place for the people of Genovia to share and enjoy their work.

Home

What's On

Plan Your Visit - Ticketing

Plan Your Visit - Getting Here

Plan Your Visit - Floor Plan & Facilities

Plan Your Visit - Accessibility

Plan Your Visit - FAQs

Partner & Support - Donation

Partner & Support - Donation Form

Partner & Support - Membership

Partner & Support - Host with Us

Partner & Support - Careers

Partnter & Support - Contact Us

Case Study Contents

Understanding

Designing

Refining

Reflecting

Users

A study of the National Museum of Liverpool's museum website highlighted the importance of understanding museum website users and their motivations in the effective design of their online experiences. They found that museum website users were:

Table showin 23% experts and 77% general population

and categorised them into groups based on their motivations

magnifying glass emoji

Explorers

personal curiosity

camera emoji

Experience Seekers

see and experience a place

palm tree emoji

Rechargers

contemplative or restorative experiences

handshake emoji

Facilitators

helping others find what they need

teacher emoji

Professionals / Hobbyists

specific knowledge-related goals

Therefore, I based my user personas to include people in these groups. However, as this space is also for Genovian artists to share their work, I included Katie, a local artist:

Melissa Profile

Melissa Ngyuen

Explorers (Magnifying Glass Emoji)
Experience Seekers (Camera Emoji)
Rechargers (Palm Tree Emoji)
Julien Profile

Julien Rodriguez

Facilitators (Handshake Emoji)
Experience Seekers (Camera Emoji)
David Profile

David Reynolds

Facilitators (Handshake Emoji)
Professionals / Hobbyists (Teacjer Emoji)
Experience Seekers (Camera Emoji)
Katie Profile

Katie Mtonga

Professionals / Hobbyists (Teacjer Emoji)
Facilitators (Handshake Emoji)
Melissa User Profile

Opportunities

Following these users’ journey maps, I explored their potential activities, goals, needs, and challenges regarding navigating the museum.


I then grouped those challenges together (red) along with ideas for how I could meet those needs (yellow).


This helped me identify the major components of museum websites and opportunities to meet user needs:

GIF: User Journeys to Opportunities

Competitive Audit

I also did a competitive audit of other museum websites, focusing on how they tackled these problems and how they organised their sites.


I took a lot of inspiration from many of these sites as I wanted to keep things familiar for users and used events and exhibitions from these museums in my designs.

M+ Museum Logo
Hong Kong Palace Museum Logo
The Met Logo
The Vatican Museum Logo
MoMA Logo
HKMOA Logo
Louvre Logo
The British Museum Logo

Case Study Contents

Understanding

Designing

Refining

Reflecting

Sitemap

Using the competitive audit and opportunities, I planned the sitemap and website pages.


At first, I divided the site into four parts under common sections that I'd found on other museum websites: ‘What’s On’, ‘Plan Your Visit’, ‘Learn & Connect’, and ‘Partner & Support’.


However, after some feedback I made some changes to keep all event related information together.

GIF: Opportunities to Site Map

Branding

I wanted the branding of the museum to reflect elegance and regality to honour the Queen while celebrating the art and culture of the Genovian community.

Colours

Drawing inspiration from the Genovian flag and keeping the branding themes in mind, I chose gold and purple as accent colours.


For the website, I went with black, white, and shades of grey to keep things elegant and minimal, similar to the Louvre and the British Museum.


At first, I used the gold for both the logo and CTAs but wanted to differentiate between them and switched the CTAs to the purples.

GAM Colour Palette

Typography

I chose Marcellus, a flared serif. I liked how clean and elegant it is. However, it only has one weight and I only realised later how crucial having different font weights was. Despite that, I really liked the font so for hierarchy, I used different font sizes.

Iconography

For most of the designs, I used Google’s Material Design system icons. However, where there weren’t any appropriate ones, such as for the venue events and membership types, I created custom icons that fit within the Material Design system style by basing them on existing icons.

Icons for membership types
icons for venue events

Logo

For the logotype, I went with Alice, an artistic serif. I then took shapes from the Queen’s crown to design the logomark.

GAM Logo

Detailed & Updated Information

Event Details

Since most people are on this website to plan their physical visit*^, I gave a lot of though to the Event Details. I took the very insightful feedback of keeping all event-relate information together. Again, I kept the main CTA and Set information: when, where, and what immediately available near the top.

Homepage

Because most people use museum websites to plan their physical visit^, I gave a lot of thought to the homepage / landing page. Therefore, first CTA I provided (besides the header) was for visitors to plan their visit. I then made sure all basic information was clear. Additionally, to ensure information is always up-to-date, I added a calendar for information specific to the day.

GAM Homepage Features

Usability & Accessibility

Heirarchy and Mixed Media

I wanted to make sure that the website as a whole, was accessible and user-friendly so

I tried to keep the designs consistent and familiar with clear visual hierarchy.


In order to present information in a variety of manners, I used icons, images, and diagrams as well as text. I also made sure that layout, fonts, and contrast followed the WACG.

Narrowing the Search

Users can find information via multiple channels such as the search bar, header menu, and footer. They can also narrow their searches on pages through filters. The ‘Help Banner’ on every page also provides links to the FAQ page and the museum contact information specific to the page.

Case Study Contents

Understanding

Designing

Refining

Reflecting

Users

A study of the National Museum of Liverpool's museum website highlighted the importance of understanding museum website users and their motivations in the effective design of their online experiences. They found that museum website users were:

Table showin 23% experts and 77% general population

and categorised them into groups based on their motivations

magnifying glass emoji

Explorers

personal curiosity

camera emoji

Experience Seekers

see and experience a place

palm tree emoji

Rechargers

contemplative or restorative experiences

handshake emoji

Facilitators

helping others find what they need

teacher emoji

Professionals / Hobbyists

specific knowledge-related goals

Therefore, I based my user personas to include people in these groups. However, as this space is also for Genovian artists to share their work, I included Katie, a local artist:

Melissa Profile

Melissa Ngyuen

Explorers (Magnifying Glass Emoji)
Experience Seekers (Camera Emoji)
Rechargers (Palm Tree Emoji)
Julien Profile

Julien Rodriguez

Facilitators (Handshake Emoji)
Experience Seekers (Camera Emoji)
David Profile

David Reynolds

Facilitators (Handshake Emoji)
Professionals / Hobbyists (Teacjer Emoji)
Experience Seekers (Camera Emoji)
Katie Profile

Katie Mtonga

Professionals / Hobbyists (Teacjer Emoji)
Facilitators (Handshake Emoji)
Melissa User Profile

Opportunities

Following these users’ journey maps, I explored their potential activities, goals, needs, and challenges regarding navigating the museum.


I then grouped those challenges together (red) along with ideas for how I could meet those needs (yellow).


This helped me identify the major components of museum websites and opportunities to meet user needs:

GIF: User Journeys to Opportunities

Competitive Audit

I also did a competitive audit of other museum websites, focusing on how they tackled these problems and how they organised their sites.


I took a lot of inspiration from many of these sites as I wanted to keep things familiar for users and used events and exhibitions from these museums in my designs.

M+ Museum Logo
Hong Kong Palace Museum Logo
The Met Logo
The Vatican Museum Logo
MoMA Logo
HKMOA Logo
Louvre Logo
The British Museum Logo

Case Study Contents

Understanding

Designing

Refining

Reflecting

Users

A study of the National Museum of Liverpool's museum website highlighted the importance of understanding museum website users and their motivations in the effective design of their online experiences. They found that museum website users were:

Table showin 23% experts and 77% general population

and categorised them into groups based on their motivations

magnifying glass emoji

Explorers

personal curiosity

camera emoji

Experience Seekers

see and experience a place

palm tree emoji

Rechargers

contemplative or restorative experiences

handshake emoji

Facilitators

helping others find what they need

teacher emoji

Professionals / Hobbyists

specific knowledge-related goals

Therefore, I based my user personas to include people in these groups. However, as this space is also for Genovian artists to share their work, I included Katie, a local artist:

Melissa Profile

Melissa Ngyuen

Explorers (Magnifying Glass Emoji)
Experience Seekers (Camera Emoji)
Rechargers (Palm Tree Emoji)
Julien Profile

Julien Rodriguez

Facilitators (Handshake Emoji)
Experience Seekers (Camera Emoji)
David Profile

David Reynolds

Facilitators (Handshake Emoji)
Professionals / Hobbyists (Teacjer Emoji)
Experience Seekers (Camera Emoji)
Katie Profile

Katie Mtonga

Professionals / Hobbyists (Teacjer Emoji)
Facilitators (Handshake Emoji)
Melissa User Profile

Opportunities

Following these users’ journey maps, I explored their potential activities, goals, needs, and challenges regarding navigating the museum.


I then grouped those challenges together (red) along with ideas for how I could meet those needs (yellow).


This helped me identify the major components of museum websites and opportunities to meet user needs:

GIF: User Journeys to Opportunities

Competitive Audit

I also did a competitive audit of other museum websites, focusing on how they tackled these problems and how they organised their sites.


I took a lot of inspiration from many of these sites as I wanted to keep things familiar for users and used events and exhibitions from these museums in my designs.

M+ Museum Logo
Hong Kong Palace Museum Logo
The Met Logo
The Vatican Museum Logo
MoMA Logo
HKMOA Logo
Louvre Logo
The British Museum Logo

back to section menu

©2024 Tamara Sher. All Rights Reserved.

Ready to work together?

Let’s do this!

click email to copy

download icon

©2024 Tamara Sher. All Rights Reserved.

Ready to work together?

Let’s do this!

click email to copy

download icon

©2024 Tamara Sher. All Rights Reserved.

Ready to work together?

Let’s do this!

click email to copy

download icon

©2024 Tamara Sher. All Rights Reserved.

Ready to work together?

Let’s do this!

click email to copy

download icon