{"id":4142,"date":"2021-12-16T15:53:09","date_gmt":"2021-12-16T14:53:09","guid":{"rendered":"https:\/\/undsgn.com\/uncode\/?post_type=portfolio&p=4142"},"modified":"2025-03-03T23:52:15","modified_gmt":"2025-03-03T23:52:15","slug":"tradizione_e_sostenibilita","status":"publish","type":"portfolio","link":"https:\/\/lauragalvanetto.com\/index.php\/portfolio\/tradizione_e_sostenibilita\/","title":{"rendered":"Interactive expansion of physical guidance systems – UX\/UI"},"content":{"rendered":"

[vc_row unlock_row_content=”yes” row_height_percent=”0″ override_padding=”yes” h_padding=”0″ top_padding=”0″ bottom_padding=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”0″ z_index=”0″ uncode_shortcode_id=”101206″][\/vc_row][vc_row row_height_percent=”100″ override_padding=”yes” h_padding=”2″ top_padding=”5″ bottom_padding=”5″ back_image=”134174″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”0″ z_index=”0″ uncode_shortcode_id=”987727″][vc_column column_width_percent=”100″ position_vertical=”middle” align_horizontal=”align_center” gutter_size=”3″ style=”dark” overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1\/1″ uncode_shortcode_id=”797244″][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ override_padding=”yes” h_padding=”2″ top_padding=”5″ bottom_padding=”5″ overlay_alpha=”50″ gutter_size=”4″ column_width_percent=”100″ shift_y=”0″ z_index=”0″ uncode_shortcode_id=”110478″][vc_column width=”6\/12″][vc_custom_heading heading_semantic=”h3″ text_font=”font-136269″ text_size=”h3″ text_height=”fontheight-357766″ uncode_shortcode_id=”176679″]This project explores the interactive expansion of physical guidance system of FHP<\/span>[\/vc_custom_heading][\/vc_column][vc_column column_width_percent=”100″ gutter_size=”3″ font_family=”font-136269″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”5\/12″ uncode_shortcode_id=”532688″][vc_row_inner row_inner_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ shift_y=”0″ z_index=”0″ limit_content=”” uncode_shortcode_id=”177259″][vc_column_inner column_width_percent=”100″ gutter_size=”3″ font_family=”font-689905″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”4″ mobile_width=”4″ width=”1\/2″ uncode_shortcode_id=”146004″][vc_custom_heading heading_semantic=”h3″ text_font=”font-689905″ text_size=”h4″ uncode_shortcode_id=”155028″ subheading=”Group project
\nCourse: Interaktive Erweiterung physischer Leitsysteme mit Augmented Reality” text_color_type=”uncode-palette” text_color_solid=”#ff0000″]Collaboration<\/span>[\/vc_custom_heading][\/vc_column_inner][vc_column_inner column_width_percent=”100″ gutter_size=”3″ font_family=”font-689905″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”4″ mobile_width=”4″ width=”1\/2″ uncode_shortcode_id=”197523″][vc_custom_heading heading_semantic=”h3″ text_font=”font-689905″ text_size=”h4″ uncode_shortcode_id=”143067″ subheading=”2024\/2025″]Year<\/span>[\/vc_custom_heading][\/vc_column_inner][\/vc_row_inner][vc_row_inner row_inner_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ shift_y=”0″ z_index=”0″ limit_content=”” uncode_shortcode_id=”114429″][vc_column_inner column_width_percent=”100″ gutter_size=”3″ font_family=”font-689905″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”4″ mobile_width=”4″ width=”1\/2″ uncode_shortcode_id=”927270″][vc_custom_heading heading_semantic=”h3″ text_font=”font-689905″ text_size=”h4″ uncode_shortcode_id=”112878″ subheading=”Figma
\nMiro”]Software<\/span>[\/vc_custom_heading][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ override_padding=”yes” h_padding=”2″ top_padding=”0″ bottom_padding=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”0″ z_index=”0″ uncode_shortcode_id=”112900″][vc_column width=”1\/1″][vc_row_inner row_inner_height_percent=”0″ overlay_alpha=”50″ gutter_size=”4″ shift_y=”0″ z_index=”0″ uncode_shortcode_id=”632177″ limit_content=””][vc_column_inner column_width_percent=”100″ gutter_size=”3″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”4″ mobile_width=”0″ width=”1\/2″ uncode_shortcode_id=”581862″][vc_column_text uncode_shortcode_id=”151914″]<\/p>\n

During the course, we analyzed the FH Potsdam Campus physical wayfinding system, exploring how AR and digital interactions could enhance personalized information, improve accessibility, and assist in locating live events. My focus was on developing a prototype to demonstrate how this could function on campus, concentrating on integrating 2D digital navigation with AR.<\/p>\n

[\/vc_column_text][\/vc_column_inner][vc_column_inner column_width_percent=”100″ gutter_size=”3″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”4″ mobile_width=”0″ width=”1\/2″ uncode_shortcode_id=”537856″][vc_column_text uncode_shortcode_id=”254963″]<\/p>\n

\n
\n
\n
\n

We focused on digitally enhancing the physical orientation system created within the course \u201eDesign Studio Leitsystem\u201c, taught by Christina Poth. Therefore, elements such as the map, some of the icons, fonts and color choices are drawn from this project to ensure consistency.<\/p><\/div>\n<\/div>\n<\/div>\n<\/div>\n

[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/1″][vc_column_text uncode_shortcode_id=”326580″]<\/p>\n

\n

1. Orientation Exercise<\/h2>\n<\/div>\n

We began the course with small tasks to locate various places on campus, which helped us understand daily navigation patterns. We documented the process by filming ourselves. Later, we compiled our insights on a Miro board to identify potential improvements in the existing system.[\/vc_column_text][vc_gallery el_id=”gallery-369793″ type=”justified” medias=”134202,134203″ justify_row_height=”500″ gutter_size=”4″ single_shape=”round” radius=”xs” single_overlay_opacity=”50″ single_overlay_anim=”no” single_text_anim=”no” single_image_anim=”no” single_padding=”2″ single_border=”yes” custom_cursor=”light” uncode_shortcode_id=”143891″][vc_column_text uncode_shortcode_id=”614232″]<\/p>\n

\n

2. Ideation Phase<\/h2>\n<\/div>\n

After identifying potential problems, we held an ideation exercise in class. Each of us proposed ideas, which others could expand on. The activity was conducted in a timed, collaborative circle format.[\/vc_column_text][vc_gallery el_id=”gallery-369793″ type=”justified” medias=”134162″ justify_row_height=”500″ gutter_size=”4″ single_shape=”round” radius=”xs” single_overlay_opacity=”50″ single_overlay_anim=”no” single_text_anim=”no” single_image_anim=”no” single_padding=”2″ single_border=”yes” custom_cursor=”light” uncode_shortcode_id=”196745″][vc_column_text uncode_shortcode_id=”158185″]<\/p>\n

\n

3. Entry Points<\/h2>\n<\/div>\n

The entry points to the searching website are QR codes that can be scanned on campus, leading directly to the desired location. These QR codes are categorized into three types:<\/p>\n

QR1: Found under the \u201eGebaude\u201c section in the Physical Orientation System and at the entrances of buildings.<\/p>\n

QR2: Found under the \u201eCampusleben\u201c section in the Physical Orientation System and in areas dedicated to events, such as bulletin boards and poster walls.<\/p>\n

Detailed Navigation: Located on posters for specific events and integrated into digital platforms like Incom and Moodle workspaces.
\nThis system ensures seamless navigation and easy access to both physical and digital resources on campus.[\/vc_column_text][vc_gallery el_id=”gallery-369793″ type=”justified” medias=”134288″ justify_row_height=”500″ gutter_size=”4″ single_shape=”round” radius=”xs” single_overlay_opacity=”50″ single_overlay_anim=”no” single_text_anim=”no” single_image_anim=”no” single_padding=”2″ single_border=”yes” custom_cursor=”light” uncode_shortcode_id=”361859″][vc_column_text uncode_shortcode_id=”107298″]<\/p>\n

\n

4. Accessibility<\/h2>\n<\/div>\n
\n
\n
\n
\n

Accessibility was a central focus of our project, guiding key design decisions. To enhance inclusivity, we implemented features such as a \u201cno-stairs\u201d option, high-contrast mode, and customizable settings for text size and language selection.<\/p>\n

As part of the course, we participated in an inclusion workshop led by two representatives from Kopf, Hand + Fu\u00df<\/em>, an organization dedicated to working with people with disabilities. The workshop centered on digital inclusion, emphasizing that disability is not a deficit but a condition that requires individualized solutions\u2014“If you know one, you know one.”<\/em><\/p>\n

We explored best practices in accessible design, analyzing examples from the State Museum\u2019s website in Berlin, which offers simple-language content, sign language videos, large fonts, high-contrast visuals, read-aloud functions, and keyboard navigation.<\/p>\n

Applying insights from the workshop, we integrated accessibility principles into our prototypes, ensuring a more inclusive user experience.<\/p>\n

Later the team met in Berlin at Kopf, Hand + Fu\u00df to test the accessible prototypes. The experts had different backgrounds, including visual, motor, and cognitive impairments. After a brief introduction, each prototype was tested by an expert individually. The insights were useful to improve the prototype.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

[\/vc_column_text][vc_column_text uncode_shortcode_id=”203239″]<\/p>\n

\n

4.1 High Contrast<\/h2>\n<\/div>\n

An important feature for ensuring accessibility is high contrast. Thanks to this feature direction is guided in the AR Version by highlighting the destination point.[\/vc_column_text][vc_gallery el_id=”gallery-369793″ type=”justified” medias=”134271″ justify_row_height=”500″ gutter_size=”4″ single_shape=”round” radius=”xs” single_overlay_opacity=”50″ single_overlay_anim=”no” single_text_anim=”no” single_image_anim=”no” single_padding=”2″ single_border=”yes” custom_cursor=”light” uncode_shortcode_id=”568511″][vc_column_text uncode_shortcode_id=”199253″]<\/p>\n

\n

4.2 No-stairs button<\/h2>\n<\/div>\n

Accessibility was a key focus throughout the project. To address this, several features were implemented, including a \u201eno-stairs\u201c option, high-contrast mode, and customizable settings for larger text and language selection.[\/vc_column_text][vc_gallery el_id=”gallery-369793″ type=”justified” medias=”134305″ justify_row_height=”500″ gutter_size=”4″ single_shape=”round” radius=”xs” single_overlay_opacity=”50″ single_overlay_anim=”no” single_text_anim=”no” single_image_anim=”no” single_padding=”2″ single_border=”yes” custom_cursor=”light” uncode_shortcode_id=”582041″][vc_column_text uncode_shortcode_id=”504107″]<\/p>\n

\n

4. Accessibility<\/h2>\n<\/div>\n

Accessibility was a key focus throughout the project. To address this, several features were implemented, including a \u201eno-stairs\u201c option, high-contrast mode, and customizable settings for larger text and language selection.[\/vc_column_text][vc_gallery el_id=”gallery-369793″ type=”justified” medias=”134306″ justify_row_height=”500″ gutter_size=”4″ single_shape=”round” radius=”xs” single_overlay_opacity=”50″ single_overlay_anim=”no” single_text_anim=”no” single_image_anim=”no” single_padding=”2″ single_border=”yes” custom_cursor=”light” uncode_shortcode_id=”528574″][vc_column_text uncode_shortcode_id=”607885″]<\/p>\n

\n

6. User Flows<\/h2>\n<\/div>\n
\n
\n

This website offers a variety of functionalities. User flows outline the key actions that users can perform on the platform.<\/p>\n

 <\/p><\/div>\n<\/div>\n

\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n

[\/vc_column_text][vc_gallery el_id=”gallery-369793″ type=”justified” medias=”134317″ justify_row_height=”500″ gutter_size=”4″ single_shape=”round” radius=”xs” single_overlay_opacity=”50″ single_overlay_anim=”no” single_text_anim=”no” single_image_anim=”no” single_padding=”2″ single_border=”yes” custom_cursor=”light” uncode_shortcode_id=”189374″][vc_column_text uncode_shortcode_id=”784759″]<\/p>\n

\n

6.1 Flow 1: Using the explore page<\/h2>\n<\/div>\n
\n
\n

By using the explore page different locations of interest can be found. By clicking on one the map appears and it is then possible to navigate there.<\/p>\n

 <\/p><\/div>\n<\/div>\n

\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n

[\/vc_column_text][vc_gallery el_id=”gallery-369793″ type=”justified” medias=”134233″ justify_row_height=”500″ gutter_size=”4″ single_shape=”round” radius=”xs” single_overlay_opacity=”50″ single_overlay_anim=”no” single_text_anim=”no” single_image_anim=”no” single_padding=”2″ single_border=”yes” custom_cursor=”light” uncode_shortcode_id=”516264″][vc_column_text uncode_shortcode_id=”156004″]<\/p>\n

\n

6.2 Flow 2: Looking for a specific destination<\/h2>\n<\/div>\n
\n
\n

It is possible to look for a specific destination using the search bar.<\/p>\n

 <\/p><\/div>\n<\/div>\n

\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n

[\/vc_column_text][vc_gallery el_id=”gallery-369793″ type=”justified” medias=”134239″ justify_row_height=”500″ gutter_size=”4″ single_shape=”round” radius=”xs” single_overlay_opacity=”50″ single_overlay_anim=”no” single_text_anim=”no” single_image_anim=”no” single_padding=”2″ single_border=”yes” custom_cursor=”light” uncode_shortcode_id=”115313″][vc_column_text uncode_shortcode_id=”211954″]<\/p>\n

\n

6.4 Flow 4: Exploring events<\/h1>\n
\n
\n
\n
\n
\n
<\/div>\n
The map can also be used in event mode where live information can be found through map icons and filtering content.<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

[\/vc_column_text][vc_gallery el_id=”gallery-369793″ type=”justified” medias=”134241″ justify_row_height=”500″ gutter_size=”4″ single_shape=”round” radius=”xs” single_overlay_opacity=”50″ single_overlay_anim=”no” single_text_anim=”no” single_image_anim=”no” single_padding=”2″ single_border=”yes” custom_cursor=”light” uncode_shortcode_id=”100058″][vc_column_text uncode_shortcode_id=”617582″]<\/p>\n

\n

6.3 Using the interactive map<\/h2>\n<\/div>\n

An option is using the interactive map where information can be found through map icons and by filtering content.[\/vc_column_text][vc_gallery el_id=”gallery-369793″ type=”justified” medias=”134240″ justify_row_height=”500″ gutter_size=”4″ single_shape=”round” radius=”xs” single_overlay_opacity=”50″ single_overlay_anim=”no” single_text_anim=”no” single_image_anim=”no” single_padding=”2″ single_border=”yes” custom_cursor=”light” uncode_shortcode_id=”151366″][vc_column_text uncode_shortcode_id=”500108″]<\/p>\n

\n

7. Conclusion<\/h2>\n<\/div>\n

The course helped me think in a user-centric way, encouraging me to approach design from the perspective of the user\u2019s needs and experiences. It also inspired me to explore how physical design can interact with digital solutions and enhance the experience.<\/p>\n

After this course, I will explore the topic of orientation further. I would especially like to analyse other ways to enhance a physical orientation system.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

[vc_row unlock_row_content=”yes” row_height_percent=”0″ override_padding=”yes” h_padding=”0″ top_padding=”0″ bottom_padding=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”0″ z_index=”0″ uncode_shortcode_id=”101206″][\/vc_row][vc_row row_height_percent=”100″ override_padding=”yes” h_padding=”2″ top_padding=”5″ bottom_padding=”5″ back_image=”134174″ overlay_alpha=”50″ […]<\/p>\n","protected":false},"author":1,"featured_media":134174,"parent":0,"menu_order":8,"comment_status":"open","ping_status":"open","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"portfolio_category":[79],"class_list":["post-4142","portfolio","type-portfolio","status-publish","has-post-thumbnail","hentry","portfolio_category-ux-ui"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/lauragalvanetto.com\/index.php\/wp-json\/wp\/v2\/portfolio\/4142","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lauragalvanetto.com\/index.php\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/lauragalvanetto.com\/index.php\/wp-json\/wp\/v2\/types\/portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/lauragalvanetto.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lauragalvanetto.com\/index.php\/wp-json\/wp\/v2\/comments?post=4142"}],"version-history":[{"count":89,"href":"https:\/\/lauragalvanetto.com\/index.php\/wp-json\/wp\/v2\/portfolio\/4142\/revisions"}],"predecessor-version":[{"id":134318,"href":"https:\/\/lauragalvanetto.com\/index.php\/wp-json\/wp\/v2\/portfolio\/4142\/revisions\/134318"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lauragalvanetto.com\/index.php\/wp-json\/wp\/v2\/media\/134174"}],"wp:attachment":[{"href":"https:\/\/lauragalvanetto.com\/index.php\/wp-json\/wp\/v2\/media?parent=4142"}],"wp:term":[{"taxonomy":"portfolio_category","embeddable":true,"href":"https:\/\/lauragalvanetto.com\/index.php\/wp-json\/wp\/v2\/portfolio_category?post=4142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}