For Art’s Sake!

UXDI6 Project 3: Redesigning the National Museum of Singapore’s mobile app

So group projects has begun and my first team members were Rachel and Jasmine. The task was to redesign an existing mobile app and because of our common interest in arts and going to the museums, we have chosen the app from National Museum of Singapore.

The Initial Stage

While we started toying with the app together as a team, we realised that the user flow was not entirely clear. There were several affordances that needed further exploration in order to understand what they were and the way that the content and navigation were organised, we couldn’t tell where to start, to go next, or even how to go back without having to use the hamburger button. There was also a swipe right microinteraction that reveals a list of menu which was exactly what the hamburger menu does.

Visitors using this app may have different needs when they visit the museum. A first-timer to the museum may want more information on how to use the self-guided tour while a regular patron would want to know how they can be reminded of the upcoming rolling exhibition.

The home page, hamburger menu and the visitor’s info page: the over use of thumbnails for almost every content contributes to the confusion when navigating around the app i.e. Do they really need an image of people listening to a telephone to indicate feedback or contact?

In order to fully understand some of the features such as the Beacon and the Look Up Code we decided to go to the museum to try them out.

Images taken from our contextual research at the National Museum of Singapore

While we were at the museum, we tested the app, conducted interviews with some visitors with questions prepared earlier, followed a tour guide to familiarise our route through an exhibition and contextual inquiry with the staff and gallery assistants. To our surprise, most of them did not know how to use the app, not even the front desk! That was our first indication of our objective to find a solution to the problem.

“I’m not so sure (on using the app), actually you shouldn’t use the app, what I know is, you should use our website.”

The Research Process

While arranging for more one-to-one interview with museum goers, we continued our research process by drawing up the content audit and current user flows of the app. Part of how we learned about National Museum of Singapore app’s user flow was through the wireframes.

Competitive Analysis
We performed a competitive analysis on other museums which have mobile app — Asian Civilisations Museum, National Gallery of Singapore, Rijksmuseum from Amsterdam and the Louvre museum from Paris. We found out that apart from the Louvre museum app, the others have more clearer user flow compared to that of National Museum of Singapore’s and we concluded that the best one being the Rijksmuseum app.

Screenshot taken from Asian Civilisations Museum, National Gallery of Singapore and Louvre museum in Par

The Rijksmuseum’s mobile app has a much clearer user flow and well organised content and easy-to-use navigations — almost basic to say the least but still easy to use. We made comparison to how Rijksmuseum demonstrated the user on how to use their self-guided tours and made our reference from it.

Screenshot taken from RIJKS museum in Amsterdam

Affinity Mapping
With more information gathered from additional transcribed interviews of several museum goers, we began the affinity mapping process. We first sort the information into the interviewee’s pain, pleasure, behaviour and context and took many hours later to come up with the final “I” essence as some information could sway to either grouping.

I am not aware of the app and/or its benefits to me.

The next step we took was generating our personas, their goals, needs, pains and their story when using the app. We finalised our personas into two categories — a tourist and a regular local museum goer. While our intention was to focus on one persona, our decision of coming up with the second persona was to ensure that our redesign was holistic and it’s components clearly defines the difference between user flows.

Image taken from drawing up persona #1: Kim Hye-Sun, the world explorer who speaks very little english
I face difficulties in fully understanding the museum due to language barriers.

Customer Journey Map and Feature Prioritisation
With the personas created for tourist Kim Hye-Sun; a world traveller who speaks very little English and Celine Wong; an art and history enthusiast, we proceeded with Kim’s customer journey mapping. It began from the very first time she came across a tourism ad in Korea to the time she reflected her journey as she gives reviews her visit to the National Museum of Singapore. While doing the features prioritisation, we discovered that the improved app not only provide better experience for the visitors but could also have greater business impact on their online awareness though reviews. That was when we knew that we were on the right track!

Images taken from drawing up persona #1:’s customer journey mapping and feature prioritisation

The Design Process

With the IA that we have came up, we took them into consideration when we redesign the app. We introduced new features into the app not only to make it easier to use but also provide an enhanced user experience for the first-time museum goers and tourist alike. Ultimately, we would want to redesign the app that is not only useful and but offers interactive functions that the museum’s website and brochures couldn’t.

The Design Studio
Before we proceed with our design production, we conducted a few rounds of design studio sessions. Picturing different scenarios of each persona and their goals when using the app, each of us started to sketch the type of features we could come up with. It was fun to see how each of us came up with different features of the same scenario. And interestingly, we all got similar ideas towards the end of our design studio sessions.

Images taken from our Design Studio sessions

The New User Flow and Wireframes
In order to have a clearer picture of how the interface can be designed, we needed to come up with a simple user flow and wireframes that meets all the criteria of our persona’s goals and needs — from how the content should be organised and flow, to the microinteractions created to navigate each step of the flow with ease..

Usability Testing on Wireframes
While designing each feature in stages on wireframes, we concurrently conduct usability testing for each scenario. We first started with Kim’s journey on first using the new redesigned app. While we couldn’t test it in Korean, we assimilate the situation in English on a English speaking foreigner. The feedback we received was good but the flow wasn’t entirely perfect. As we were constrained with time, we took the feedback into consideration and revising a few components in our prototype.

The Visual Design and Mirointeraction
We created a UI style sheets that did wonders along the process and it helps put together a cohesive look and feel to the app and also speeded up production process.

The process of coming up with the perfect prototype that every team member had in mind can be a daunting one. One of our hurdle was showcasing the Beacon feature clearly but managed to put together the right flow after several revisions on the Sketch artboards. We removed the beacon feature from the main navigation bar and placed them onto the pages where the beacon function would be actually needed. We decided to remove the hamburger menu and replaced it with the Information button which carries all the information that the visitors need to know. We also needed to make the account page more enticing and sustainable. That way, the user will be able to customised and personalised the information as appose to the generic information that can be found from the museum’s website.

So here’s our reveal!

Future Iteration
Due to the time constraints and resources, we came up with features to include another persona who would use the app on a regular basis. These include bookmark features and the ability of syncing the museum’s event dates to the users personal calendar which can be customised according to the choice of exhibitions or events happening in the museum.

Shout out to my very talented team members Rachel and Jasmine for your great contribution to this project. I have learned so much from both of you!