Bridging the online and real-world experience for National Museum of Singapore — A design proposal

I was tasked to pitch for a UX project for National Museum of Singapore (NMS), and the immediate goal was to create a holistic museum experience for visitors by,

  1. improving the ease of access and consumption of content within the NMS website and,
  2. integrating NMS’s online and real-world museum experience.

I took the role of a UX researcher, working alongside Kelly, our account director, and Suet Ning, our designer in a new agency we’ve co-founded called UXonboard. This post documents the process of our undertaking.

Our company logo!

The UX Pitch challenge

Since this is a design proposal, the key challenge was to figure out how to put together an amazing proposal without sacrificing too much of our business resources. To demonstrate that we understand the client’s audience and business well, it will require us to do some groundwork, but at the same time, knowing we have yet to win the account, it would also mean we have to cap the amount of work we intend to cover.

1. Understanding the Brief & Project Planning

After going through the brief in detail, we started planning the activities and timeline for this project. Since we only have 2 weeks, and the focus was to sell our ideas and services, we decided to dedicate 1 full week to create our pitch deck, after completing our user research and solution design. We also created our company — UXonboard, and each team member was assigned a role, which helped to shape our bios and made us feel like we’re part of something bigger!

Snapshot of our team bio

2. Content Inventory & Audit + Competitor Analysis

To get a better understanding of what content is available and how it is organised, we took some time to study the NMS website. We also benchmarked NMS against direct and indirect competitors, which included other museums (both local and overseas) such as the National Gallery of Singapore and Chicago’s Museum of Science and Industry, as well as popular tourist attraction such as Gardens by the Bay. Considering all forms of competition is important because our visitors could potentially visit any place they like, so museums are only a sub category of the possible places to be.

Homepage of NMS’s current website

When we first looked at the NMS website, we couldn’t really find fault with it. It had a clean design, a clear navigation system and a neat layout. It may not be the most attractive website but it was certainly usable. However, after a detailed look in the content, and comparing the website against the competitors, we realised that NMS has much to improve.

Homepage of competitors we’ve identified to benchmark NMS against

One obvious area of improvement was NMS’s navigation. In comparison with National Gallery of Singapore and the Chicago Museum for Science and Industry, NMS had the most number of navigation options. However, when we consider the amount of content NMS has, it doesn’t warrant the need to have that many options. Hence, some items could potentially be clustered to make the navigation more straightforward. This was a finding we had to keep in mind when we design the solution later.

3. User Interview & Usability Test

We regrouped the next day to share our findings on the competitors and also used that as a base to structure our user interview questions.

We set out to interview 7 people who have visited a museum either locally or overseas, in the last 12 months. Of this criterion, we covered both tourists visiting Singapore, and also Singaporeans aged between 25–40. This were the target audiences specified by the client and he was also particularly interested to attract those who are not currently engaged with learning about Singapore’s history.

Our interview covered 4 key areas, and ended with a short usability test. Here is a summary of our research coverage:

  1. General museum visit behaviour
    Covers frequency of visit, motivation to visit, who they go with, factors they considered when visiting a museum, and what they did in their last visit, particularly if it involved any digital interactions in the museum.
  2. Information search behaviour and museum mobile app usage
    Since one of our goal is to make the website more usable, we had to understand what information users seek, where they search, devices used to conduct search, and if they visit the museum website. We also asked if users have ever used a museum mobile app, and if so what they did on the app and their satisfaction with the app content.
  3. National Museum of Singapore visit (if applicable)
    We got a rough gauge on how many visitors had been to NMS in the last 12 months and got them to share their likes and dislikes, and overall satisfaction of their last visit to the museun.
  4. General likes & dislikes of museum visits + Improvements
    We got users to recall their past museum visits and share examples of good and bad experiences, and also what improvements they would like museums to adopt if they had a chance to change things.
  5. Short usability test
    We gave users a couple of tasks to find basic vistation information (e.g. visiting hours, admission price, how to get to museum), as well as information specific to current exhibits (e.g. find “Story of the Forest” event and its location in the museum). The number of completed tasks would determine how usable the current website is and if a major revamp of the website is required.

Due to time constraints and respondent availability, I interviewed my users remotely via Skype.

Remote interview with one of my user as we went through a usability test task

4. Affinity Mapping & Persona creation

To make sense of the user findings, we used affinity mapping to identify the key patterns. We wrote down our findings on post-it notes for each user and pasted them on the wall before taking the next couple of hours to sort them out.

We wrote down key points for each respondent and rearranged them by patterns

From the findings, we identified 2 personas — Ryan, the casual explorer and Mandy, the museum enthusiast.

We also identified Ryan as the primary persona as he represents the key segment that the client is interested in — he visits the museum occasionally and isn’t actively engaged in learning about Singapore’s history.

