Client Portal Website Re-Design
On Point Technology is the only company that develops commercial software exclusively for State Workforce Agencies. On Point Technology sets the standard in Unemployment Insurance (UI) solutions. For almost two decades, we have delivered unmatched technology and expertise in all facets of UI programs, including benefits, tax, adjudication, overpayments, and fraud prevention and detection.
My Role
Working with Business Analysts and subject domain experts to understand user requirements and behavior. Designing graphics user interface elements like menus, tabs, and widgets for the web portal. Turning user requirements and behavior into storyboards and wireframes, and ideally developing them using HTML5, CSS3, Bootstrap, and JavaScript, ensures a better experience for clients.
Overview
Founded by former state and federal agency staff and executives, On Point provides superior, modern, and efficient solutions to streamline the workflow of benefits agencies. Designed with an eye towards the future—and a deep understanding of the past—all our products are built to maximize ROI and improve efficiency. With the largest footprint in the UI industry, over half of the states trust our products and services above all others. We are the only vendor to be called upon to give expert testimony before Congress on the challenges facing the UI benefits system. Currently, our new fully configurable and scalable OPTimum Benefits and Tax system is revolutionizing the industry.
2018 - 2019
Web, Desktop, Mobile Prototyping
Photoshop, Dreamweaver, HTML, CSS
Design Process
I started brainstorming ideas with the developers and the BAs who were working with the existing app. I started with low fidelity wireframes and once they were approved, I started working on the high fidelity wireframes. Once they were approved I created the working prototype using HTML5, CSS, and Bootstrap which was implemented by the developers in the Angular template.
Wire-framing and Prototyping
We had an existing web app for the unemployment insurance portal for the state agencies. I redesigned the core screens based on the information I acquired from the Business Analysts. I started with creating hi-fi wireframes that were similar to the prototypes. I used photoshop for wire-framing and created working prototypes using HTML5, CSS5, and Bootstrap.
Feedback and Iterate
The internal stakeholders and development teams would review the designs and provide their feedback. I would revise the mockups based on the feedback given.
Front-end Development
I worked with the developers when they would test the product to make sure the product strategy works. Created the front-end files using HTML5, CSS3, and Bootstrap for the backend developers.
Color Palette
Prototypes - Desktop
I started designing the wireframes starting from the Login, Register screens, and then with the navigation flow for the client portal for the desktop version.
Situation
I was collaborated closely with Business Analysts and subject matter experts, we were tasked with designing and developing a highly usable interface for a complex business tool. Normally, my design process starts with user personas, journey mapping, and iterative wireframes before jumping into visual design or development.
Task
However, the business requirements were evolving rapidly as we worked — the BAs were still gathering user input while we were expected to start building out the interface. It was clear the traditional linear UX process wouldn’t work in this dynamic environment.
Action
I adapted by running parallel tracks — while the analysts continued gathering requirements, I worked with available use cases and SME insights to create modular, flexible wireframes that could be easily updated. I designed interface elements like menus, tabs, and widgets in a componentised system using Bootstrap and HTML5/CSS3, which allowed quick visual and functional iteration. Instead of finishing one big polished wireframe, I built clickable prototypes with HTML/css to test ideas faster and reflect real user behaviors early on.
Result
This flexible approach allowed us to keep moving forward while accommodating evolving business needs. Stakeholders appreciated seeing real-time progress, and the development team could reuse many of the HTML/Bootstrap components directly — reducing handoff time. Ultimately, the interface was delivered ahead of schedule, and post-launch feedback highlighted a much smoother user experience due to this iterative, collaborative approach.
