3 min read
Industry
Electronic Test Hardware & Software
Responsibilities
End-to-end UX & UI Design Process, Team management
Role
Product Designer
Team
1x Design Manager, 2x Product Designers, 2x Keysight Designers and Managers
Overview
The Keysight Support Portal (KSP) is where users of Keysight hardware, software, and solutions come to access resources and tools for calibrating, repairing, servicing their devices, and more.
I led the end-to-end redesign of KSP's 7 key pages over the course of 3 months under my Design Manager, while managing 2 other product designers
Updated the legacy design of those pages to match Keysight's new design language, while adding custom design elements to make it feel more modern
Collaborated with the Design Manager, Product Designer and Product Owners from Keysight to fulfil their requirements through the designs
We redesigned these pages because
KSP has a thousand users globally across various roles, verticals and age groups. These pages are being used constantly, and lacked the experience plus the UI to support their users.
The legacy UI did not support complex rich-data workflows across multiple breakpoints
Pages that had tables and complex data were not accessible across tablet and mobiles
Little to no interactions and feedback mechanisms made the experience overwhelming
The designs lacked visual hierarchy, were difficult to scan, and it took time for the users to find what they came for
They did not reflect the updated visual language and brand of KSP
These were the guiding principles for the redesign
To improve scannability across desktop, tablet and mobile devices
Ensure ADA and accessibility compliance
To enable users across all breakpoints to easily execute their tasks by designing components that adapt with the breakpoints
Adhere to Keysight's new visual language and design system, but also to innovate in UI at the same time
My contributions
As a product designer, under the guidance of Design Manager I was responsible for:
Owning end-to-end UX design. Auditing the current designs, analyzing their fallacies via heuristics breakdown, synthesizing requirements from stakeholders, and improving the UX and UI of the 7 key pages which encompassed a total of 20+ screens across multiple breakpoints.
Managed 2 product designers. Assigning flows, reviewing work, giving feedback
Collaborated with Keysight's design team to maintain design system consistency.
Presented designs in feedback loops with Product Owners and Designers at Keysight
Overseeing final delivery and documentation for development
The outcome
Improved the usability and responsiveness of 7 key sections across the Keysight Support Portal (KSP) by redesigning and improving the UX & UI of 20+ pages across 5 different breakpoints
Enabled easier faster scanning and better clarity by transforming dense tables into cards across smaller breakpoints.
Helped scale Keysight’s new design system by delivering reusable components and layout systems that informed designs beyond this project
Received buy-in and positive feedback from Keysight stakeholders presenting implementation-ready designs in iterative review cycles
Contributed to a live enterprise product, with most redesigns shipping to productive and going live after our 3 month engagement
Key pages we designed (7)
Although these are 7 pages, each page had multiple sub-pages and interactive modals of their own. Which would all be difficult to show, so I've selected a few key pages to show below.
Account Settings
My Profile
Service and Warranty Status
Service Catalog
Product Lifecycle
Agreements
Service Notes
Account Settings
Desktop - 1440px
Mobile - 430px
Service and Warranty Status
Desktop - 1440px
Mobile - 430px
Agreements
Desktop - 1440px
Mobile - 430px
Portfolio V5. Circa 2025