Social Security Administration
Client Name - Social Security Administration
Role - UX Designer
Project - Web-app design
Project time - March 2022- Present
Background
The United States Social Security Administration is an independent agency of the U.S. federal government that administers Social Security, a social insurance program consisting of retirement, disability and survivor benefits. Wikipedia
mySSA
mySocial Security is the personalized, interactive and secure online gateway for customers providing immediate electronic access to social security information and services.
Disclimnar
To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own including the UX team and does not necessarily reflect the views of Social Security Administration. Since this is a governmental project i might not show all the screens.
My Role
I am one of the UX designers worked on a variety of projects at SSA in mySSA sub division where users create their account and use the SSA web app. I work in collaborated with other designers.
In addition, I worked alongside a Researcher, Content Strategist, Product Managers, Project Owners, Validators and Engineers.
Since i joined the design team i was able to learn about the design system at SSA and implement it to my design. I am part of an ambitious project to redesign the mySSA Wage Report design experience for the largest governmental agency.
Redesigning myWage Report (MyWR) at SSA
The problem
Social Security Administration is constantly updating the design to full-fill the needs of the users in order to achieve the goal, the agency conducts research and implement it to the design. To understand the expectations of the user pain points and comprehension around using mySSA to manage their wage report. There are elements and features that are not convenient to users, hence upgrading the design is important to full-fill the needs of users and achieve the agency goals.
App specific problem
While the My Wage report (MyWR) application has two paths for self reporter and representative reporting (reporting wages for other person) there is no clear information inside the application. Application landing page, input fields, review screens, confirmation and other screens didn't have a clear label. Error screens are not accurate to the specific error type. Some texts eg. 'Gross pay' need more explanation because users didn't understand what it mens. There is no editing option for user input fields. After completing the wage report users do not have a change to save or download their confirmation.
Header and footer needs to be update for a better navigation experience.
Goal
Improve the My Wage Report (MyWR) user experience within mySocial Security (mySSA) by making the reporting process clearer, more intuitive, and accessible for both self-reporters and representatives. This includes clarifying navigation paths, labeling, and terminology; improving error messaging; enabling users to edit their information; and providing options to save or download confirmation details — all to reduce confusion, meet user needs, and support the Social Security Administration’s goal of delivering a seamless digital experience.
Our goal for the project is to recapture the magic of the new design of SSA. Our ambitions are to create a strong foundation that embraced a rapidly evolving business and more diverse user base.
Our high level goals were to:
-
Make it fast and easy to use for everyone, everywhere.
-
Give users more control over their time.
3. Create a platform for innovation and deeper engagement.
The Discovery
During the discovery session, my first step is to gather as much information as possible. I begin by reviewing the available documentation provided by the business owner, followed by a kickoff meeting to understand the overall business goals. Throughout this process, I focus on brainstorming and gaining a clear understanding of both user and business requirements.
The key outcomes of this project’s discovery session are that our team developed a shared understanding of the current customer experience for the initial personas, Annie and Jackie, and aligned on the future process for how they can report their wages through mySocial Security, leveraging and enhancing the overall mySocial Security customer experience.
Questions Informed My Design Strategy:
-
How do you design for everyone, everywhere?
-
What contexts need to be considered?
-
What’s the perfect user experience?
How might we questions
​​
-
How might we help mySSA users in tracking their wage report progress?
-
How might we better communicate the project overview to users and the business?
-
How might we inform users about their wage reporting options in different stages?
-
How might we help users use their time efficiently?
-
How might we make the web app simple and easy to use?
User Persona
User Journey Map
Iteration
Before I could jump into designing, it was important to define success and understand the user experience at scale. After a few brainstorming sessions and going through all notes I took from the interviews, and the discovery sessions i started creating the sketches on paper. Following the research and depending on the design discovery sessions i and the design team started working on the process. Through the design process, I quickly creating sketches and prototypes, getting feedback from my teammates and engineers, and implementing changes. I have a great opportunity to constantly get advices and suggestions from the team.
​
The Main Dashboard
The dashboard or the landing page is where user land when sign-in in in their account and using one of the cards which ids Wage report they will be able to navigate to their wage reporting screenFor the dashboard to better serve the users, it should be glanceable, relevant and personalized user experience.
Design System/Style Guide
Use Experience Group
The SSA Design System is the official set of standards , styles and reusable components for SSA web applications. It is a set of standards to manage design at reducing redundancy while creating a shared language and visual consistency across different web pages, applications and channels. In general the design system allow us designers at SSA to manage our design at scale
Under the design system at SSA we use design tokens which are used in place hard coded values in order to ensure a flexible, consistent and salable design system. The design system team defines the Social security design systems visual language including color, typography, spacing, elevation and opacity using design tokens.
As part of the design team i have contributed and update new components and new features that are tested by users.
Reusable components
Testing
We tested our new design with the existing myWR app with 8 participants. Our goals were to understand the challenges faced and the workarounds they employed.
I was surprised by the issues we found how they navigate from screen to screen.
Users use different devices where it helped us to think about it again about designing for multiple devices, It is clearer that users expected the experience to just work with minimal effort and clear information.
As SSA became more integral to their lives, their expectations evolved.
While observing the usability testing We have collected all the necessary information and pain-points that the participants face and implemented to our design in solving the user pain-points
​
Solution
With the design changes I made, usability testing are going much smoother than before, and the product got more positive feedbacks from the team.
-
Users used to spend an average of 20 minutes to create a new wage report, while after the redesign, the time needed to finish the task reduced to 8 minutes, a 60% decrease.
-
During the 8-Second Tests, 12 out of 20 participants can easily notice the changes implemented on confirmation page, whereas for the original design, only 2 out of 20 participants were able to do that.
*A 8-Second test is conducted by showing an screenshot to a participant for just five seconds, after which the participant answers questions based on their memory and impression of the design.
To address the identified problems, I have updated several new features and redesign improvements, including:
-
Updated the header and footer to best access any user needs and the ability to navigate through MySSA application so that users will have a pleasant and smooth experience using the app.
-
Separated the Self Reporter and Representative Payee paths to make the navigation process clearer and more intuitive.
-
Added a label at the top of the screen so users can easily identify where they are in the wage reporting process.
-
Introduced a clear and consistent title on each page to reinforce context.
-
Updated multiple error messages to match the correct error types and improve clarity.
-
Created links and pop-up windows for ambiguous terms, helping users understand specific words or instructions.
-
Added an edit icon allowing users to review and modify their entered wages before submission.
-
Implemented a download feature so users can save and access their confirmation for future reference.
-
We created a better experience for everyone who uses mySSA, everywhere.
Note: The images below are for illustrative purposes only and may not be fully visible.
Header
Footer
Creating Responsive Design
With the nature of our application at SSA we use a desktop first approach when it comes to a responsive design. By using our responsive web design approach the UI design i have provide an optimal viewing and interaction experience across a wide range of devices (Desktop, Tablet and Mobile), which includes easy reading, easy navigation, minimum re-sizing, planning and scrolling and multi-device experience.
At SSA we deign for the viewport and breakpoints, not the screen size. Viewport which is users visible area of a web page and Breakpoint which is the measurement unit at which your interface will respond to provide an optimal experience. Moreover at SSA we follow Responsible web design which includes strategy based on best practice for long term use-sustainability, treats all interfaces as facts of the same experience, honors user preference and designs adapt to unexpected use cases.
