Financial Platform Data Import
Prototyping and Interaction Design
User Journey Map
Click to enlarge (note that team comments have been removed)
I facilitated this workshop using Miro to analyze the research findings, align the team on user pain points and opportunities and raise awareness of the value of UX activities. This also helped us to determine the stages or steps in the experience and touch points.
Participants were: design, product, engineering, subject matter experts.
User Flows
Click to enlarge (note that team comments have been removed)
We then created user flows to map out the user's steps to complete the import. This helped us understand the logical sequence of actions and ensured the experience is clear, efficient, and aligned with user goals. The engineers had some valuable insights into the process so we ended up making a few changes to the flow due to the way data is processed.
Participants were: design, product, engineering, subject matter experts.
High Fidelity Prototype & Design Rationale
Click to View (note that team comments have been removed)
I then created a high fidelity prototype using Figma and since we had our design system in place, most of the components with baked in accessibility were already created in addition to our overall brand and design guideline which I followed. The step component for the wizard was new and along the way we added zebra striping to our tables and altered the button text style based on some user feedback from the usability test phase of this prototype.
Meeting with product and engineering, we broke the project down into sprints and I created a separate Figma page for each user story which contained all the edge case designs and empty states.
Figma Interactions
Click to enlarge (note that team comments have been removed)
Included in this screen shot are the interactions shown in Prototype Mode in Figma. They illustrate the interactions including triggers and navigation type designed to make this prototype feel as real as possible. The design system provides variants of each component used to design such things as button states etc.
​
This was very helpful in testing the interactions and communicating intent to stakeholders and engineers. It bridges the gap between static design and live experience and ensures the design is easy to understand.
Next Steps
The design was broken down into 4 phases, and 2 week sprints were planned for a duration of about 10 months.
​
An extended roadmap of 24 months was also created to allow for out of scope features we planned to add later.
​
I worked closely with the engineering team during this time to design last minute edge cases and updates to the design system to support their work.
​
I also worked closely with product during this time to plan the upcoming releases and monitor Pendo in the app.