Rising from layout frustration, we redesigned core sections, enhancing density and efficiency. This journey also forged a unified Figma workflow, elevating design coherence and shifting us from frustration to seamless efficiency.

What is PX?

PX forms the bedrock of our Planning Experience web app, enabling the Field Office to embark on the planning journey with clients. The Data Input Modals act as the gateway, where users input vital client data into PX, molding intricate plans and dispensing financial advice. Our pursuit involved a deep exploration into untangling and addressing the core challenges users encountered during the data entry process within PX.

Problem Statement

Users hate using PX, especially for data input. These users spend 4-6 hours each day using a handful of broken forms, this generated lots of complaints, data input errors and user fatigue.

Discovery

Using HEAP I worked with a PM to get an idea of how many assets were added to an account and how many accounts an AFR (our power user) were adding on average per account. This would give us a good idea of what type users and workflows involved.

Feedback from our users

We had a chance to sit down with a few of our major power users, and they gave us some valuable insights into the current experience and the most common pain points.

Extending the Enterprise personas

Extensive user engagement uncovered two previously overlooked user personas. This discovery adds complexity and nuance to our design approach, necessitating tailored solutions to address their distinct needs, goals, journeys, and interaction preferences. Adapting content, visual language, and testing strategies to resonate with these personas will ensure inclusivity and user-centric design.

Current State of the Forms

Assessment: Evaluated Lenovo laptop form in the field, uncovering issues. Clear Focus: On the data entry page, we saw the need for improvements, prompting a wider view of enhancements. Comprehensive Refinements: This insight drove targeted improvements across the interface for a smoother user experience.

Heuristic review

Form Assessment: Scrutinized form condition on field's Lenovo laptop, unveiling its state and challenges. Clear Focus: As a dedicated data entry page, the extent of necessary improvements became evident, prompting a holistic view of enhancements. Comprehensive Refinements: This insight led to targeted improvements not only on this page but also throughout the interface, ensuring a cohesive and effective user experience.

Medium Fidelity Designs

Guided by these insights, we utilized the Bootstrap Grid as a framework to design improved, denser, and consistent forms. Collaborative feedback with the Product Team and designers refined the forms further. Importantly, this adaptable pattern offers a scalable solution for other input forms and serves as the foundation for achieving responsiveness throughout PX.

Medium Fidelity Propotype

With enhanced designs and a refined information architecture, I partnered closely with the Product Manager to create these solutions. We leveraged our monthly sessions with field members who highlighted issues with the page. Under the guidance of the User Experience Research (UXR) Lead, users were directed to establish 2 Roth 401(k) accounts, proceeded by 1 Savings account and then secondary assets. This approach aligns with the typical user workflow for adding client assets.

Guiding Design with Bootstrap Grids

Subsequently, I rounded out the assets page by developing the remaining screens, providing developers with pixel perfect designs for execution. Leveraging Bootstrap Grids, we transformed these insights into specifications for the 5 available Breakpoints within our design system. This streamlined the process for developers to adopt and implement the responsive new forms. Utilizing Figma's Collections feature, we crafted dynamic prototypes that effectively illustrated the functionality of these pages. With significantly enhanced form experiences and a scalable sizing blueprint in place, the focus shifted to operationalizing these advancements within Figma. A crucial aspect was to ensure that the component creation aligned with the foundation of base components established in the design system. This seamless integration not only streamlines the design process but also maintains design consistency and accelerates future iterations.

Next Steps

Having successfully modernized the Assets Modal, the next phase involved its application to other sections. A substantial effort of creating 51 screens was undertaken, encompassing Liabilities, Insurances, and Incomes. While these sections might be less frequently used, this endeavor ensures a unified and consistent user experience throughout PX. By establishing this uniformity, form enhancements cascade across the platform, elevating the quality of forms across various sections and contributing to an improved user experience.

The product team were ready to move on to other stories, so I took the intitiative and enlisted UXR to create a ‘Baseline’ for this very simple flow. How long it takes on average for a user to add 1, 3 and 5 assets using the same input data. Heap data wasn’t able to get this level granularity but with the help of 3 of our Field Partners we just literally timed them doing this. This was averaged and tidied up, where we removed null data and a helpful baseline was established and then compared to the same users using the same modal but with the updated Interface.

User Feedback

During this round of Research, the participants we were ‘timing’ were also giving alot of positive feedback that made the team feel great about these improvements.

Final Thoughts

While not glamorous, this effort significantly enhances user experience, elevating the app to 'Best in Class' status. It laid a strong foundation for a Figma library that supports designers and doesn't merely duplicate the design system. Leadership recognized its value, attributing an uptick in user sentiment among AFRs to this work in a subsequent user survey.