Year 2023

Creating an Intuitive MVP App for Public Transit

- B2C App | Public Transportation -

Tasks balance

UX 65% / UI 35%

Project duration

3 months

Design System

Custom design

The team

6 members

Tools & Framework

Figma / Jira / Scrum

01 Prologue

Project Goals: Transforming Commuting

Having joined the Swedish 🇸🇪 public transport company's initiative to develop an advanced commuting solution, our team embarked on a rapid project to develop and test an MVP application. Our goal was clear: to create a user-friendly platform that would make travel easier for passengers throughout Sweden.

Through careful planning and collaboration, we outlined three primary objectives to guide our design process and ensure the app's effectiveness in improving the commuting experience.

1

Accurate Real-Time Tracking

One of our main goal was to enhance the accuracy of real-time tracking within the app, ensuring that commuters received precise and reliable arrival predictions. By minimizing discrepancies between estimated and actual arrival times, we streamlined travel planning and reduced waiting times for passengers.

2

Optimized Feature Discoverability

Our focus was on optimizing the discoverability of app features, making it easier for users to find and utilize key functionalities. This optimization aimed to enhance user engagement and encourage deeper exploration of the app's capabilities.

3

Usability Optimization for Seamless Navigation

Also, we have focused on optimizing the app's usability. By improving the simple user interface and trip planning features, we aimed to make it easier for users to research routes, access information and effectively plan their trips, ultimately improving their overall app experience.

02 Responsobilities

Scope of Work

Empathise

  • User research
  • Stakeholders interviews
  • User interviews
  • User observation
  • Competitive analysis

Define

  • Problem statement
  • User needs / goals
  • Persona development
  • Design requirements
  • Information architecture

Ideate

  • User stories
  • Sketching
  • User flows
  • Journey map
  • Story board

    Prototype & Test

  • Wireframes
  • Interactive prototypes
  • Micro-interaction design
  • Usability testing
  • A/B testing

Design assets

  • Component library
  • Style guide
  • Assets library
  • Pattern library
  • Accesibility guide
03 Market Analysis

Benchmarking for Innovation

This initial phase was designed to evaluate the app's viability and user interest, setting the stage for potential full development. To kickstart this project, I embarked on a market analysis 🔍, scrutinizing the competitive landscape of public transport apps, focusing on similar apps Såretrafiken, Movit, and SL Journey Planner.

Simultaneously, I assessed our app’s strengths, such as its comprehensive features and strong brand, and weaknesses, including marketing budget constraints, against external market challenges and opportunities. This dual analysis helped pinpoint our strategic position and potential growth paths.

04 Understanding Users

Empathizing with Commuters

In my capacity, I spearheaded a comprehensive user feedback initiative for the public transport app through an online short survey hosted on SurveyMonkey, a popular platform known for its robust capabilities in gathering user insights and pain points. This survey garnered responses from 102 users, shedding light on critical areas necessitating improvement within the app, including elevating real-time accuracy, optimizing the adaptation process, and enhancing overall accessibility.

05 Data Analysis

Identified Problems & Challenges

In a follow-up workshop with the team, we carefully analyzed the survey data, identifying recurring pain points and uncovering the nuances of user expectations. Through collaborative analysis, we turned these ideas into actionable goals, laying the groundwork for targeted improvements to improve the usability of the public transit app.

06 Creating Personas

Designing with Empathy

Using the results of my user research, I developed 3 personas Astrid, Agnes and Johan representing our diverse user base. These personas were created based taking into account specific demographic, psychographic and behavioral patterns. They played a key role in guiding the design process, ensuring that our solutions were precisely tailored to the actual needs of the users.

Responsive image
07 Optimizing User Flows

Digging Deeper

A deep dive into understanding user flows allowed me to map out the journey within our app, ensuring a logical and intuitive progression that aligns with user expectations. This process helped me strategically place features and develop a consistent navigation structure.

08 Wireframing Ideas

Laying the Groundwork

Before delving into the visual aspects, I focused on wireframing. In the wireframing phase, I created detailed blueprints of the app's structure. This involved sketching out each screen, focusing on the arrangement of key elements like real-time tracking features, route information displays, and personalized user settings. I used Figma to iterate these wireframes, ensuring each aspect of the app was logically and intuitively structured.

Responsive image
09 Testing Prototypes

Bringing Designs to Life

Interactive prototypes were developed to illustrate the main user flows, transforming our static designs into dynamic models. This process was iterative: I built prototypes, conducted usability testing with focused user group, gathered feedback, and refined the designs.

In usability testing comparing the placement of the "Add favourite route" feature between Option A and Option B, user satisfaction significantly favored Option A. Satisfaction scores were 35% higher for Option A, attributed to its more intuitive and accessible position. This evidence led to the selection of Option A for the final design, aligning with user preferences for a better overall experience.

10 What else?

Accessibility Focus

During the design process, I prioritized accessibility to ensure inclusivity for all users. For example, I tested WCAG guidelines and used Figma plugins to check contrast to ensure WCAG AA compliance according to the requirements provided. This commitment to accessibility underscores our commitment to ensuring that every user, regardless of ability, can interact seamlessly with our app, improving satisfaction and usability across the board.

Responsive image

Colour Library & Tokens

strongly believe in creating robust design systems early in the project life cycle. Additionally, adopting a modern approach to tokens and variables in Figma from the start allowed us to easily create a dark theme for the app. By creating a comprehensive library of colors and design tokens from the start, we simplified design iterations, fostered collaboration, and ensured consistency across all aspects of the project.

Interaction Design

After initial iterations, introducing micro-interactions could significantly improve the app's functionality. The featured videos illustrate not only how the app tracks buses in real time, but also the simple animation that complements the empty favorites page. This visual exploration highlights the subtle animation details that enhance user engagement by combining efficiency with aesthetic pleasure.

App Promo Video

In conclusion, we crafted an app MVP that placed a strong emphasis on a user-friendly design, enhancing the practicality of commuters' daily routines. Below, you can see a short app promo video created by me, demonstrating key features of the app.

11 Result

Outcome Overview

Unfortunately, due to my leaving the project before the official release of the application, I do not have access to comprehensive Key Performance Indicators (KPIs) to measure user satisfaction directly.

However, we can still evaluate the impact of my design input and determine how it may have contributed to the success of the project.

Time saving

Streamlining Project Scalability

Established a comprehensive design system with tokens and libraries, fostering efficient collaboration and ensuring design consistency. This streamlined process facilitated faster iteration, enhancing the user experience and reducing errors in the final product. Moreover, it laid a solid foundation for future updates, potentially saving valuable time and resources later.

Project efficiency

Guided Development Through Design

Prepared design deliverables and documentation to guide development, ensuring compliance with design intent, minimizing errors, and improving user experience. Detailed prototypes have greatly helped developers deliver features faster, minimizing iterations and rework, thereby increasing the overall efficiency of the project.

Advanced implementation

Increased App Adoption & Usage

Introducing an intuitive interface and streamlined features aims to boost future app downloads and daily active users. Monitoring these metrics will offer insights into the effectiveness of our efforts to drive increased adoption and regular usage among passengers. Additionally, should be gathered user feedback to continuously enhance the app's usability and meet passenger needs.

↑ Go to Top