Links — Floris Verloop

About me

Featured work

More work

Get in touch

About me

Featured work

More work

Get in touch

Comprehensive Case study of the Design Process

Research and Understanding

During the UI research phase, we conducted an in-depth analysis of the existing Uppsala Bicycle Garage application to identify its strengths and weaknesses. We reviewed the app's interface, navigation, visual design, and interaction patterns. Additionally, we performed a heuristic evaluation to assess the app's adherence to established usability principles and best practices. This evaluation helped us identify usability issues and areas for improvement, forming the basis for our design recommendations.

Project planning

Benefits of a research wall in design projects

Maintaining a research wall provided a centralized space for organizing research findings.
The research wall served as a visual reference for the team, keeping everyone aligned and informed.
It facilitated easy access to information and stimulated collaboration.
Having a holistic view of the project on the research wall encouraged creative thinking.

Double Diamond method

Discover: Conducted in-depth research and engaged with cyclists to understand their needs and pain points regarding bicycle services and repairs.
Define: Analyzed the research data to identify key problem areas and prioritize the most critical issues to address in the garage project.
Develop: Collaborated with a team of bike mechanics, designers, and community members to brainstorm innovative solutions and design concepts.
Deliver: Implemented the chosen solutions, such as streamlining repair processes and optimizing customer service to enhance the overall bicycle garage experience.

On-site visits to uncover user experience issues

Data Gathering & Analysis

01 Identify stakeholders

Chosen stakeholders: security personnel and international students.
Challenge: Addressing the unique needs of these two user groups.
Security personnel: Required a system for bicycle safety and security.
International students: Needed a user-friendly app accommodating diverse language preferences.
Meeting distinct demands of both stakeholders posed a challenge.
Required careful consideration and innovative design solutions.

Chosen stakeholders: security personnel and international students.
Challenge: Addressing the unique needs of these two user groups.
Security personnel: Required a system for bicycle safety and security.
International students: Needed a user-friendly app accommodating diverse language preferences.
Meeting distinct demands of both stakeholders posed a challenge.
Required careful consideration and innovative design solutions.

Chosen stakeholders: security personnel and international students.
Challenge: Addressing the unique needs of these two user groups.
Security personnel: Required a system for bicycle safety and security.
International students: Needed a user-friendly app accommodating diverse language preferences.
Meeting distinct demands of both stakeholders posed a challenge.
Required careful consideration and innovative design solutions.

02 Competitor Analysis

To gain insights and inspiration, we conducted a competitor analysis by examining other parking and bike-related applications. We explored their user interfaces, functionality, and features. This analysis allowed us to identify innovative solutions, industry trends, and best practices that could be applied to the redesign of the Uppsala Bicycle Garage app. By understanding the competitive landscape, we could ensure that our design would stand out and offer a superior user experience

03 Empathize

Empathy maps were utilized to understand the perspectives and needs of security personnel and international students.
Empathy maps captured their thoughts, feelings, behaviors, and aspirations related to the Uppsala Bicycle Garage application.
Stepping into their shoes fostered empathy and provided insights into their experiences, challenges, and desires.
Empathy maps deepened understanding of stakeholder motivations, frustrations, and expectations.
Insights from empathy maps informed design decisions and ensured the final solution met their unique needs.

04 Create ideation workshop structure

Design workshops were conducted during the user research phase.
Workshops aimed to engage participants and gather their perspectives, experiences, and preferences.
Goals included understanding user behaviors, identifying pain points, and generating ideas for app enhancements.
Futuristic design workshop approach envisioned future app states, exploring innovative ideas.
Participatory design approach actively involved stakeholders, integrating their insights into design concepts.
Workshops fostered collaboration, generated diverse ideas, and ensured alignment with user expectations.
Insights and feedback from workshops guided design development and contributed to project success.

Workshop Execution

Generating, diversifying, developing, sorting, and selecting ideas

Workshop Poster

05 Personas

Two personas were created: security personnel and international students.
The security personnel persona captured characteristics and needs of the security staff.
The international student persona represented preferences and expectations of students.
Personas guided design decisions and ensured a user-centered approach.

