Deutsche Sport & Olympia Museum App


Redesigning UI for Improved Usability

Redesigning UI for Improved Usability

ROLE

UI/UX Designer

UI/UX Designer
EXPERTISE

UX Design

UX Design
YEAR

2022

2022
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image

Getting started

Getting started

Getting started

The app provides services or resources directly to consumers, making it a B2C product. In B2C products, understanding consumer needs and offering a positive user experience is crucial. The German Sport & Olympic Museum has become the first museum in the world to digitally transform its entire infrastructure by introducing IoT and an innovative app by IT intouch company. Bluetooth beacons allow precise visitor tracking throughout the museum, creating a unique digital experience.

Timeline

From exploration to final design in 5 months

Background

The German Sport & Olympic Museum was a client of IT intouch, where my initial responsibility was to update the app's UI. Additionally, I also improved the app's UX

Problem description

Problem description

Problem description

Before implementing IoT technology and the app, the museum faced the challenge of making the experience more engaging and interactive for visitors, especially younger generations. The user interface (UI) was not given sufficient attention during the implementation phase. The design was not user-friendly.

Main Problems:

The design doesn't engage users.

The museum has difficulty attracting new audiences.

IT intouch requirments:

The app design hasn't been updated in years, change the app from the UI part.

Weather app image
Weather app image
Weather app image

Process

Process

Process

This category details the step-by-step approach taken during the project, including research, planning, design, development, testing, and optimization phases. Goal: Create an exciting user experience! Focus on improving accessibility

Research & Planning

I conducted desk research to identify challenges and user needs. I defined target audience segments and outlined key features based on user needs and market trends. Understanding user needs is essential for design.

Design & Prototyping

I worked closely with PM to create intuitive user interfaces and interactive prototypes. Based on user feedback, we made iterative refinements to the designs to enhance usability and visual appeal.

Development & Implementation

I prioritized feature development based on user feedback and technical feasibility. Implemented IoT algorithms to analyze user behavior and optimize recommendations.

Testing & Optimization

Conducting a User Experience Questionnaire (UEQ test) helped me assess and improved the design's usability. Gathered user feedback through testing and iteratively optimized the app based on usability metrics and user satisfaction.

Some User Feedback

Some User Feedback

Some User Feedback

Daniel Walleck

Daniel Walleck

@App Tester

@App Tester

When I open the app, there are so many buttons that it can feel a bit complicated. Simplifying the layout by grouping related buttons would make the app easier to use. It would be more intuitive and efficient to find what you need and navigate around.

When I open the app, there are so many buttons that it can feel a bit complicated. Simplifying the layout by grouping related buttons would make the app easier to use. It would be more intuitive and efficient to find what you need and navigate around.

Monire Wagner

Monire Wagner

@Tourist

@Tourist

This app doesn't encourage me to use it or play the game. Adding more interactive features and clearer instructions could make it more engaging and enjoyable.

This app doesn't encourage me to use it or play the game. Adding more interactive features and clearer instructions could make it more engaging and enjoyable.

Neda Rajabian

Neda Rajabian

@ International Tourist

@ International Tourist

As a tourist visiting this museum, I wanted to use the app, but I found it was entirely in German. Unfortunately, I don't speak any German, so I couldn't understand or use it effectively during my visit.

As a tourist visiting this museum, I wanted to use the app, but I found it was entirely in German. Unfortunately, I don't speak any German, so I couldn't understand or use it effectively during my visit.

Solution

Solution

Solution

Redesigned the app to ensure that navigation flows were straightforward, UI elements were intuitive, and content was easily accessible in multiple languages. Improving the UI will enhance visitor satisfaction by making it easier for them to navigate exhibits, access information, and engage with interactive elements.

Simplifying UI

Conducted thorough UI and redesign phase to prioritize user-friendliness. Focus on intuitive navigation, clear information display, and accessibility. The image under the buttons changes according to the museum's pictures. Simplifying the UI involved prioritizing essential elements, using clear visual hierarchy, and reducing unnecessary elements. This approach aimed to enhance user comprehension and navigation efficiency.

Attract younger generations of visitors

Offered interactive challenges that used IoT sensors to track and respond to visitor actions, ensuring easy access to all app feature.

Implementing IoT Technology

Created interactive exhibits that respond to visitor movements or provide real-time information based on location.

  • Clear navigation buttons

    The image under the buttons changes according to the museum's pictures.

    Weather app image
  • Multimedia guide

    Adding search bar in navigation bar swift.

    Displaying all features on the same page.

    Weather app image
  • Multimedia guide

    Full display of videos and informational images.


    Weather app image
  • QR Code screen

    Scan the QR code to access the ticket. allow users to fully access the app.

    Weather app image
  • Start guide

    Creation of an interactive museum map. Instant display to find the objects and do the game.


    Weather app image
  • Clear navigation buttons

    The image under the buttons changes according to the museum's pictures.

    Weather app image
  • Multimedia guide

    Adding search bar in navigation bar swift.

    Displaying all features on the same page.

    Weather app image
  • Multimedia guide

    Full display of videos and informational images.


    Weather app image
  • QR Code screen

    Scan the QR code to access the ticket. allow users to fully access the app.

    Weather app image
  • Start guide

    Creation of an interactive museum map. Instant display to find the objects and do the game.


    Weather app image

Usability Test

Usability Test

Conducted a usability test to evaluate the app's effectiveness and user-friendliness by Figma App. After conducting the usability test, I implemented the following changes:



  • adding multiple languages

    Added multiple languages according to their users

    Weather app image
  • Merged pages

    Merged two pages into a single page for improved navigation and efficiency. (Multimedia guide and Herausforderung)

    Weather app image
  • Added hamburger menu

    A hamburger menu when clicked or tapped, opens a navigation drawer.

    Weather app image
  • Multimedia guide

    Created a white mode option to improve visibility and reduce eye strain for users in Info screen.

    Weather app image
  • Start guide

    Creation of an interactive museum map. Instant display to find the objects and do the game.

    Weather app image
  • adding multiple languages

    Added multiple languages according to their users

    Weather app image
  • Merged pages

    Merged two pages into a single page for improved navigation and efficiency. (Multimedia guide and Herausforderung)

    Weather app image
  • Added hamburger menu

    A hamburger menu when clicked or tapped, opens a navigation drawer.

    Weather app image
  • Multimedia guide

    Created a white mode option to improve visibility and reduce eye strain for users in Info screen.

    Weather app image
  • Start guide

    Creation of an interactive museum map. Instant display to find the objects and do the game.

    Weather app image

Results

Results

Results

These improvements likely contributed to increased usage, higher customer satisfaction scores.

Improve Accessibility

Merged two pages into a single page for improved navigation and efficiency.

Simplified the user interface to enhance usability and minimize confusion.

Added support for multiple languages to a diverse users and improve accessibility.

Increase Customer Satisfaction

Measure through user feedback surveys before and after the changes. Aim for a specific percentage increase in satisfaction, such as an increase of customer satisfaction by 15%.

Create a free website with Framer, the website builder loved by startups, designers and agencies.