TUM AR

Conceptual design for a map-based storytelling mobile app using augmented reality



Project Overview

Project type
Individual Research - M.Sc. Thesis

Deliverables
Interactive mockups and user-centered design recommendations

Duration
6 months (Oct 2020 - Mar 2021)




Responsibilities
- Comparative analysis of storytelling in printed, web, and AR/VR maps
- Conceptual design: wireframes and interactive mockups
- Usabilities testing and analysis
- Formulating user-centered design recommendations

Tools used
Marvel, Adobe Illustrator


Problem statement

Maps are powerful tools for storytelling, yet modern advancements in mobile and web mapping often prioritize technical capabilities over intuitive and engaging user experiences. This gap in design focus inspired me to explore how emerging technologies like Augmented Reality (AR) could transform storytelling and navigation on mobile devices. Through a case study, I aimed to develop user-centered design recommendations that enhance usability and engagement in place-based AR experiences.


Challenges

My role was to design initial recommendations for a mobile AR app concept that guided users through a place of interest, blending storytelling with route visualization. One of the key challenges was to determine how multimedia elements could reduce visual clutter on smaller displays, making the interface more accessible and engaging. This led to the central question:
How can Augmented Reality (AR) transform map-based storytelling and navigation into an immersive, user-friendly experience?


Methodology

Case study area
I chose the TUM campus as the case study area as it provided a focused and achievable scope for exploring AR-based navigation and storytelling within the constraints of time and resources.
Target audience
The intended users were tourists visiting the historic 150-year-old TUM campus, as well as students—both new and returning—seeking an engaging and informative experience while navigating the campus.

Workflow
I employed a mixed-methods approach, combining three steps:

  • Comparative Study: Analyzing storytelling approaches across printed, web, and AR/VR maps
  • Conceptual Design: Developing sketches, wireframes, and mockups
  • Usability Testing: Conducting semi-structured interviews and deriving actionable insights





    • Comparative analysis


    To inform the conceptual design, I analyzed 38 samples across printed, web, and AR/VR mediums. The aim was to identify patterns in using multimedia to design narratives and navigation.





    Key insights & pain points:

  • Print maps excel in aesthetics and narratives, but lack interactivity and connection to real-life places.
  • Web maps and AR apps often overload users with excessive dynamic elements leading to visual clutter, especially on small screens.
  • Users often find it difficult to interact with AR/VR apps due to inconsistent sizing and placement, or lack of clear affordances.
  • Many AR/VR apps struggle to integrate storytelling and navigation seamlessly. Even when integrated, they are often siloed and forces users to switch between views or even apps.




    • Conceptual design


    Based on the comparative study, I identified essential visual and multimedia elements (e.g., POIs, narratives, routes, additional information). These elements were tailored to AR’s capabilities while addressing challenges like visual clutter and accessibility.










    Sketching & Wireframing


    Initial sketches explored how features like storytelling and route visualization could coexist in an AR environment. These sketches were refined into wireframes focusing on:

  • Seamless transitions between 2D maps and AR views
  • Clear layout for navigation and storytelling
  • Avoiding clutter to improve accessibility


    • Iterative Process:

  • Early sketches featured extensive details but lacked focus, leading to user confusion
  • Feedback prompted simplification, resulting in streamlined wireframes with improved layout and marker designs









    • Data collection and design process


    For the mockups, I opted for a minimalistic design to prioritize key actions and maintain focus.


    The color palette for the main interface was chosen to reflect TU Munich’s branding, reinforcing familiarity, simplicity and ease of navigation. The primary colors represent TUM’s academic identity, while accent colors were added for POI categories (e.g., green for open spaces, blue for buildings).



    Clean and legible sans-serif fonts were selected to ensure readability across various screen sizes.

    For multimedia, I collected text for story content, photographs of POIs, audio, video, and designed a TUM campus map, icons, buttons, and markers in Adobe Illustrator for the mockup and narrative design. I created GIFs to stimulate the immersive AR experience through the mockups.


    Finally, all processed elements were integrated into Marvel App to develop interactive mockups.




    Mockup design


    I developed high-fidelity mockups to translate conceptual ideas into a tangible design. The designs were made using Illustrator and then transformed into interactive mockups using Marvel. The designs featured:

  • Navigation Options: Blue lines in AR view and maps for route visualization
  • Storytelling Elements: Pop-ups, text, photos, and links integrated at POIs
  • Filter Mechanisms: Customizable POI categories (e.g., lecture halls, cafes)

    • While feedback from the usability testing highlighted opportunities for improvement, such as clearer navigation markers and enhanced interactivity, these insights were documented as design recommendations for future iterations rather than directly implemented within the scope of this project.




    Usability testing

    For usability testing, I conducted semi-structured interviews with 22 users, including TUM students and non-students (tourists). Participants were asked to perform tasks like navigate through the interactive mockups to reach a specific point of interest while thinking aloud to capture real-time feedback.



    Insights and User Feedback:

  • Users responded positively to the idea of an AR tour but highlighted a need for more intuitive icons and clearer navigation markers
  • Shorter length of text is preferrable
  • Technical limitations in the mockup restricted interactivity, but feedback suggested that story pop-ups and multimedia elements would make it more engaging
  • Combining route visualization in AR and map would be useful for navigation
  • Emotional responses were evoked by elements like - color palette (students could relate with university branding), photos (evoked "curiosity" and "nostalgia"), maps and route (evoked "safety" and "confidence"), narrative (felt "engaging") and fonts (felt "provocative")



    Recommendations Documented:
    The usability feedback informed actionable recommendations for future development phases, including refining iconography, improving transitions, and enhancing AR-based storytelling features. These insights were not implemented within the project timeline but serve as a foundation for further design iterations.



    • Next Steps


    While this project concluded with detailed design recommendations, the following steps are envisioned for future development:

  • Implement Iterations: Apply usability testing feedback to refine the design, such as improving icon clarity and interaction flow.
  • Develop a Functional Prototype: Transition from mockups to a working app prototype to conduct comprehensive user testing.
  • Expand Testing: Test with a broader and more diverse audience to validate the app's usability and scalability.
  • Enhance Customization: Add features like dark mode and user-controlled filters for accessibility and personalization.
  • Integrate Gamification: Consider elements like location-based quests or scavenger hunts to increase user engagement.



    • Reflections


    This project marked a significant milestone in my journey as a researcher and aspiring UX designer. While it was conducted during a time when I was less focused on UX design as a career path, it allowed me to:

  • Explore AR’s potential for enhancing user experiences
  • Strengthen my analytical and prototyping skills
  • Gain confidence in translating research insights into actionable designs

    • This project served as a foundation that complements my recent experiences, showcasing my ability to approach UX challenges with creativity and critical thinking.