T.S.A. Employee Candidate Portal Redesign

Project Team

Client: U.S. Department of Homeland Security, Transportation Security Administration
Role: UX Designer (Co-Lead)
Tools: Adobe XD, HTML/CSS, Salesforce Lightning Design System
Duration: Pre-pandemic (Ended due to COVID-related project pause)
Agency: Accenture Federal Services

Overview

The Transportation Security Administration (TSA) HRM (Human Resources Management) employee candidate portal was long overdue for a redesign. Built on legacy architecture, the platform struggled with outdated UI, poor accessibility compliance, and friction-heavy user experience. I joined the team at Accenture Federal Services as a UX Designer to co-lead the redesign effort—bringing the interface up to modern federal and accessibility standards while aligning it with Salesforce Lightning Design System (SLDS). The portal is connected to Monster.com and USAJobs.gov - the U.S. federal government employment website. We used an Agile methodology with a Lean MVP approach.

The Challenge

With no prior Salesforce Lightning design experience, I was tasked with quickly learning the SLDS component library and coding patterns, then designing a fully reimagined portal that developers could build on in parallel with an aggressive Agile MVP release schedule.

Outdated legacy portal

My Role & Responsibilities

  • Co-led UX design using Adobe XD

  • Customized and implemented UI using Salesforce Lightning Design components

  • Hand-coded HTML and CSS for integration and QA with Salesforce developers

  • Collaborated daily with project managers, business analysts

  • Facilitated and implemented feedback from weekly sprint reviews with the federal client

  • Ensured strict adherence to federal accessibility guidelines (Section 508 compliance)

Brainstorming | The Plan

Held a handful of planning discussions with the Business Analyst, Scrum Master, and the Federal Client SME’s for learning and collecting requirements. Talking to the client subject matter experts was critical to learn their process and how the candidates interact with their current application. Also, to learn pain-points and areas of improvement. Also, I did research on several UX and web framework websites for options and best practices. After this discussion and feedback and best practices we did some white boarding, and I then created a first round of low-fidelity b/w wireframes in Adobe XD.

Worked in 2-week sprints to complete everything requested, we utilized Lean MVP. The team prioritized and set which features would be completed for the ‘Go Live’ date and what would go into the backlog for post-live design and development.

Discovery & Research

The project ran on an accelerated Agile MVP timeline, so in-depth user research was not feasible. Instead, we relied on:

  • Weekly feedback cycles with the federal client

  • Competitive analysis of similar platforms like USAJobs.gov and Monster.com

  • Internal documentation reviews to understand applicant workflows

Strategy & Ideation

Working within the SLDS framework, I:

  • Mapped out key user flows based on the TSA recruitment process

  • Audited legacy UX pain points

  • Strategized with developers to design components that were functional within the SLDS limitations

Design & Prototyping

  • Created low-fidelity wireframes and high-fidelity prototypes in Adobe XD

  • Applied SLDS styling to maintain consistency across the Salesforce ecosystem

  • Delivered clickable prototypes for client reviews and developer reference

Testing & Feedback

Due to time constraints, formal usability testing wasn’t possible. Instead:

  • Iterated based on weekly sprint reviews with the federal client

  • Collaborated with QA and accessibility teams to validate design compliance

Accessibility

Federal portals must meet WCAG and Section 508 standards. Salesforce Lightning offered a solid foundation, which I enhanced through:

  • Proper color contrast ratios

  • Semantic HTML markup in custom code

  • Keyboard navigation support and screen reader compatibility

Solution

Being MVP, we had to prioritize:

  1. Remove some stages from the progress tracker

  2. Design to make all information viewable on initial viewing, with no hidden content or content requiring modal windows

  3. The dashboard utilized dynamic content

  4. Discussed how the Salesforce application will work with Monster, USAJobs, and other development contractors (Manpower & Deloitte)

  5. What in the legacy application can be repurposed and retrofitted?

  6. Being MVP — what are the ‘nice-to-have’s’ and can go into post-live development

Early iteration wireframes

First iteration with initial incorrect impression that the portal would point to different pages in the process.

Second iteration and a different progress tracker before Salesforce SME guidance. Also has options when thought was there would be additional pages.

Early progress tracker option (after talks with the Salesforce lead -- this was not an option). Apply History was later merged with the Profile.

Mobile view: Salesforce is responsive by default, but we needed to show TSA how it would display before being developed.

Standardization

TSA had a pre-existing print branding and style-guide, but they did not have an existing web style-guide. I took the initiative to create a preliminary style-guide based on Salesforce standards, styles, while incorporating TSA and the Federal Design system to create an all-inclusive condensed style guide.

Style Guide suggested colors

Style Guide for padding, colors, placement, gutters, and more.

Style Guide for font use (font families, sizes, components, etc.)

Research

Traditional User Research was out of scope. Therefore, at the earliest stage I performed extensive research on my own. Went to several partner, federal design, and competitor websites for research, best practices and federal government standards. TSA works in conjunction with Monster and USAJobs; I went through the complete process as much as allowed to document and understand the task in detail. Being new to Salesforce, spent an extensive amount of time going through the Salesforce Lightning Design System to grasp the capabilities and limitations of the SLDS. Being a Federal US Government website, I used USWDS to ensure I was using the government recommended styles and standards. Lastly, I went through Careerbuilder and similar job posting websites to document the competition. The wireframes and mockups display a marriage of all these websites, systems and frameworks to find the right balance.

  • USAJobs.gov

  • Monster.com

  • Salesforce Lightning Design System

  • Careerbuilder.com

  • United States Web Design System (designsystem.digital.gov) 

Approved & Final

After meeting with the client to go discuss the wireframes, requirements, and expectations, I was tasked with completing the initial high-fidelity mockups. These mockups are being given to the Salesforce developers and working with the BA’s to include approved content.

January 23, 2020, was our first Sprint review with the TSA client to demo this Candidate Portal after initial development. This was our first development Sprint demo to the client, and TSA were excited about the improvements and gave high praise. Mentioned they are looking forward to seeing the dashboard in full development.

The below decisions were made based on the options in Salesforce, the Federal client feedback, team collaboration, and my own thoughts on what will provide a clear, defined, informational, and easy to digest UX and UI.

The final approved design of the Welcome landing screen (after the candidate leaves USAJobs they land here in the Salesforce application).

If the candidate chooses to withdraw their application, the modal window confirm this decision.

The Candidate Portal Dashboard: (which is self-contained, there are no additional external pages in Salesforce) the candidate can now scan all information in one view, removed pop-ups for related information and tabs requiring further interaction. The unattractive informational graphic icons that are additional maintenance to edit have been replaced with easy to edit less obtrusive badges.

Upon withdraw (or any process “fail”) the dashboard is updated to clearly reflect this new status. The red progress tracker section will required Salesforce custom code, but we felt it was needed to clearly inform the candidate of this status. For accessibility, the red icon is used so even color blind users can see the status icon.

Reflection

This project was a crash course in working under pressure while adapting quickly to new systems. I had never used Salesforce Lightning Design before, but I found it intuitive and powerful. The Agile structure, tight timelines, and highly collaborative environment made the experience exciting and dynamic.

What I’d do differently?
Honestly, not much. It was a challenging but rewarding project where everyone was aligned on delivery and quality—even in the face of unpredictable events like the pandemic.

Takeaways for Future Projects

  • Fast learning curves are possible with the right documentation and focus

  • Salesforce Lightning is a strong and customizable design system that is fairly easy to adapt to and learn

  • Federal projects can move fast when stakeholders are engaged and responsive

#