Redesigning a Vendor - Contract System for the Government
Redesigning a Vendor - Contract System for the Government
Deloitte Digital | UX Research, Strategy, Ideation, Design
Embedded Files
OVERVIEW
OVERVIEW
The Department of Transportation maintained this portal to ensure compliance and tracking minority goals against vendors, contractors and subcontractors, mostly targeted for comprehensive data storage and fair practise. The project goal to update the overhaul design of the application based to modern standards, simplify the user journey aligned with user needs while not reducing any functionality.
PROBLEM
Complicated user navigation that burry the primary functionality and leads to dead ends
Abundant scrolling due to information overload and no clear hierarchy
Redundant and repetitive user actions that confuses the user and brings no value
No room for error prevention and user control and lack of support from the website
Inconsistent design across the website that hampers the recognition and flexibility of use
SOLUTION
To have an unified design approach and system across all the pages and categories
Break down the user journey and make it seamless with supportive help and error recognition and prevention
Update the design and verbiage with current standards to emphasise on consistency and familiarity of users.
Reduce the information overload by driving down hierarchy and an improved design system
MY TEAM & ROLE
As part of UX, I worked upon competitive analysis, high level UX audit, user persona building and refining the Information Architecture and User Journey
As part of UI or Visual Design, I updated the design system based on current design standards and redefined the navigation based on customer journey
TIMELINE
The project was completed in 2.5 months, excluding the development and handoff
First 2 weeks were spent in understanding the user story, drawing user persona and user journey
Next few weeks, on being aligned with the stakeholders, we worked on the design module-wise in an agile way
Last 2 weeks was spent on Prototyping and building it according to the user persona's story and design iterations based on peer and client feedbacks
THE PROCESS
Understanding Pain Points of Current Product
We conducted stakeholder interviews to understand the current product and its offerings. They have mutiple ways to create a contract, add respective data and monitor them.
Sneak Peek into the Process we followed to understand the Current Requirements
Current Product & Primary Goals
We understood that there were multiple reasons for which users were abandoning the process and leaving the website. That they were required to undergo training to start using the platform and had lower memorability. There was lack of help and support in contrast to the extensive information offered that made the process tedious. Users expect the same effortless experience with a government website as do with private sector websites. We gathered insights based on that which would help us achieve satisfactory user experience and reduce the search or process time.
Understanding the Users
The portal allows officers and managers to manually update the data of the contracts and the contractors. The manager assigns the tasks to the officer. Since the task consist of sieving through huge amount of data, their primary motivation is to make that process efficient with better data funeling, comprehensive tracking and searching and faster data addition to keep track of fair practises and transparency
Manager user profile
Analyst or Officer (with limited access) user profile
Managing the heavy Content of the Page
Our goal was to summarize our information into succinct blurbs that fit nicely on the page. For that we needed to understand what content can be dumped, what needs to be carried over to your new site and what needs repurposing. The steps we followed to do the content audit was :
We identified the user needs for each page and how closely it is met
We checked if the information has been repeated or hidden under different terminologies.
We checked with Business to understand any legal requirement
Action : Based on these, we retained the information that was only absolutely necessary on that page. And we decided whether the pages should be kept, merged or deleted
With the redesign, now every page has these elements:
Visibility of system status through the name of the page
Breadcrumbs for easier navigation
Categorisation of information in hierarchy with with distinct Name for each section. Additional Information in dropdown or pop-up
Consistent content layout
Similar handling(functionality) of the action items
Older Design : Bugger chunk of text, visually unappealing
New Design : Clean information breakdown
THE DESIGN
Redesigning the Landing Page
The landing page now has a personalised touch by adding the user's name, their user history in terms of payments forms and contract forms and messages. This engages user more easily than just blocks of information as is in the older design. To give contextual sense, a subtext about the portal has been added. Since creating a contract folder is the most used functionality. that has been added as the "Create New" button on this page.
Daily invoices are generated and updated in the portal against the contracts, which is then monitored by the agents here. For seamless scanning , we have added color coded tags like ''Waiting for Approval'', "Rejected" etc
Optimising the Contractor & Contract Search
We have included a suggestive search that reduces user efforts. The search results page has a tiled layout with only necessary attributes in the card - thus fitting more number of cards in the first scroll. Contact Information is laid out in a rigid layout , using white space and different styling the information has been broken down into bytes of information that doesn't overwhelm the user. Tabs makes the data highly scannable and simple to navigate, also enhancing interactivity. Any secondary additional information is under dropdown, tantalizing the user and making them want to read more.
Older Designs of the Contractor Search of the Portal
Contractor Search, Results Page, Contractor Details Page
To drive the same consistency and improve the learnability for users, we followed the similar flow for BPO Contract Search module.The functionality of the action items - Edit/Delete/Add Invoice/View Profile is similar through pop-ups. They are added at the respective card and information level. Validation of action through alerts and notifications. In the older designs, these actions would navigate the user to a separate page thus confusing the user and making them fall out of the process. The designs are intuitive and self - explanatory, minimising the training time.
Making the Create Contract Process - Simple, Efficient and Intuitive
Creating the Contract is the most critical and also the most used service of this portal. Our design language has strived to maintain information hierarchy and consistency. User first fills in all the required data. Mandatory fields are mentioned to avoid error. The footer with the "Save the <current step>" remain sticky so that it is always in view even with the abundant information scroll. In the second step, the user fills in the 'Scope of Work'. We have clubbed secondary functions in the menu kebab and made the primary action "Add Item manually" more prominent and intuitive. This is not brought up in a filter so that user can easily see what information and how it is getting added to the table.
NAICS Codes Addition : North American Industry Classification System (NAICS) codes addition is an extremely data - heavy and complex process in the older design. It wasn't clear how to utilise the work description table mentioned above and include it in the search. With our design, we have included hover - induced clicking and subtext over the work description elements like 'Concrete' here.
User clicks on 'Concrete' which is captured by the Search Bar. View Entire List/View Refined List/View Excluded list has been clubbed under "Filters". We have limited the number of codes on each page to ten. User can multi-select checkbox, then Exclude(+reason for exclusion input) and Save the remaining codes. While in contrast to earlier design, the user was not nudged to fill the exclusion reasoning before saving, thus leaving a room for error. The saved NAICS codes can then be viewed under a dropdown instead of a separate window, that reduces the abundant scroll and doesn't distract the user from the current flow.
Error Verification and Prevention
User fills in the appropriate data for Form A and B, and on 'Save and Validate' , a Verification error pops up at both the page and the item level. That clearly states the field of error to guide the suer to rectify it accordingly. Keep the information concise through drop-downs, gives the user a clear idea of the categories of data that needs to be attended to. The progress bar is as well clickable and it mentions the date of completion for better transparency and fair practise of data handling. At the visual design level, the card background style is different to distinguish between the errors and the input fields.
Filling in Solicitation Forms and Validating the Information
View Only Version of the Already - filled Contract Folder - Clear information boxes
The Simpler Navigation & Enhanced Style Guide
We kept the navigation simple for a content - heavy site like this. We followed a strict main structure with mega-menu approach towards sub categories. This makes it easier and faster for an analyst (with viewing access) and manager(with edit access) to go where they are interested or required. This supports grouping and doesn't hide the multiple services of the website. We have used Tooltips all across our design to explain the functionality of different actions and pages. Tooltips clubbed the information that was otherwise increasing the cognitive load and scroll on the main screen.
Navigation with Mega Menu
Style Guide
🤯 Phew! You have reached the end of this project!
Page updated
Google Sites
Report abuse