Tender Tracker
KKL Organization internal system
Project Overview
Over the past two years, KKL has undergone a digital transformation aimed at improving user experience, enhancing workflows, and advancing internal systems. As part of this transformation, the "Tender Tracker" system was developed to gather all relevant information about tenders in one place, providing an up-to-date picture for management, decision-making, and internal communication.
My Role In This Project
In my work on KKL's internal system, The tender system was created from scratch by me, I based it on the old system workflows and created a new concept and UX design to all the various features and flows.
The following pages showcase some of the complex work processes and designs I have been working on. There were 4 main workflows and over 70 pages in total.
It should be noted that they are not the final design and are subject to further refinement and iteration.
Collaborating closely with Product Managers, System Analysts, lead UX designer, UI designer, and Developers.
Discovery Phase
Problem Statement
The existing tender management system poses significant challenges such as a complicated work process, disordered information overload, and lack of indication of work stages.
These challenges adversely impact the system's performance, hamper the user experience, and disrupt efficient workflow processes.
Based on my direct interactions with the product manager, I understand that to overcome these challenges, there was a pressing need to improve the tender management system's functionality, work processes, technology, and user experience by delivering a more intuitive and adaptable system.
Old system
Research
User observation and interview
I observed the users, checking their work environment, how and when they used the product, and their user flows and scenarios. After the observations, I conducted interviews with the users to identify pain points.
Who are our users?
KKL organization workers use the internal systems on a daily basis.
Tender managers enter the control and management process.
What are they doing?
In the system, users can create new tenders, then submit them
After adding suppliers who participated in the tender, they select the winning suppliers based on predetermined criteria. Following that, they continue to manage the tender and keep up with the established procedure for many years to come.
When will they use the product?
On a daily basis for opening and documenting or for short or long-term monitoring of the tenders.
The Solution
-
Holistic tender management system for real-time updates and optimal efficiency
-
Optimizing relevant actions for Improved user experience to reduce cognitive noise
-
Enhanced navigation: dividing tenders into phases and subphases
-
Efficient communication: direct messaging feature for committees
-
Dashboard for monitoring and control of tenders: visualizing progress in real-time
Result of the UX design
Home Page
The home page is a critical gateway to the system, allowing users to access additional interface pages and navigate the system.
1. To create efficient communication and real-time updates the upper bar features notifications and reminders for the tenders they manage and provides users with quick access to new updates.
2. As part of enhanced navigation, the home page prominently displays four main navigation buttons in the center, as well as an alternate navigation option via the side menu, which opens when users click the tree icon.
Offering different navigation options can enhance usability and accessibility for users with different abilities and preferences. It also accommodates varying levels of familiarity with the system, making it a more versatile and user-friendly option.
1
2
2
Once they enter the relevant button they get to the page of existing tenders
1. In that page has a search features option as well as an advanced search function that enables the user to locate a specific contact or tender.
2. The user is directed to a table of all the engagements in the system.
3. If the user wishes to create a new tender, they can simply click on the "Add a New Tender" button.
3
1
2
Page Header
In designing the UX for this tender management system, the primary objective was to make the workflow simpler and more manageable for users. To achieve this, breaking the whole process down into stages seemed like the logical solution.
After researching and considering different options (As shown below), I consulted with users and the product manager to determine the optimal approach. We ultimately decided to divide the process into three main steps: Tender creation, Tender suppliers, and Tender management.
This step-by-step approach makes it easier for users to understand the workflow and the order in which they need to complete tasks. It reduces the cognitive load and makes the process less overwhelming. The simplicity of this approach improves the user experience by allowing users to focus on one task at a time and complete it efficiently.
Different options for navigation bar
To further improve the user experience, several elements were created at the top of each page.
1. The title of the page with breadcrumbs and status provides context and indicates the user's current position.
2.The side menu provides users with an additional navigation option, making it easier to move between different parts of the system.
3.Communication features were added to enable users to communicate with the committee during the request process. This can be helpful when users have questions or need additional information (described further below).
4. The navigation bar allows users to move through the three focused steps: Tender creation, Tender suppliers, and Tender management. This helps to simplify the process and make it easier for users to understand.
5.The printer icon allows users to print the page information as needed, making it easier to keep a hard copy of the information.
6. Finally, an information bubble was added for more details on the process and to assist users in understanding the requirements. This can be especially helpful for users who are new to the system or are not familiar with the tender management process.
Overall, these UX design decisions were made with the user in mind, to simplify the process, and make it more manageable and user-friendly.
1
2
3
6
5
4
Step 1 - Tender creation
The UX design decisions for this new tender workflow were focused on making the process more efficient and user-friendly.
One major decision was to simplify the workflow by breaking it down into nine short steps. This helps to reduce cognitive overload and makes the process more manageable for users.
1. The form displays relevant fields for each step only, rather than overwhelming the user with all possible options at once. This helps to streamline the process and reduce confusion for the user.
2. The side stepper component was also included to help users track their progress and know where they are at any given time. This helps to give users a sense of control and makes the process feel more manageable.
Overall, the UX design decisions were focused on creating a more intuitive and streamlined tender creation process that improves the user experience.
2
1
Page Footer
There are several buttons at the bottom of the page that facilitate the user's workflow:
1. The navigation back button allows users to return to previous pages and review their work.
2. The primary action button, placed in the center of the bar, has a distinctive shape and color to draw attention
and emphasize its importance. This button typically advances the user to the next step in the workflow.
3. The save button allows the user to save their work and exit the process, in case they need to return later.
4. The disable button appears only in the last step, indicating that the user has completed the necessary steps
and the tender is ready for comment review.
5. After the tender receives approval, a new button appears allowing the user to proceed to the next primary step
of tender suppliers.
5
4
3
2
1
Step 2 - Tender Suppliers
The second step in the tender creation process is adding suppliers who have entered the tender.
The user is required to enter all essential information about the suppliers, such as their details, contacts, documents, options, extensions, and more.
The following step is selecting a winning supplier from the list, after which the contract will be continued with them.
By breaking down the supplier addition process into clear steps and presenting only relevant information at each stage, the system can help users better understand the requirements and progress through the process more efficiently.
To improve the process of adding suppliers, we offer two options:
1. Users can upload a supplier file from Excel, which will be scanned to import the initial supplier information into the system.
2. Alternatively, users can manually add new suppliers by clicking on the "Add New Suppliers" button.
2
1
The supplier addition process involves the following steps:
1.The user can access the supplier table by clicking on the "Add New Suppliers" button. The table displays new suppliers or existing suppliers and allows the user to search for a specific supplier by name in the search field. Once the desired supplier is found, the user can select it and move on to the next step. This is the first step of the three-step process.
2. To assist the user in tracking their progress and knowing which step they are on, a side stepper component is implemented. This helps users to easily navigate through the supplier addition process.
2
1
Step 3 - Dashboard Tender Management
The Dashboard is a crucial addition to the workflow as it allows users to track and create actions in the system. It was not included in the previous system, but through research, it was found to be necessary. The Dashboard provides a comprehensive view of all tender stages and financial expenses, which is beneficial for managers.
1. The design incorporates tabs to facilitate easy navigation between different parts of the system and to initiate
actions effortlessly.
2. This section of the dashboard displays a real-time report on financial expenses, suppliers, and other
parameters that provide insights into the market. Users can easily access this information to stay up-to-date
with the latest trends and make informed decisions.
3. In this section, we have added various features that enable users to add tender tags for easy identification and locating.
Additionally, we have included new parameters that have been identified as necessary for research
purposes. These improvements make it easier for users to manage tenders and improve the overall user
experience.
1
2
3
Action Connection Feature
The Action Concentration feature simplifies the process of opening a request for each action currently required and allows users to contact the committee and perform additional actions from all screens. This enhances the visibility and service and is based on existing conventions from mobile, making the user experience simple and convenient.
1. By clicking on the round button that appears on all screens in the system, a window opens that allows the user four main actions: performing actions, adding documents, creating reminders in the system, and correspondence. Each action is represented by an alert number displayed next to it. To add a new action, the user can click the plus icon.
This design is intended to streamline the user experience by providing a clear indication of available actions and simplifying the process of adding new ones.
1
Conclusion
It has been a demanding and rewarding journey designing this Complex system. Taking an existing system and making it intuitive and efficient for users were clear goals from the beginning.
It was also challenging to create all various workflows and lots of wireframes with many features, with a strong focus on usability and experience and I found it very satisfying and teaches.
Working on a real-world project with professionals was exciting. This experience was invaluable and helped me develop skills that are hard to replicate in the academic world- like creating a UX project that continues and develops.
What did I learn?
Reflection