OstalbMobil - Redesign

In today’s fast-paced urban landscape, efficient and reliable public transport is essential for seamless connectivity. The emergence of different public transport apps has revolutionized the way we navigate cities, providing instant access to real-time information, route planning, and ticketing - all conveniently accessible through our smartphones.

Step 1: Understand

In our project, we worked on enhancing the OstalbMobil app, designed for specifically navigating public transport in the Ostalbkreis. Several shortcomings were identified, as the app reveals many inconsistencies, it lacks clarity and proves to be exceedingly confusing in terms of navigation and usability. Notably, essential functionalities such as ticket purchasing are absent, underscoring the pressing need for improvements to optimize user experience and overall functionality.

The App

Key Learnings

We conducted a thorough analysis of our app and also examined various other applications designed for public transport. Putting our findings together, we synthesized key insights, focusing on noteworthy aspects that stood out to us. We then collaboratively voted on prioritizing the most crucial areas for improvement, shaping our roadmap to enhance the OstalbMobil app.

User Profiles

In the next step, we connected with people who have used apps for navigating public transport before through interviews and surveys, questioning them about their experiences and problems. Armed with the gathered feedback, we crafted user profiles representing various potential users of our app. This strategic approach ensures that our design process is tailored to meet the diverse needs of our target audience, fostering a user-centric and inclusive development journey.

How-Might-We?

Having established our user profiles, we proceeded to articulate specific user needs for each persona. To channel these needs into actionable insights, we formulted “How might we…?” questions. These serve as guiding principles, directing our focus towards addressing and resolving the identified user needs throughout the redesign process.

Step 2: Explore

Ideation

With the groundwork laid, we initiated the actual design process. To foster creativity and rapidly generate a multitude of ideas, we kicked off with a sessions of “Crazy Eights”. Each iteration of crazy eights was dedicated to a distinct how-might-we question, allowing us to explore diverse perspectives and potential solutions. This dynamic brainstorming technique provided us with a rich pool of creative concepts to build upon as we embarked on the next phases of our redesign.

Wireframes

To determine the screens we needed and maintain clarity in our design process, we defined a use case to form the foundation of our app. This inital use case can be expanded with additional features later, primarily serving as a robut framework a guiding principle to ensure coherence throughout our redesign.

Building upon the identified use case, we started the sketching phase, creating preliminary wireframes for each screen within that specific scenario. This visual exploration allowed us to outline the layout, structure, and flow of the app, providing a tangible representation of our design concepts for further refinement and iteration.

Step 3: Materialize

Design Variants

We strategically chose keyframes to create design variants, fostering efficiency and visual cohesion. This disciplined approach provided a clear roadmap and accelerated development. The selected design variant established a consistent visual language across screens, ensuring overall cohesiveness and efficiency in our project.

Among the three design variants, each emanating distinct vibes, a decision had to be made. While the second variant stood out for its clarity and cleanliness - qualities we greatly admired - the ultimate choice veered towards the first variant. The allure of retaining the essence of the original app played a pivotal role in steering our design direction. In the pursuit of evolution, we found harmony in preserving the familiarity that users had come to associate with our product.

Styleguide

With the chosen design variant laying the foundation for our visual identity, the next crucial step in our design journey led us to the creation of a comprehensive style guide, which serves as the blueprint for our design language.

We integrated the two greens from the original app, establishing a visual bridge to familiarity. Complementing these, we introduced additional colours chosen to harmonize with the existing palette. Some stand out for colour coding and feedback, enhancing the user experience across our UI.

Our custom icon set was designed by us to match our typography. With careful consideration of line thickness, font characteristics, and symbol integration, our icons ensure visual harmony. Also choosing to create our own illustrations allows us to tailor visuals to our unique design language, fostering a more personalized and cohesive user experience.

Final Design

Step by step, we finalized each screen for our use case following the established guidelines. Our final app redesign emerged through more iterative processes and continuous refinement, embodying a thoughtful and purposeful evolution.

If you want to see the full redesigned app in action, check out our video!