Ryan, our primary persona
Mandy, our secondary persona

5. Feature Prioritisation and Initial Sketching

In the remaining tasks, we focused on designing our solution for Ryan. We listed the features that would best meet Ryan’s needs, and used the feature prioritisation matrix to map out the key features to create (see focus quadrant), based on its impact to both the users and the business. We had to further streamline the list because it currently includes features that affect both online and offline touch points. Since building the website is the foundation to create the holistic experience, we prioritised features that affected the website as the main focus in our prototype.

Streamlining features to prioritise

After aligning everyone on what features to work on, we went home to do some initial sketches and prepare to share with each other the next morning. Based on my study of the best practices from competitors, I roughly sketched out my solutions on paper.

Rough layout sketches

6. Wireframing, Prototyping & Revised Usability Tasks

We discussed our sketches the next day and agreed on the final designs to create. Kelly and Suet Ning took on the role to create the wireframes and prototype in Axure while I work on the revised usability test and presentation flow.

In the revised usability test, we had to test out some of the new features we have introduced such as recommended exhibits to visit with friends, bookmarking events and planning the museum itinerary. These new features were introduced to help Ryan find relevant exhibits to explore quickly and also to navigate the museum easily. We also added a couple of questions to find out if our prototype made it easier to locate information and if the layout was clear enough.

Because we had a clear idea what to create, the wireframe and prototype were out in a few days. The interactions created were based on the key features we wanted to demonstrate so we prioritised those pages as a priority.

Homepage of NMS — before and after comparison

7. Usability Testing & Iteration + Contextual Inquiry

After our prototype was out, we visited the National Museum of Singapore to get users to test out our prototype. We also took the first couple of hours to get a sense of the actual museum experience and observe visitors in the museum before seeking out users to participate in our usability test.

Some highlights from our museum visit

From this museum visit, we learnt a few things:

  1. NMS has an existing mobile app but it isn’t visible to most
    Strangely, NMS does not showcase its mobile app on the website nor in the museum so most visitors aren’t aware of the mobile app. When we registered ourselves as visitors, the front desk staff also did not mention anything about the mobile app.
  2. NMS’s mobile app has potential to do more than just providing “alerts”
    The NMS mobile app currently has 2 main features: It has a translation feature that allows users to translate the exhibit copy from English to Malay, Chinese or Tamil. It also has “beacons”, which is an indoor navigation system that alerts users on nearby exhibits. However, the alert feature was a disappointment because the end display was a strange looking code consisting of numbers and text, and we had no clue what to do with it.
  3. NMS’s exhibitions and installations are really fun but this isn’t quite reflected in the website
    Perhaps one of the most amazing discovery for us was that NMS isn’t a typical boring museum — it is fun, modern, and has plenty to offer. We could do much more to bring out these amazing experiences and convey the real-world experience online.

In the later hours, we found some users and got them to participate in our usability test. From the session, we uncovered a couple of things to fix and went back to iterate on our design.

Usability testing in action!

8. Some Learnings & Final thoughts

Since this is a pitch, I had to make sure that we were able to convince the client on our higher-level solution and get them to choose us as their agency. Hence, while my team mates are creating the prototype, I made sure we can create a deck that can persuasively convey our central idea. Here are a couple of learnings I had while working on the presentation:

  1. Planning the presentation is important as it lets you clearly see what are the priorities of the project
    I mapped out a detailed presentation flow while my team mates worked on the prototype, so we have better control over both the content and time. After planning the presentation flow in detail, I realised the prototype only constitutes 15% of the total time allocated. However, we’ve spent nearly 4–5 days of our 2 weeks on prototyping. We then had to shift our focus back to the remaining parts of the presentation so it is important to not lose track of other things we haven’t completed.
  2. Selecting the right visuals is important to amplify your central idea Because this is a pitch, being able to describe your central idea is critical to capture the client’s attention. Our challenge was to figure out how to best communicate that through our presentation. Particularly for the solution, we needed a strong visual to amplify the idea we were trying to convey, and we realised the triangle, linking the relationship between the website, the mobile app and the real-world experience was perfect in conveying the central idea.
Our proposed solution — clearly linking how the website and mobile app come into play to create a holistic museum experience

Being able to succinctly and persuasively convey the central idea is perhaps the hardest part in this project. We had to distill the key content and choose the right words to carefully craft the pitch. I think writing out the presentations helped me better understand how each content relates to each other and also allowed me to plan the right visuals to illustrate the key points.


You can find the prototype and presentation we’ve created in the links below.

We’ve bulit a responsive website for this project. 
You can access the prototype link here:
http://qzo57r.axshare.com/#c=2


How time flies and now I am on to my final project! I’ve been tasked to work on a super interesting project for a social enterprise, so stay tuned if you are keen to find out more!

Like what you read? Give June Yong a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.