Sitemap

MauAR — Augmented Reality Storytelling on the History of the Berlin wall.

A new UX Design for a project close to my heart.

6 min readJun 7, 2021

--

I have worked with Peter Kolski from BetaRoom before, but I have always been especially passionate about his kickstarter project, MauAR.

MauAR is an augmented reality app with 3D stories about the history of the Berlin Wall. The app can be used in real locations in Berlin, where the former wall was located — or at home in a virtual historical environment. The app was first launched in the course of the 30 year anniversary for the fall of the wall between East and West Germany. IPads were provided all over the city to help people experience the unique historical circumstances of Berlin’s past.

The project was a big success in 2019 but due to the lack of time, the UX was done in a rush. Even though the founder and the designers put a lot of thought. into it previously, now was the time for an upgrade. And not only to improve the overall look and feel of the already popular app, but also to launch the new version for the next big historical milestone: August 13th 2021, 60 years after the Berlin Wall was built on a sunday in august.

Overview & Project Goal

I worked in a team of 2 on the new design of the app, staying in touch regularly with the stakeholder.

The main scope was a re-design and re-branding of the current app. New add-on‘s would be an educational tool as well as a navigation feature.

Our secondary scope was to design the matching website, to inform people about the contents of the app and how to use it (this part is not covered in this case study).

App Scope

Users should understand the modes of the app: the content shown varies depending on their current location, inside Berlin, close to the wall or outside of berlin.

The user should understand that the stories are told by two different personas, one from former East and one from former West Berlin.

The UX Design needs a guidance & introduction to AR, navigation towards wall or event location, and buttons for the location service and camera services. The new app targets a new audience: teenagers and the educational sector, as MauAR became popular amongst teaching apps.

A few competitors we looked at:

  • ScavengAR
  • Tagesspiegel. 89/19
  • Pokémon Go

Problem Statement

We believe that a navigation feature and an educational feature will target younger users better and improve the use case of on-the-spot AR experiences.

In order to identify the problem, we conducted interviews with the stakeholder, new potential target group as well as already existing users.

Users & Audience

During our research phase, we did quantitative research by Surveys amongst teenagers, their knowledge of Augmented Reality as well as educational apps. Apart from that we did qualitative research by conducting interviews with teachers and experts of the educational sector. We found those in our personal network, as well as spread the message throughout popular social channels.

We found out that most students did not have much experience with AR, but are open to the idea of using educational apps more. Teachers, on the other hand, told us that they are keen on using educational apps, but needed clear info on if the tool can be used for school. They do want to decide individually how they want to use the app with the class.

Roles & Responsibilities

We worked in a team of two, catching up regularly with the founder of MauAR. The team worked remotely and full-time on the project. Since I had previously worked with BetaRoom, I introduced my team partner to the company and took the moderator role. The team work was evenly distributed between the members and decisions were made collectively.

Scope & Constraints

The timeline of the project were two weeks with no budget. Shifting the target group from the old app to the new one, made it especially difficult to re-scope. The special challenge about this project was the fact that augmented reality applications are not yet established, which means we had to come up with a good guidance and introduction into the usage of AR.

Process and methods

Going with the design thinking method, we started with an in-depth empathize stage, focusing on teenagers and teachers. We defined our intended outcome to a navigation and educational feature, as well as a UI that matches the historical background and a younger target group. During the ideation phase we went with multiple brainstorming methods to come up with our feature ideas. We prototyped, tested and used the feedback for adjusting and upgrading our designs.

Over the course of the project, the depth of the educational feature decreased compared to what we first had imagined. After testing with the users, we found that what we had imagined, would make a whole new app in itself.

And here comes the visual part. Below you’ll find some of the in-between steps we did to reach our final product:

Press enter or click to view image in full size
Press enter or click to view image in full size
Press enter or click to view image in full size
Press enter or click to view image in full size
Press enter or click to view image in full size
Press enter or click to view image in full size
Press enter or click to view image in full size
Press enter or click to view image in full size
Press enter or click to view image in full size

…and here are our final high fidelity designs:

Press enter or click to view image in full size
Home Screen with Story Overview and Berlin Map
lHome screen with overview of stories in a horizontal timeline and Berlin map to locate yourself. You are in the left menu button, which is the map view.
Press enter or click to view image in full size
These are two of the story overview pages on the left and the historical overview in a vertical timeline on the right. You are in the second-to-left menu button, which is the history view — it gives in-depth details that can be used for educational purposes.
Press enter or click to view image in full size
This is a small part on the onboarding, as well as the visual identifiers in an AR story. At the end of each story, we motivate the viewer to watch the next story. We also give the option to repeat individual chapters, pause or watch the whole story again.
Press enter or click to view image in full size
This is the navigation user flow. The user is located in Berlin, browses through the stories and gets navigation towards a story near the wall. They scan the floor and receive AR guidance. When they reach the wall location, they get the story page to start their Augmented Reality Experience.

I loved working in a team on this project. We added to each other’s skillset and complemented each other’s ideas.

The difficulty was that our stakeholder got ill in the final courses of the project, which caused us to not having a final meeting before the actual hand in of the project. We had to make a lot of decisions ourselves and work on explaining the thoughts behind them well. In the end, we were really happy with the navigation inside the app, using our nav bar, as well as how we managed to put the AR stories into historical context by using timelines and overviews.

After thoroughly reviewing our process with my team partner, we realized that our main pain point was over-scoping and our takeaway is that we should beforehand decide how much of the requested scope is doable in the given time frame.

Hope you enjoyed my case study. Feel free to give me feedback or reach out for UX and AR project ideas.

Henriette Who?

--

--

Henriette Who?
Henriette Who?

Written by Henriette Who?

…got caught up in Augmented Reality, Storytelling and UX/UI Design.

No responses yet