A Digital Bridge to the Past:
AR for Inclusive Historical Exploration

Walking through Lausanne's archaeological park, you're stepping on the very roots of the city's history, stretching back over 2000 years. Yet, to the untrained eye, the significance of these ruins might be lost, perceived as nothing more than remnants of the past. In 2021, I was part of an effort at the Musée romain de Lausanne-Vidy, where we leveraged AR technology to peel back the layers of time, offering visitors a chance to truly connect with history, not just as observers, but as participants in a story that continues to unfold, ensuring its preservation for those yet to come

My role
User Research
User Experience Design
Interaction Design
Visual Design
Brand Design
Supervisor
Sara Tung
Timeline
3 month
February - May 2022
Tools
Adobe XD
Photoshop
Illustrator
Miro
Figma
My role
User Research
User Experience Design
Interaction Design
Visual Design
Supervisor
Sara Tung
Timeline
3 month
December- February 2022
Tools
Photoshop
Illustrator
Miro
Maze
Figma
My role
User Research
User Experience Design
Motion Design
Visual Design
Supervisors
Sara Tung and Elina Zhang
Timeline
3 month
May - July 2022
Tools
After Effects
Adobe Aero
Rhinoceros
Unity
Photoshop
Illustrator
Miro
Figma

Overview

Brief
Facing the challenge of historical ruins being overlooked due to their static appearance, a 2021 initiative turned to Augmented Reality (AR) for a solution. The goals were: Revitalize ancient sites with engaging and interactive experiences; Protect ruins from tourism-related damage.; Attract more visitors to the sites ; Promote appreciation of these sites as a vibrant part of swiss heritage.
Approach
As the sole UX/UI designer, I dove into user research, crafted user personas, brainstormed ideas, and designed both wireframes and prototypes, all while keeping in touch with the stakeholders.
Due to limited resources, I was responsible for creating all the content, including images, video editing, and motion design.
Finally, to ensure my work was on point and unbiased, I regularly sought feedback from two senior designers every week.
Outcome
The result? A user-friendly AR app that really pulled people in. It made exploring the ruins easier for everyone and added fun, interactive content that kept visitors hooked – making them stay three times longer and boosting their interest in the museum during the testing.

Competitive audit

I learned why competitors are successful and how they could improve through competitive audit, which also inspires my designs. In AR apps' case, it is also helpful to demonstrate 3D interactions while testing the early prototypes with competitors' products, as some features require advanced development. Furthermore, two main lessons are implied by the success of competitors' products: to keep the content narratory and to make it relevant to the context.

Competition audit

User Research

In order to gain useful data, I conducted secondary research based on existing online resources such as open data given by the federal statistical office and competitor research. Next, I carried out primary research, including an email survey and interviews with users.

Research synthesis

The user research information, including both surveys and interviews, is compiled in an empathy map container. (Amazing sticky note pictures are available on request.)
Following that, the same group of stickers is classified into groups in a mapping activity.
Using this method helps me prepare feedback and material for ideation such as personas and a user journey map.
‍

No items found.

Define-ideation

Problem statement

Sketching

Sketching is essential to my thought process as it helps me conceptualize my abstract ideas quickly in crazy eight sessions, for instance.
I also love to create storyboards to visualize the use of my designs if the context of use is essential.

Information architecture and user-flow

To generate a sitemap based on user needs, I prepared cards based on the competition website's content and the interviews' comments. Then, I organized them depending on what felt useful for the personas and discarded what felt not for them.

No items found.

Wireframes

After ideating and drafting some paper wireframes, I created the initial designs for the AR visit app. These designs focus on delivering personalized guidance with accessibility features (audio and visual guidance) to the 3d models in the archeological park.

Prototypes-Tests

Mid-fi prototype

Guidance Sequence

Navigation

Usability study

I conducted three rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining. The last study used a high-fidelity prototype and a video to define clearly the last changes needed for a good AR experience. The research plan and the KPIs are available on request.

Prototypes-Tests

Mid-fi prototype

Usability study

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining. The research plan and the KPIs are available on request.

Prototypes-Tests

Mid-fi prototype

Complete a booking.

Use the filter section.

Navigate through the different pages

Usability study

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining. The research plan and the KPIs are available on request.

Style Guide

Moodboard

Through the interview, different themes were frequent and on that basis, I chose colors, illustration styles and fonts to develop the high fidelity prototype. The images were also chosen based on the experience users will have on the site with the view on the lake and the nature around.

High-fidelity prototype

Log in

Find the filter option

Find the list option

Follow the guidance sequence

Navigate through the different pages

Navigate through the Homepage to select a program

Watch the trailer through the Homepage

Complete easily a transaction

Find information efficiently

Check my prototypes!

High-fidelity prototype in the context

Explore the ruins

High-fidelity prototype

Navigate through the homepage
and select a program.

Watch the trailers.

Complete a transaction

Use the search option

Navigate through the Homepage to select a program

Watch the trailer through the Homepage

Complete easily a transaction

Find information efficiently

Check my prototypes!

Deskop prototype
Tablet prototype
Mobile prototype

High-fidelity prototype

Complete a booking with the map.

Complete a booking with the list.

Use the filters.

Navigate through the different pages.

Check my prototype!

Prototype

Check my prototype!

Prototype

Takeaways

Think through all sizes

I learned a lot about adopting a design to different device sizes, which also need thinking about the developer's work later. I also observed that even a slight design change could significantly impact the user experience, such as deleting an unnecessary step or the color of a button.
‍
It was also challenging to learn and design on Adobe XD on an entirely new project. However, it additionally helped to think through alternative approaches when prototyping on Figma.

Don't forget about space and time

I learned how to design an AR app as it implies safety and spatial awareness of the context. It also meant learning different prototype technics such as Wizard of prototyping and videos to test the AR experience.
Finally, to create a great AR user experience, planning and thinking of the experience as a movie with precise timings is essential.

What is the true problem?

The obvious question was at first sight: "how to make art galleries more interesting?" after a few interviews, it became clear that the actual problem was: " how can we find art galleries?".
‍
While designing the Lausart app, I learned a lot about art galleries and the general biases we can have about art.

Slide deck presentation
Slide deck presentation
Slide deck presentation
UX/UI design | Motion design

Rethink Film Festivals, LMFF

Project for an association preparing a music movie festival with a limited budget. The website will help the user to discover, organize their visit and get practical information during the festival.

UX/UI design | Motion design

Finding and Visiting Easily Art Galleries, Lausart

Lausart is an app designed for the City of Lausanne, Switzerland. It will help users find art galleries quickly and visit them by developing a simple booking system.

Interested in working together?
‍Get in touch.