Case Study 1
Case Study 1
Enhancing the
Bus Management System
Bus Management System
for City Government
Welcome to my first solo project. During my first solo project at an IT company specializing in government solutions, I organized tasks effectively, communicated regularly with other teams, and frequently sought my mentor's advice. This guidance was key to the project's success despite the challenges faced.
Welcome to my first solo project. During my first solo project at an IT company specializing in government solutions, I organized tasks effectively, communicated regularly with other teams, and frequently sought my mentor's advice. This guidance was key to the project's success despite the challenges faced.
AFTER
AFTER
BEFORE
BEFORE
Challenge: Developed five years ago, the system now needs a website with a focus on enhancing user engagement, reducing time spent on tasks, optimizing navigation, and accommodating the evolving requirements of additional functions.
Challenge: Developed five years ago, the system now needs a website with a focus on enhancing user engagement, reducing time spent on tasks, optimizing navigation, and accommodating the evolving requirements of additional functions.
Tools Used: Figma, FigJam, Maze, Adobe Illustrator
Tools Used: Figma, FigJam, Maze, Adobe Illustrator
My Role: Entire product design from research to conception, and visualization
My Role: Entire product design from research to conception, and visualization
Project Time: 2 months
Project Time: 2 months
Sector: Traffic, Management
Sector: Traffic, Management
PROJECT GOALS
PROJECT GOALS
Integrated Communication Channel and Role Access
Develop a robust system for seamless communication between administrators and stakeholders while implementing role-based user access for enhanced security and usability.
Integrated Communication Channel and Role Access
Develop a robust system for seamless communication between administrators and stakeholders while implementing role-based user access for enhanced security and usability.
Optimize User Flow and Data Management Process
Develop a streamlined and efficient data input process that simplifies user interaction and information submission. This enhancement aims to reduce errors, improve usability, and optimize the overall user flow within the system.
Optimize User Flow and Data Management Process
Develop a streamlined and efficient data input process that simplifies user interaction and information submission. This enhancement aims to reduce errors, improve usability, and optimize the overall user flow within the system.
Enhanced Functionality Implementation with Minimal Design
Develop and integrate a robust search function and essential features with a minimalistic design tailored for low-tech users, enhancing the efficient monitoring and management of all public infrastructure elements within the system.
Enhanced Functionality Implementation with Minimal Design
Develop and integrate a robust search function and essential features with a minimalistic design tailored for low-tech users, enhancing the efficient monitoring and management of all public infrastructure elements within the system.
Business Objectives
Business Objectives
Streamlined Communication and User Roles
Establish efficient communication channels between administrators and team members while supporting different user roles and permissions. This not only saves time through quick and accurate information exchange but also tailors system access based on diverse stakeholder needs, enhancing security, effective collaboration, and ensuring that each user group has the appropriate level of access to relevant features.
Streamlined Communication and User Roles
Establish efficient communication channels between administrators and team members while supporting different user roles and permissions. This not only saves time through quick and accurate information exchange but also tailors system access based on diverse stakeholder needs, enhancing security, effective collaboration, and ensuring that each user group has the appropriate level of access to relevant features.
Enhanced Data Entry
Data entry process directly influences the system's efficiency in tracking and managing bus infrastructure, routes, and operational updates. As the digital core of the city's public transportation network, improving data input is crucial for saving time and ensuring data accuracy, resulting in an improved user experience.
Enhanced Data Entry
Data entry process directly influences the system's efficiency in tracking and managing bus infrastructure, routes, and operational updates. As the digital core of the city's public transportation network, improving data input is crucial for saving time and ensuring data accuracy, resulting in an improved user experience.
Simplify User Tasks, Workflows and Designs for Low-tech Users
This improvement is particularly important for our primary user group aged 30-40, who tend to have lower technical proficiency. Simplification in this context greatly assists them, making the system more accessible and user-friendly, thereby significantly enhancing their experience and engagement.
Simplify User Tasks, Workflows and Designs for Low-tech Users
This improvement is particularly important for our primary user group aged 30-40, who tend to have lower technical proficiency. Simplification in this context greatly assists them, making the system more accessible and user-friendly, thereby significantly enhancing their experience and engagement.
the journey
Following the clear identification of business requirements, I delve into further research and analysis. As this management website is exclusively for internal use, external market comparisons are not feasible. Given this constraint, a heuristic evaluation for the Bus Management System becomes very necessary. Conducting this evaluation early on is crucial for pinpointing usability issues, ensuring alignment with business requirements, and facilitating efficient iterative design. This approach is particularly valuable since the system was primarily developed by an IT team with limited design or usability considerations. It allows proactive identification of usability challenges, tailoring the system to user needs, and iterative improvements without relying on external market research data.
Heuristic Evaluation
Visual Aesthetic
Inconsistent color schemes between main and sub pages make the design lack cohesion.
Some color combinations do not meet ADA accessibility standards.
Labels and names for cards are inconsistent throughout, making navigation difficult.
Information Display
Information often gets cut within columns, with no way to display all the data, impacting data completeness and user understanding.
Consistency and Standards
Icons used on cards are are complex with a lot of strokes and vary widely so it's difficult to see.
The buttons are placed in different areas in the page, creating confusion and inconsistency.
Error Prevention
Lacks confirmation dialogs for critical actions like no 'undo' or 'cancel', increasing the risk of accidental data deletion or errors.
Provides no error messages and no guidance for users to identify and address issues effectively.
User Support
No user guidance
No communication channel
No user role classification
Quantitative research and User interview
I surveyed 27 users and interviewed 1:1 5 users. The goals were to understand their difficulties in navigating information, updating, saving data, and gaining feedback on the current design. I sorted the interview responses and survey questions with similar topics, which allowed me to identify trends and patterns. These insights have helped me generate the users' pain points.
Data entry and information update
"Pulling data from the system is a headache. It's so time-consuming that I feel tired even opening the application. I wish I could get the information I need with a few clicks."
"The lack of automation is anxious. It feels like I'm transcribing data from one place to another, and the risk of errors is constantly hanging over my head."
What specific challenges have you faced when performing data entry or information updates in our system?
How confident are you in the accuracy and completeness of the data you enter or update in the system?
» Analysis: There are users experience challenges with data entry and information updates in the system, primarily due to its complex navigation (42%) and time-consuming processes (35%). This suggests that the system currently lacks user-friendly navigation, efficient data entry processes, and clear guidelines, leading to user frustration and concerns over data reliability.
Website guidance
"I'm not a tech expert, and the lack of guidance on the website makes me feel lost. I'd appreciate some hints or a tutorial to help me get a handle on things."
"The lack of clear instructions or step-by-step guidance is a major roadblock. I'm constantly unsure if I'm performing tasks correctly or missing out on essential features."
How clear and user-friendly do you find the overall user interface?
Have you found user guidance and tooltips helpful in using the system?
» Analysis: There is a significant need for improved guidance and clarity on the website, as 55% of survey respondents find the user interface confusing or very confusing, complementing interview feedback about the lack of clear instructions. The majority of users report that user guidance and tooltips are only sometimes, rarely, or never helpful, underscoring the necessity for more intuitive and instructive support within the system.
Search tool
"Not having a proper search tool is a huge setback. I spend more time scrolling through pages than actually finding the information I need. It's like searching for a needle in a haystack."
"The lack of a search tool is a major pain point. I often have to click through multiple menus to find what I'm looking for. It's counterproductive and wastes a lot of time."
"I find myself longing for features that should be standard. The absence of a search tool and other conveniences hampers our workflow. Implementing these features would greatly enhance our experience."
Please rate your satisfaction with the search and filtering options on the bus management system:
What challenges have you encountered while using the search function?
Do these challenges impact your efficiency in managing bus operations?
» Analysis: The absence of an efficient search tool is a critical issue, as highlighted by 43% of survey respondents being dissatisfied or very dissatisfied with the current search and filtering options, aligning with interview feedback about the difficulty in locating information. Furthermore, an overwhelming 89% of users confirm that challenges like confusing navigation (79%) and inadequate search tools (64%) significantly affect their operational efficiency.
Communication channel and User role access
"We keep changing communication tools like Zalo and Teams because after a while, each one starts having issues, disrupting our workflow."
"We're all given the same access in the system, which isn't practical. As a supervisor, I want my team to see their assignments without the ability to modify them, but that's not possible right now."
What specific features would you like to see in a dedicated communication channel within the system?
If user roles were implemented, which of the following features would you find most useful?
» Analysis: There is a strong need for a dedicated communication channel with features like user tagging (96%) and automated notifications (79%), as well as a robust user role system with role-specific access (100%) and customizable permissions. These enhancements are crucial for improving workflow efficiency, user interaction, and overall system functionality.
user persona
Thu Nguyen
After analyzing User Data and User Persona, here are the Pain Points that I came up with. These Pain Points, consistently highlighted by the users, reflect critical areas in need of improvement to enhance the overall user experience and operational efficiency.
Pain Points
Inefficient Data Entry
Inputting and updating bus route information in the system is not only time-consuming but also prone to errors, leading to inefficiencies and data inaccuracies that frustrate users. A more user-friendly interface and streamlined data entry process are essential to improve the system's efficiency and reliability.
Limited User Guidance and Search Functionality
Users struggle with unclear user guidance and inadequate search capabilities, making navigation and information retrieval, like finding specific bus stops or routes, both ineffective and time-consuming, thus efecting overall user productivity and system management effectiveness.
Lack of Communication and Role Management
Absence of a integrated communication channel with essential features like user tagging and automated notifications, as well as the lack of a role-specific access system in the current setup lead to inefficiencies and challenges in user collaboration and task management.
After identifying the 3 main Pain Points and Business Requirements, I started asking the “How Might We” questions to transform user pain points into opportunities for creative and actionable problem-solving
How Might We?
Improve user guidance and search features for rapid, specific information retrieval to save time?
Automate data and retrieval procedures to reduce manual labor and boost user productivity?
Introduce integrated communication channel and role based access to improve collaboration and efficiency?
Solution Statement
My solution focuses on optimizing the bus management system by automating data processes and introducing advanced search and user guidance tools for quick, precise information retrieval. Additionally, it integrates a comprehensive communication channel and role-specific access to enhance collaboration and system efficiency.
I create user flows after defining a problem statement to understand how users will interact with my solution and to ensure it's intuitive and efficient. This approach helps me identify and address potential user pain points early in the design process.
User Flow
I crafted this new user flow, maintaining its similarity to the old one, by identifying and merging similar actions across various tasks. Despite the presence of different sub-pages for tasks like Facility, Proposal, and Maintenance, the core actions – viewing and searching information, editing, and exporting data – are fundamentally similar. Therefore, aimed to make the flow of the subpages to be as uniform and simple as possible, enhancing ease of navigation, especially for low-tech users.
In the upcoming design featured in this case study, I will primarily focus on the Facility flow, as it represents the most frequently used page for task execution. This focus will allow for a detailed exploration and user experience that are most critical to our users' daily operations.
the SOLUTIONS
user task
- Visit the Home page
- Navigate to the Facility subpage
- View and Add new us stop details
- Check the newly added bus stop on the Map.
Sketches
THANK YOU FOR YOUR VISIT
Please check out my and for more.
© 2024 PORTFOLIO
by anH V LE
Low fidelity prototype
Design System
Aa
Default
Focus
Hover
#1F6BC1
#134074
#EAF3FB
Open Sans
Usability testing
Due to time constraints, I conducted usability testing with my high-fidelity prototype instead of mid-fidelity, planning to make adjustments based on the results later. I divided the task into two smaller flows due to the limitation of free Maze, which restricts the number of questions per flow.
Participants: 26
Tool Used: Maze
Flow 1:
Access Bus stop list and click on button information
Add Bus stop detail by selecting "Add using Excel, CSV" option
Upload and save
Flow 2:
Access Bus stop detail
Delete Bus stop
View filtered locations on Infrastructure map
Key findings:
96%
84%
92%
100%
users agreed that the process of adding a new bus stop on the redesigned website is easier
users reported the new data entry process saved around 10 minutes versus manual entry
users agreed that the instructional materials and guidance are clear to understand
users said that the visual design and layout of the new system are excellent
User feedbacks
Most usefull features:
Automatic data upload (7 users)
Deletion impact notification (6 users)
Room for improvement:
Clearer instruction accessility (4 users)
More space to view bus stop list (2 users)
After receiving usability testing performance results and feedback, I began making adjustments to the high-fidelity prototype.
HIgh fidelity prototype
Home page
before
after
To improve usability, I resized visualization cards based on usage frequency, aiming for prominence of popular features. Since the current website lacks usage metrics on time spent and clicks for each page, I sent out a survey asking users which pages they access most often and relied on the survey responses to determine the more commonly used visualizations and increased the card size accordingly.
LIST
after
before
Improvements from Usability Testing: More space to view bus stop list
Sub-menu items can now be collapsed into smaller versions. This maximizes available screen space, allowing users to customize their interface for optimal content focus and a spacious user experience.
FLOW
Go to Facility --> List
Collapse the Side bar
ADD
after
before
Improvements from User Pain points: Inefficient Data Entry
Besides enabling automatic data upload, I've also made it possible for users to upload pictures simultaneously, streamlining a process that previously the users must first enter information and then navigate to the Detail page to add pictures.
Improvements from Usability Testing: Clearer instruction accessility
I've integrated user guidance in headers and sub-navigation to provide clear and context-specific instructions, ensuring users can easily navigate and understand the functionalities of the website, thereby enhancing the overall user experience.
detail
after
before
I relocated the Chat box and Export function to the right sidebar to consolidate associated tools into one consistent location. Additionally, I tailored the sidebar with page-specific functions such as edit history, guidance, and archive options to simplify the data retrieval process. Now, users can conveniently access all necessary functions from the unified right sidebar.
FLOW
Add new Bus stop by using Excel file
Add Image inside the Add page
Save
FLOW
Go to Detail page --> Edit
Save
detail
I placed both the main navigation and sub-navigation on the left side of the website to create a structured and user-friendly layout. This design choice allows users to easily access both primary and secondary content. Additionally, considering the potential expansion of the website's scope beyond infrastructure, this layout ensures efficient navigation through a complex hierarchy of flows, enhancing the user experience.
Improvements from Heuristic Evaluation: Information Display
To solve the issue identified in the heuristic evaluation, I've organized the information in a line break table, with full display, to present data clearly and visually cleanly, enhancing readability.
Pop-up confirmation
DELETE
RETURN
save
Confirm
Improvements from Heuristic Evaluation: Error Prevention
I included detailed information in the delete popup, allowing users to understand the potential data affected by the delete action, and provided an option to view "Detail" to enable informed decision-making before proceeding with the deletion. This added feature was favored by users during the Usability Testing phase, with 6 users expressing a preference for it. Additionally, I implemented Return, Save Confirm popups as a double-check mechanism to prevent errors and ensure users are aware that their actions have been successfully executed.
FLOW
Go to other sub pages inside Detail page
View the Instruction object
Delete
Map
Search
location
Improvements from User Pain points:
Lack of Search Functionalities
I introduced a search box and dropdown menus, enabling users to easily filter map routes or locations based on their specific needs. The filter selections were positioned at the top left, allowing users to clearly see their active filters and effortlessly remove them if desired. This layout maximizes screen visibility for the map, enhancing the user's ability to view details without obstruction.
Users can click on map locations to display detailed information, offering a faster way for users to access data without returning to other pages. By clicking on the "Detail" button, users can immediately jump to the Detail page of that specific bus stop for more comprehensive information.
Role management access
Manager
Member
Improvements from User Pain points:
Lack of Role Management
I customized the website to provide different levels of access to users depending on responsibilities, ensuring that executives, managers, and members have the appropriate levels of access, thereby enhancing data security and simplifying their interactions with the system. Example: The administrator has the ability to edit and delete bus stop information in the list, along with access to other functions on the right bar navigation. On the other hand, members can only view the list without making any changes and have limited functionality on the right bar navigation.
FLOW
Go to Facility --> Infrastructure map
Filter the Locations
Click on the Location to view Location detail
take aways