Designing a website for a local museum— a UX case study

Ghadi K
6 min readJul 24, 2022

--

I’m going to showcase all the steps you need to design a website for museum to fit visitor needs

Almadinah Almunawwarah City

At Tuesday @rahaf & Nouf alghamdi announce our project 3 ideas & groups and let met tell I was shocked by the project ideas and the method used to divided groups.

Note: this project Is part of Misk UX Immersive Program.

It was RANDOM topics selection & my group got Dar AL Madinah Museum in Almadinah Almouarah in Saudi Arabia.

Almadinah Almunawwarah City

1. KNOW THE MISSION

I collaborate in this project with (joud, hussam, noor, azza and ME :D).

Our goal is to create an user experience for Dar AL Madinah Museum.

We started by doing general research so let me tell you what we found:

Overview

museum owner abdulaziz kaki & side of museum content

A private museum established 1983 and owned by Abdulaziz Kaki that shows the history of Masjid Alnabawi, Islamic civilization, and Madina’s urban culture visited by 100s of thousands every month.

Location & Nearby Locations

map show museum and places around it

Located in (KEC) 15 minutes away from Masjid Alnabawi by car.

Some Places Nearby Museum:

  • House of Mariah Qibtiyah (RA)
  • Garden of Salman al Farsi
  • Masjid Ijabah

Important Information About Museum

Important Information About Museum

Structure

The museum includes three main halls, each hall exhibits Al-Madina heritage and history featuring different archaeological collections, visual galleries and rare images that related to Al-Medina. also there is garden with seating area & shops that sell gifts or local refreshments.

Contents

The museum displays big collection of hand-built models that shows you old landmarks of the city.

The exhibitions at the Dar al-Madinah Museum, include collection of visual galleries and rare photographs regarding the heritage and history of the city of al-Madinah featuring different eras.

Souvenirs Shops

museum gift shop

Museum collaborate with Historians to document Almadinah history[encyclopedia — books] and sell it in museum or online to spread knowledge.

Media and Reviews

Museum has good reputations and visitors share their experience online through social media, blogs post and travel websites.

Business Needs

  • Educate people about almadinah history and culture.
  • They need to gain customer trust to encourage them to visit the museum.
  • Provide one source for visitors to find all info about museum.
  • Increase the number of visitors.

2. USER RESEARCH

Screener & Interviews

We set our goals and move on to spread our screener survey and chose suitable candidate.

Screener Goals: [62 responses, analysis the survey]

  • Know who are interested in history & experienced visiting a museum.
  • The persona of our users .

Interview Goals: [14 users analysis the answers using affinity map]

  • Understand their planning behavior and motives to visit museums.
  • What are the attracting points to them that make them visit a museum.
  • What they do inside the museum & things they like, dislike or need.
  • Their experience in visiting museums & traveling style (solo or in group).

Affinity Map

project synthesis affinity map

Screener & Interviews Insights:

Majority plan their trip before traveling & stay in place for 1:30–3:30 hours ,need to know important info before booking and usually book from museum websites or buy it on spot like to go with group to discuss history.

Also they struggle with transportation, don't like missy experience, want easy online booking with digitalize tickets(QR code), buy souvenirs.

Persona

project persona

3. C&C ANALYSIS

Global & local competitors

list of names for our competitors
5 competitors we chose to compare features

C&C analysis & Insights

the method we used to represent features

C&C Insights Global only:

  • Online booking.
  • Interactive museum map (3D Maps).
  • Audio guide or an app for the museum to interact with.
  • Displaying food and drinks information.
  • Exhibitions information.

C&C Insights Both Had—Global & Local:

  • planning a visit page.
  • Showing museum story, their mission, vision, events, social media, announcements.
  • Sharing a contact us section.
  • Mention tour guide info[languages, times...]

Features Analysis 2x2 Matrix

So here are the features we would like to focus on must have section and because we manage our time well we added some features from should have & could have section as well.

4. PROBLEM & SOLUTION STATEMENT’S

Scenario

Asma’s family decided to travel to AlMadinah AlMunawwarah. Asma hasn’t been to Madinah before. She was quite worried about traveling without proper preparation but her sister encouraged and promised that they will have fun based on her friend review on museum, so she visited the museum.

User Journey

Asma User Journey

Now its time to show you how the current situation is and what Asma has to went through to visit the museum.

I designed this user journey based on main 5 stages and describe exactly what Asma went through to visit museum and how inconvenience it was for her.

Storyboard

Now let see how our solution will help to improve Asma experience visiting the museum.

Storyboard

I draw the second 3 frames to showcase what is the current situation, Asma plan to visit Almadinah with her family and hear from her sister that her friend just went there and enjoy the dar almadinah museum then she open her laptop to gather info & book a ticket from museum website and happily visit the museum.

5. DESIGN

User Flow

We want to provide to Asma the info she need in discover page and online booking with different payment option(she either pay online or in the museum), get QR code with here ticket.

Site Map

Here is the main pages we focus on, the [#StoryandFact] is a hashtag that show case a story from almadinah history to educate people about almadinah history since this one of the main goals for museum.

Site Map

Branding & Design System

Branding
Branding & Design System

Annotated Wireframe

Annotated Wireframe

6. USER TESTING & DESIGN ITERATION

We test and iterations 3 times with 19 users using Maze — Observe & Think aloud.

The Testing Tasks was:

  • Explore the website for museum info.
  • Book tickets with the specified info.
  • Cancel your booking
Maze testing [fail]

We didn't get any good feedback so we didn't do any design iteration but we notice how all testers where able to access our buttons & pages easily.

2nd user testing and 1st design iteration

We did 1st design iteration then conduct a 3nd testing .

3rd testing and 2nd design iteration

7. PROTOTYPE

prototype

Here is our mockup demo:

8. FUTURE ENHANCEMENT

  • Provide phone view.
  • Enhance shop design.
  • Add media gallery.
  • Interactive museum map.

THANK YOU!!! for reading till this point I really worked very hard on this project it was challenging in a good way & help me improved my skills in UX.

Hope you learn something & would like to hear your feedback :D

--

--

Ghadi K

I love a little of everything & try everything, I like writing about my unique experiences