Designing an app for the Kröller-Müller museum

Getting started

After 8 weeks of intense design boot camp at the Codaisseur design academy, it’s time for my final project.

I decided to do my design for The Kröller-Müller museum. It has always been a favourite of mine. Their sculpture garden is one of the largest in Europe, you can enjoy both sculptures and nature. Distributed throughout the garden are over 160 sculptures by iconic artists, from Aristide Maillol to Jean Dubuffet, from Marta Pan to Pierre Huyghe.

I found out they have a very nice and informative website, but they don’t have an app. When visiting you get a map of the garden. There is no aditional information about sculptures or artists. beside them is only a small sign with the name of the artist and the artwork. If visitors want to know more about it, they have to go the website and search for information, if any is available. I called them I asked about signage in the garden. There was none, they said, only a paper map.

Let’s do the groundwork first

I wanted to know more about the visitors of the museum and what their target group is.

(description from ‘Activiteitenplan Culturele Basisinfrastructuur 2017–2020’)

At first I was a bit apprehensive to design a digital product for this core target group. But I’ve learned not to asume things and did the research. Reading article after article about the rapid increase in smartphone use among this demographic, an app is something to consider.

From marketing charts

Above graphs show that most of the older generations (Gen X and Baby boomers) and thus the focus group of the Kröller Müller are using a smartphone and that they’re using them for things other than calling people. 77% are familiar with navigation apps and 62% use it to get information and news. I think an app might be a good solution for the problems I stated before.

Competitor analysis

I wanted to know how other sculpture gardens and parks compared to the Kröller-Müller museum. I found a variety of options for people who want to see a lot of sculptures in one place. Only Middelheim Museum in Antwerp has more artworks in their and it’s free.

Radar chart with competitor comparison

A SWOT analysis is a simple but useful framework for analyzing the museum’s strengths and weaknesses, and the opportunities and threats that it might face. It helped me focus on their strengths, minimize the threats, see what opportunities there are.

SWOT analysis

Survey and interviews

With all this in mind, I’ve sent out a survey to my own network. I tried to formulate the questions in such a way that they were not leading and asked to elaborate when I thought I wanted to know more about the thought behind it. Furthermore I visited the park to ask actual visitors more about their experience in the park.

Results from the survey and interviews with actual quotes from visitors

I also wanted to know how people find their way around the garden. Some people were perfectly happy just wondering around while others found is somewhat hard to know where to go next.

Quotes from visitors

Design solution

I’ve done the research and now it’s time to think of a solution and test it. I can derive from my research that designing an app for visitors where the user can interact with their surroundings, so that they don’t feel like they’re stuck in their phone, is a great solution.

From all the research I created 3 job stories and connected those to acceptance criteria. That way I can understand what features and functions are needed for the app.

It should have, easy to understand interactive AR to call up information about the artwork they are standing next to, or have on their AR screen. A camera function is desired, so users don’t have to switch between apps if they want to take a picture. There should be an index list with all the artworks in the garden with a link to more information. A checklist to keep track of artworks that are visited. AR signage that can be easily brought up. A route planner for those who are having trouble finding their way around the park is also very useful. An option to save a planned route and checklist for returning visitors.

Analyzing and visualising

Having that at hand I started making the user flow, combining the acceptance criteria into one user.

User flow

Now that I have a better insight into what the screens might look like and what features I need to implement in the app, I can create a simple information architecture. Here I have laid out the screens and thought of what would be on those screens and what it should be called.

A simple IA is all I needed to get started

Prototyping

With the legwork done it was time to start with the prototype. I made a wireframe first. And did a quick usability test to see if all the connections made sense. It was oke, but it needed more tweaking.

Wireframe for the usability test

I decided that improving the wireframe would take more time and that I would do it when building the actual interface. When I’m in the process of designing a product I tend to discover better ways to do things and come up with improvements along the way. I am a visual person, so for me, seeing how things work and where elements go, work better than imagining it.

The interface

I wanted the app to look like it was part the Kröller Müller museum website. I dove into theirs and really looked at their existing UI. It is important that products of the same company work and look alike.

Website UI

I made the screens for the interface. I focused on the core features and set up a user test. They have a preset route on their website and I used that to build the app around that. (I pretended that there are only 10 artworks in the garden instead of over 160)

The interface before testing

User tests

In the wireframe I had 3 separate screens with the artist list with different functions. One for planing your route, one as a checklist and one as an index with links to the background information of the artists and artworks. I decided that they could be merged into one screen. I kept them seperate in the hamburger menu.

I wanted to test the main part of the app, namely the AR with the interactive place holders above the artworks, and planning a route along 3 artworks.

I made a short task list for the testers.

  • Log in
  • Plan a route along artwork, 004, 006, 009
  • Zoom in on map
  • Go
The optimal journey for the user test. (2x the speed)

In the morning I had 2 testers. Unfortunately, during the tests, Figma was acting up and I could not make it work on my phone. We did the test on my laptop. All the screen recorders I could find at the time had a big watermark on them so I decided to film them with my phone. The videos are of such poor quality that I will use them only for my own research.

Signing in was not a problem, but finding the route planner was. They both tapped the button for the signpost at the lower right. And I had to remind them to use the hamburger menu. But they also both quickly realized that activating the left buttons to select an artwork for the planner was the way to go. One of them commented that because it was red it drew her attention. The signpost was a thing that made no sense to them and the text on there was not legible.