06 Customer Journey Maps

Creating a journey map visualized the end-to-end user experience with the Uppsala Bicycle Garage application.
Insights into users' emotions, pain points, and improvement opportunities were gained through touchpoint mapping.
Critical engagement moments were identified, leading to targeted solutions for user needs.
The journey map provided a holistic perspective, ensuring a seamless and cohesive user experience.
Design decisions aligned with user goals and delivered a satisfying journey.

Creating a journey map visualized the end-to-end user experience with the Uppsala Bicycle Garage application.
Insights into users' emotions, pain points, and improvement opportunities were gained through touchpoint mapping.
Critical engagement moments were identified, leading to targeted solutions for user needs.
The journey map provided a holistic perspective, ensuring a seamless and cohesive user experience.
Design decisions aligned with user goals and delivered a satisfying journey.

Creating a journey map visualized the end-to-end user experience with the Uppsala Bicycle Garage application.
Insights into users' emotions, pain points, and improvement opportunities were gained through touchpoint mapping.
Critical engagement moments were identified, leading to targeted solutions for user needs.
The journey map provided a holistic perspective, ensuring a seamless and cohesive user experience.
Design decisions aligned with user goals and delivered a satisfying journey.

07 Use-case design

Three use cases were designed for the prototype, addressing pain points and enhancing user experience.
Detailed design exploration considered user flow, interactions, and functionality.
Collaboration, along with persona and journey map references, refined the designs.
Use cases showcased bike check-in, real-time parking availability, and multilingual support.
Designs aligned with user needs, feasibility, and project objectives.
Use cases formed the foundation for a user-friendly and impactful prototype.

Prototyping

We focused on creating a Minimum Viable Product (MVP) that would address the core user needs and requirements identified during the research phase. We iterated on the design concepts and translated them into a functional prototype that simulated the key features and interactions of the Uppsala Bicycle Garage app. Through an iterative process, we refined the design, incorporating user feedback and ensuring a seamless user experience.

After validating the MVP through usability testing, we progressed towards creating a high-fidelity prototype.

Initial requirements

An interactive map which syncs with the garage.
Make sure users pick their bikes on time and not miss use the garage space.
Easy Onboarding process for users, especially for international students.
Track users and bikes that enter and exit the garage.

An interactive map which syncs with the garage.
Make sure users pick their bikes on time and not miss use the garage space.
Easy Onboarding process for users, especially for international students.
Track users and bikes that enter and exit the garage.

An interactive map which syncs with the garage.
Make sure users pick their bikes on time and not miss use the garage space.
Easy Onboarding process for users, especially for international students.
Track users and bikes that enter and exit the garage.

Prototype design

Incorporated an indoor map similar to the Maze Map where map connects user with the garage.
Introduced a security deposit where users were asked to make an initial payment to keep as a deposit.
Designed an easy registration page with less input fields.
Included multi-language options.
Incorporated tutorials and help.
Introduction Wizard that teach about the app.
Incorporated QR codes to track Check-in/ Check-out of users.
Introduced QR scanning to track available parking slots.

Incorporated an indoor map similar to the Maze Map where map connects user with the garage.
Introduced a security deposit where users were asked to make an initial payment to keep as a deposit.
Designed an easy registration page with less input fields.
Included multi-language options.
Incorporated tutorials and help.
Introduction Wizard that teach about the app.
Incorporated QR codes to track Check-in/ Check-out of users.
Introduced QR scanning to track available parking slots.

Incorporated an indoor map similar to the Maze Map where map connects user with the garage.
Introduced a security deposit where users were asked to make an initial payment to keep as a deposit.
Designed an easy registration page with less input fields.
Included multi-language options.
Incorporated tutorials and help.
Introduction Wizard that teach about the app.
Incorporated QR codes to track Check-in/ Check-out of users.
Introduced QR scanning to track available parking slots.

Incorporated three QR scanning in three steps to enter/exit the garage

Experience the Prototype: Watch a Video Walkthrough

Testing and Iterative Refinement

