Overview
3D model of a modern district with green infrastructure, rail connections, residential buildings and renewable energies against a blue background.

Anonymized project from a permanent position. Content altered for legal reasons.

3D journey of discovery through a modern district

A small quarter that illustrates the characteristics of a modern living space and the company's learning professions in order to convey complex content in a playful way and promote dialogue with different target groups.

Contents

    Result

    Web app for liveable neighborhoods

    Visualizes today's demands for a livable neighborhood and invites playful exploration.

    3D district view with topic filters, selectable buildings and detailed information on objects as well as their meaning and value for the district.

    3D district view in the web app: Individual buildings can be selected at the touch of a finger.
    3D building view in the web app: An index finger taps on a shop on the ground floor.
    3D business view in the web app: 'Take-away pizza' with an information text about the importance of gastronomy for the neighborhood population.
    • Experience instead of learningUsers discover content through playful navigation.
    • Can be used across situations and devicesFrom individual exploration on your smartphone at home to accompanied presentations on the large screen.

    Mixed reality for professional worlds

    Slightly modified version of the 3D world, which is aimed at those seeking apprenticeships.

    3D working world with selectable people who display job profiles, tasks and videos about activities.

    OR logic model: A wooden cube in the base shows an active state, while two additional cubes next to it remain inactive.
    AND logic model: Five wooden cubes in a bar, where only two symbols are visible, for an incomplete condition chain to show.
    • Mixed reality you can touch - Connects digital content with physical objects for a tangible experience.
    • Planned from the outset - Integration was considered during the concept phase, so the web app could be adapted with minimal effort.
    • From idea to implementation - Early on-site participation and support throughout implementation.
    • Tangible prototypes - Creation of haptic interaction objects (tangibles) to make AND/OR relationships physically understandable.

    Initial situation

    Preparatory work by the customer

    Even before the project started, well-founded preparatory work and strategic considerations were in place, which served as the basis for the digital implementation.

    Three men discuss in front of a detailed city model made from Lego building blocks in a hall.
    • Expert workshopsPerspectives from urban planning, architecture and community representation brought together.
    • Lego model in the studioUrban complexity made tangible as a physical model.
    • First sketches of the 3D worldFrom a physical model to a flexible and transportable digital solution.

    Initial customer workshops

    expectations taken

    The customer's wishes and ideas are collected without any technical restrictions.

    Collage of different planning scenes: From fictional hologram meetings to real city planning on screens.

    Map structure developed

    Thematic areas of a livable neighborhood are systematically recorded and spatially located.

    Schematic neighborhood plan with building floor plans, park and notes for uses such as living or café.

    professional worlds integrated

    The company's training occupations are incorporated into the structure as permanent components.

    Design to represent professional worlds with graphics, vehicles and thematic notes.

    First basic concept

    Interactive 2.5D mechanics

    3D optics combined with simple 2D operation for clear user guidance.

    Donkey Kong game scene with displayed X and Y axes to illustrate the 2D movement.
    Donkey Kong game scene in 2.5D graphics with displayed X and Y axes.
    Donkey Kong game scene in real 3D graphics with displayed X, Y and Z axes.

    User testing

    Basic mechanics checked for understandability.

    Two men in the office at the user testing; One points at the screen with a 3D model, the other looks thoughtfully.

    Proof of concept through tofu prototype

    Reduced test setup to validate performance, navigation and structure.

    Gray 3D block model of a neighborhood with a real tofu block in the foreground as a metaphor for block models.

    Information structure

    Structured in collaboration with the client into "map objects" and "filter options."

    Infographic to the data structure: Linking analog district planning tiles with a digital variable hierarchy.

    Finding style

    Compliance with corporate design

    Clear color world and visual language coordinated with existing CI/CD.

    Comic illustration from passengers in a bus or train, a toddler uses a tablet.
    Comic illustration of a shopping conversation at a vegetable market stall in the outdoors.

    Abstraction instead of realism

    Figures were intentionally simplified and disproportionate, and the interior structure of buildings was made visible whenever possible.

    Stylized 3D graphics of a street cafe with guests, outdoor area and adjacent shop.

    Finalization

    Hands-on tests on the product

    Tested early beta version with project team and customer employees and collected feedback.

    A woman uses a smartphone while a man stands next to her and takes notes in a notebook.

    Feedback prioritized & evaluated

    Requirements organized into must-haves, should-haves and nice-to-haves and implemented according to effort/benefit.

    Digital whiteboard for feedback evaluation, divided into the categories 2D UI, 3D UI and 3D modeling.

    Fine touches

    Final adjustments to the interface, language and interaction until everything looks harmonious.

    Digital design criticism with colored markings on screenshots a mobile app for click areas.