After the test I let them do a quick task to see if the could figure out how the placeholders worked. Both figured out that they had to tap it, right away.

I have gotten good feedback about the unclarity of some of the icons that I used and they gave me some good pointers when I explained the functions of the app. When I mentioned the checklist one tester was very enthusiastic about it but said that she did not get that that was an option. I did have a help button but they both did not see or register that. I could make it so that when a user comes to that screen first the help overlay is visible.

Now that I have lots of good feedback, it’s time to iterate.

More tests

With all this feedback I wanted to do an A/B test with some concepts. The help overlay needed to be more clear, the checklist checks where a bit hard to spot, the map icon I used was not very obvious and maybe the go/navigate button needed another icon

Later on I will explain how I used this data

Kill your darlings

After the two tests I concluded that the AR signpost was not helpfull and did not add vallue to the app. So it had to go.

Below are the screens of the test with the iterated design beside it.

On the right the new design

I made the placeholder bigger, more legible and red, to fit more with the overall colour scheme. The signpost button is replaced with a navigate button. I removed the search icon and I added that to the hamburger menu (comparison will follow) After the A/B test I replaced the map icon. Finaly, I added a list icon for direct access to the index list with all the artworks.

The new hamburger menu

On every screen, that is not the index screen, is a list icon. I replaced the three options to go to the index screen(arwork index, routplanner and my checklist) I did want to keep a link to the route planner but I renaded it ‘Plan my route’, Because I’m also using ‘My profile’ and ‘My saved routes’ and I added ‘search’ here.

The help menu

I’ve added bold areas in the text because people tend to scan a text rather than reading it. This screen is where you can tap the numbers for the route planner, where you can get more information, where you can check the artworks you’ve visited and you can save routes and checklists. A little explanations is needed.

Furthermore, I changed the search icon in an AR icon. People are not yet very familiar with AR so a well-known icon does not exist yet. I did not want to use the letters AR, because people might also not understand what that means. I’m counting on the intellect of the users that they will learn quickly what the icon means.

UI for all the ‘More about’ screens

I changed the icons at the bottom bar to match with the rest of them. I’ve made the ‘to top of page’ button more similar to the rest. (the initial icon is too thin compared to the rest of the icons used)

The map shown with your planned route

One of the testers mentioned that she found the ’you are here’ icon not clear enough. I change that to a red placeholder. Because of that, I changed the colour of the route to black. I’ve changed the bottom bar icons.

When you’re in navigation mode

Again I removed the sign post and replaced the icons at the bottom bar.

Second iteration

After these changes, I did another test. Thankfully, this time I found a good screen recorder.

Part one of the test
Part two
Part three

I let the user do the same test as in the morning but with the improved design.

Planning a route was very understandable. Although he did not realise right away that he had to activate the buttons an the left side of the names to plan a route. He also did not take the time to read the help menu that was displayed right away. The icons were mostly clear. I asked what he thought of the AR icon. For him, it was logical because from the first screen, where he tapped the map icon the AR icon was in the same position so that meant, to him, that he could go back. He searched ‘back to AR’ in the hamburger menu.

After completing that test I asked him to go to the screen with the placeholder and asked him what he would do if he wanted to see more information. That was not very clear from the beginning. He tapped the list icon to go to the info screen.It is a way to get there but it’s not the shortest one.

The placeholder and label after tapping needs improvement. The hamburger menu needs an extra option.

Another iteration

After the second test, I tweaked the prototype a bit further. I added a skip button to the sign up screen. Some people might not wat to sign up. but when they skip it they are not able to save their routes or their checklist. I changed some wording to be more clear.

The placeholder needs to be more clear. How to let users know that it is an interactive element

A new label with a information icon

I’ve added an info icon to the label. But this way the user still has to figure out that he/she has to tap the placeholder in the first place.

Have the information icon in the place holder

Here I’ve added the info icon to the placeholder. This way the user does not know what number is connected with the artwork at first glance.

I came up with the following solution.

The interactive placeholder

I showed this new interaction to my testers and asked what they thought about it. They all said it would work for them and it was much clearer. Unfortunately, I could not integrate this function in the final prototype (figma is limited in that way.)

The final Product

The interface
Final interface part 1 sign in and planning a route
Final interface part 2 looking up information
Final interface part 3 placeholders
Final interface part 4 Chicking the list

So there it is. The final product. An app to get more information about the artworks displayed at the Kröller-Müller museum and to help visitors find their way around the garden.

If you want to experience the app yourself, follow this link to see the clickable prototype in Figma.

A final word

It’s been a roller-coaster for sure. But what a ride! I’ve learned so much over the last 8 weeks and doing this project. It’s been fun and crazy and sometimes a bit stressful. I’ve really pushed myself and found myself often times outside of my comfort zone. Which is a good thing, for me.

Thank you for reading my graduation journey. I hope you enjoyed it as much as I did making it. And even without the app, the museum is totally worth the visit.

Here is a picture of my favourite sculpture from the garden: Le grand homme de la nuit, by Germaine Richier

Disclaimer: I am not affiliated with the Kröller-Müller museum in any way.

Contact: https://www.linkedin.com/in/liesbeth-malenstein/

https://medium.com/media/a19f46680bac3cbdc42953c920d0c104/href


A walk in the park — a UX case study was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here