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.
// USER STUDY
// UIUX REDESIGN
// CREATE NARRATIVE
// IMMERSIVE VIEW
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.
User StudyEven 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:
Based on the previous discussion, we have created two personas, one for each type of user.
SynthesisTo 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. 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.
Create Spatial Narrative
How to Tell Stories Using 3D Models
States to Stories
Annotation SystemAnother 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.
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.