Contour
Feb - Jul 2020
Graduation Project
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 Marlon Sijnesael and I came up with Contour, a flexible and easy to use online tool for creating and sharing exhibition designs.
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 |
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 |
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.
Enable designing from the visitors point of view
Make design decisions based on a realistic preview of the visitors experience.
Low entry barrier, No 3D experience needed
Contour should be easy pick up for users with no background in 3D software.
Allow for easy collaboration and sharing
Visualisations must be easy to share and view, regardless of device.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Contour won the HKU Award 2020 in the category innovation! It was selected from a list of over 20 projects.