Participants were asked to perform specific tasks and provide feedback on their experience.
Usability tests helped identify usability issues, areas of confusion, and opportunities for improvement.
Feedback from users guided iterative refinements and enhancements to the prototype.
Usability testing provided valuable insights into user preferences, pain points, and satisfaction levels.
Findings from user testing informed design decisions and contributed to the overall success of the application.
User testing helped validate the effectiveness of design solutions and ensured that the final product met user expectations.

A/B Testing

Feedback from users

Expected subtle interactions.
Requested clickable free parking slots.
Requested Scale in and out functionality.
Users demanded detailed instructions about payment information and instructions.
In the first prototype, the payment methods were tricky and considered as a dark UX pattern by test users.
Requested to include different payment options.
Include easy signup methods using third parties
Having multi-language opportunity and tutorials was important.
QR scanning was important to secure the garage.
Users liked tracking available parking slots.
Scanning when exiting garage might be unethical in case of emergency situations.

Expected subtle interactions.
Requested clickable free parking slots.
Requested Scale in and out functionality.
Users demanded detailed instructions about payment information and instructions.
In the first prototype, the payment methods were tricky and considered as a dark UX pattern by test users.
Requested to include different payment options.
Include easy signup methods using third parties
Having multi-language opportunity and tutorials was important.
QR scanning was important to secure the garage.
Users liked tracking available parking slots.
Scanning when exiting garage might be unethical in case of emergency situations.

Expected subtle interactions.
Requested clickable free parking slots.
Requested Scale in and out functionality.
Users demanded detailed instructions about payment information and instructions.
In the first prototype, the payment methods were tricky and considered as a dark UX pattern by test users.
Requested to include different payment options.
Include easy signup methods using third parties
Having multi-language opportunity and tutorials was important.
QR scanning was important to secure the garage.
Users liked tracking available parking slots.
Scanning when exiting garage might be unethical in case of emergency situations.

Test Data Analysis

Proposed solutions

An indoor map of the garage which indicates free and taken parking slots, functions similar to the Google Maps.
Made sure the payment methods and instructions were properly informed in the interface that the user is not miss leaded.
Need to incorporate more payment methods.
Incorporate third party signup options such as Google.
Decided to move forward with including QR functionality.
Introduce a button (SOS) to the design where a user needs to exit immediately. which needs careful functional adjustments.

An indoor map of the garage which indicates free and taken parking slots, functions similar to the Google Maps.
Made sure the payment methods and instructions were properly informed in the interface that the user is not miss leaded.
Need to incorporate more payment methods.
Incorporate third party signup options such as Google.
Decided to move forward with including QR functionality.
Introduce a button (SOS) to the design where a user needs to exit immediately. which needs careful functional adjustments.

An indoor map of the garage which indicates free and taken parking slots, functions similar to the Google Maps.
Made sure the payment methods and instructions were properly informed in the interface that the user is not miss leaded.
Need to incorporate more payment methods.
Incorporate third party signup options such as Google.
Decided to move forward with including QR functionality.
Introduce a button (SOS) to the design where a user needs to exit immediately. which needs careful functional adjustments.

Interactive map improved after a design iteration, from left to right: version 1, version 1.1.

Final Solution and Evaluation

The goal of this project was to improve the bicycle garage experience for commuters. We redesigned the application to meet user needs and enhance user control through instructions, tutorials, and interactive maps. Due to constraints, we used QR codes for tracking instead of more advanced technologies. The current prototype focuses on international students, but future iterations will consider other user roles for a more inclusive design. Despite limitations, we believe the current solution is viable and can be further improved based on user feedback.

New Features

Tracking Check-in / Check-out.
Tracking available parking slots
Interactive maps
Park, change slot or pick up
Multilingual solution
Multiple Payment methods
Report problems
Easy onboarding
Includes tutorials.

Solution to lack of connectivity

Track bikes
QR codes at entrance and racks

Trustworthiness

Tutorial/onboarding
Easy login
“Help & Support” in head menu
Report service added to head menu

Language Issues

Unique to international students
Adding multilingual support

Granting User Control

Interactive maps
Notifications

Better Payment Solutions

Security Deposit
Additional payment methods

Next Project