Design Heritage Website

The Design Heritage Website is an online gallery for collecting, sharing, and curating 3D captures of heritage places ​and spatial designs. It allows users to update 3D mesh models with textures, and construct narratives with branching paths by manipulating as well as position different models to create scenes, and attach annotations, videos, photos to models. It was funded and developed by MIT Design Heritage Lab, led by Professor Takehiko Nagakura.

// INTRODUCTION

// USER STUDY

// SYNTHESIS

// UIUX REDESIGN

// CREATE NARRATIVE

// IMMERSIVE VIEW

// TAKEAWAY

Introduction

Design Process

When I joined the lab, the website was already launched with its core functionalities and minimal UI designs. We work under the agile software development model, iteratively designing and implementing new features, as well as collecting user feedback and reflecting on the changes. As the front-end developer and UIUX designer in the lab, my work is to propose new features, mockup new UI design, then code the new interfaces, add in new functions, and run user tests.

Site Map

Sitemap of the Design Heritage Website

User Study

Even though there is a long-term plan to publish the website to a larger group of audience and make it available for border range of activities, for now the website is mainly used by researchers in the design heritage lab and students on Professor Takehiko’s classes. That gives us two types of really different users: We have been communicating frequently with users who work in the lab to understand their needs. For the other type of user, the class would usually ask them to create a narrative using the functions on the website as one of the weekly assignment. Such activity essentially functions as an usability test for us. We have made a questionnaire using Google Forms and send it out to the students after they have finished the assignment, in order to collect their feedback.

Personas

Based on the previous discussion, we have created two personas, one for each type of user.

<

Persona 1
Persona 2

>

Synthesis

To better understand the pain points and needs of our users, and how their experience could be improved, we have created a task-flow diagram that maps the series of steps users need to take in order to prepare a new project with models, to the point that it is ready for creating narratives. Task Flow After creating the task-flow, we added pain points and needs of users onto the diagram next to corresponding steps or functions. By this way, we had a good overview of what we should focus on when we plan for new features and redesign different pages. Task Flow 2

UIUX Redesign

One of my major tasks as is to rewrite the major pages of the website in Vue.js, an open-source Model–view–viewmodel JavaScript framework for building user interfaces and single-page applications. During the process, I have designed the pages based on previous studies, and implemented new interfaces with components from Ant Design.

Project Page

Screenshot of the old project page
This is the page where the user can see all their projects. Compared with the old design, the new interface reorganized the projects into three categories for easier navigation. Besides, new functions such as sorting and searching is also implemented.
New project page

Home Page

Screenshot of the old home page
This is the page that displays all the models and images the user has uploaded. The new interface inherited the grid layout of previews of models, while with small user experience improvements that allow one to see each models’ description, upload date, and frequencies of they being used in projects. Besides, in the new design users could switch between three different modes of viewing the model - large grid, small grid, and list. The new function is a huge help for heavy users who own a lot of models to get a good overview of their collections. Similar to the project page, the new home page also include sorting and searching functions for users to find their models efficiently.
New home page

Catalog Page

Screenshot of the old catalog page
This is the page that list all information for the project. Besides the models that are used in the project, one could also view and modify project description, its editors, references, and note categories.
New catalog page

Navigation Bar

Screenshot of the old navigation bar
The navigation bar is redesigned to accommodate and better showcase the structure of all the different pages.
New Navigation Bar

Create Spatial Narrative

How to Tell Stories Using 3D Models

Create States

States to Stories

Annotation System

Another major function I has been working on is the note system, which allows user to create annotations with images, and attach them to specific locations on any models. Designing 2D user interfaces for 3D scenes is something I find especially interesting and challenging. Because our photogrammetry models contain a variety of textures, it’s hard to find one single color that can pop out from the scene. Therefore, we have finalized on the design on the white outline with colors inside.

Make it 3D

Visualizing 3D models on a 2D screen is always challenging. We have implemented two several different views - anaglyph and stereo - so that people with different equipments could view the scenes and experience the stories in a more immersive way. In addition, we are also designing and implementing a new interface for webVR that could be viewed using VR head-mounted-devices such as Oculus Go and Oculus Quest.

Anaglyph view allows users to view the model using Anaglyph Glass
Stereo view allows users to view the model with mobile VR device such as Google cardboard.

Takeaway

The most important thing I learnt from working on Design Heritage Lab is to balance between the needs of creating new interfaces as well as features, and the time it would cost to actually implement something. In addition, because we already have the website running as well as some data accumulated, it is important to design new interfaces based on the existing data, and think about ways to accommodate missing entries of the old database if we want to display things that are new.

Back to Home >>>