Contour

Timeline
Feb - Jul 2020
Project Type
Graduation Project
Responsibilities
Research, concept iteration, interface and visual design

During my internship I worked on a project to design a museum exhibition. In that project I realized that there isn't a streamlined method for creating visualisations of exhibition designs and sharing them with others. As a solution I came up with Contour, a flexible and easy to use online tool for creating and sharing exhibition designs.

The Problem

There are different methods for visualizing exhibition designs. They each have their own qualities as well as drawbacks. Oftentimes, multiple methods are used during a project since there is no single method that encompasses all desired qualities. This creates extra work and can lead to communication problems, especially when working with external partners.

Method Depiction of the visitor experience? Presentable? Fast to make & modify? Collaboration possibilities?
Maquettes Good Excellent Poor Decent
Floor plans Poor Poor Decent Poor
Sketches Poor Poor Good Poor
3D renders Excellent Decent Poor Good
Methods commonly used for visualizing museum exhibition designs
Discovery

We started off by conducting interviews at multiple museums with individuals who are involved in the creation of exhibitions. Based on this research and combined with our own experience, we identified several problem areas that are impacting the use of visualisations in the exhibition design process.

Creating visualisations Viewing visualisations Collaboration
Difficult to learn and use software 3D visualisations can’t be opened easily without a specific application Visualisations in 3D software can’t be shared easily
Decently powerful computer required for 3D rendering Static visualizations give a limited view of the visitor experience No central place to give and review feedback on the design
Big changes often require the creation of an entirely new visualization Some methods are not realistic enough to be presented to certain stakeholders Not practical to work with multiple people on one visualisation.
Physical visualisations can’t be created and viewed remotely
Key pain points of current methods
How can we make a tool that enables museum exhibition designers and stakeholders to easily visualize their designs, as well as share, view and give feedback on them?
Goals

Once we set out our goal, we created design principles that help us make design decisions that align with our goal. These were based on the key pain points of users.

Centralize the giving and viewing of feedback

Give and view feedback frictionless from within the visualization.

Design goal centralizing the giving and viewing of feedback
Enable designing from the visitors point of view

Make design decisions based on a realistic preview of the visitors experience.

Design goal realistic preview of the visitor experience
Low entry barrier, No 3D experience needed

Contour should be easy pick up for users with no background in 3D software.

Design goal low barrier of entry
Allow for easy collaboration and sharing

Visualisations must be easy to share and view, regardless of device.

Design goal easy collaboration and sharing
Approach

We utilized co-creation and design sprints during this project. From the beginning we worked together with the Rijksmuseum and other museums to make sure the design meets our goal. By working directly with different users, we obtained direct feedback on what works and doesn’t work for this new type of tool.

Working together with the Rijksmuseum
Explorations

Early on, we decided to make Contour a web app. This significantly lowers the barrier of entry because every device with a browser can use the tool. It also makes the development easier. We started to brainstorm features and how the tool should work based on the pain points.

Early low fidelity wireframe for Contour
Lo-fi wireframe ideation
Explorations

We decided that Contour should consist of 2 seperate parts: creating visualisations (the editor) and viewing them (the viewer) This division simplifies the tool for users who only want to view the designs.

Explorations

First we tackled how the editor should be set up. We iterated and tested multiple ways and settled on 3 main modes for editing: place, room and comments.

Place, add art, displays, furniture and signage

By default, users can select anything in the 3D environment except for the room itself. This was done in order to eliminate accidentally selecting a wall instead of a painting. We found that placing objects in a room is used more often than modifying the room itself so it made sense to make it into a seperate tool.

Build, create and modify the room
Comments, view, add and reply to feedback
Explorations

We quickly discovered that a larger viewport gives the user a feeling of being in control and having a good overview of the design. We made it a priority to enlarge the viewport. Switching to floating interface elements aided in this.

Editor design iterations
Explorations

Because a large part of our prospective users have never used 3D software before a lot of work went into designing and streamlining the 3D interactions. The Sims game series served as a major inspiration for how to handle 3D interactions for a user base with little experience in this. Framer was used to prototype and test the 3D interactions. We faked a 3D environment by making a vector based isometric scene that could be modified by users the same way they can in a proper 3D environment.

Explorations

I created a design system featuring typography, icons and components that prioritises readability, clarity and contrast with the diverse content of the 3D viewport. The components underwent numerous iterations to make them more space efficient and user friendly. A great example of this is the properties component that gives an easy way to manipulate the selected object.

Properties component evolution
The Contour design system
Explorations

While being simpler than the editor, the viewer also went through multiple iterations. The challenge was to design the interface in such a way that it shows as much of the 3D environment as possible while scaling between different devices.

The viewer on different devices
Viewer mobile interface prototypes
User Testing

Apart from testing during the design sprints, we used Contour in a pilot at the Rijksmuseum to see if it actually works in a real project. Users with different roles in the exhibition design process tested a prototype build of Contour to ensure usability. We also wanted to see how different types of users use Contour. Testers were very positive about Contour, their reasons for liking the tool lined up with our design goals.

Users with different roles we tested with and how and when they prefer to use Contour
Different roles we tested with and when and how they used Contour

Outcome

As a result of this project we delivered a test build of Contour that has been thoroughly tested. In addition we have designed, prototyped and tested almost every aspect of the interface. We created a trailer to show off the final product.

Impact

Both the test build and prototypes of Contour were received favourably by users. The core of Contour has been validated and we gathered a lot of feedback for future iterations. The experience garnered from this project is valuable, we built a new type of tool from the ground up in just a short timespan.

This project taught me the power of co-creation. You can tackle a lot of complicated issues early on by working directly with the users.

Recognition

Contour won the HKU Award 2020 in the category innovation! It was selected from a list of over 20 projects.