TLDR: Ditch the wireframes rock stories. Customers faced a confusing onboarding maze. Detailed UX wireframes transformed it into a frictionless journey, building trust and getting users invested. Clarity led to confidence and the winning play, a clear, secure, and personalised onboarding process building loyalty from the first click.
How UX wire-framing became the secret weapon to hook new investors
Backend to Frontend
When customers make a product selection there is a lot going on behind the scenes.
The desktop new product onboarding experience is a complex animal, a prime candidate to to wireframe, a User Experience (UX) designer key skill. Capturing a large selection of unique steps that indicating the interaction Design is a Design Thinking challenge and requires enterprise-level wire framing skills to deliver;
- Clarity and Understanding A central pillar in User-Centred Design
- Take advantage of existing Design System component reuse
- Team alignment (from BAs to Dev to client)
… let’s dive in
Defining the Problem
Imagine a new or existing customer discovering your product.
Their excitement is palpable, but the onboarding process can often feel like a daunting maze. This is where detailed wireframes step-up, transforming the journey into a smooth and secure experience. Early decisions were made to leverage a pre-existing Design System, so high fidelity wireframe (Hi-Fi) became the way forward with the wire-framing tool of choice to be Figma.
Development Preparation
Pre-development tech checks
Process flow diagrams
These simple flowcharts are visual tools used to map out the steps in a process.
The first goal in a wireframing process is technical. The objective is to integrate a robust data gathering mechanism into the onboarding process to streamline technical development. Understanding the terms and conditions, personal details collection, and email and SMS validation data flows and aligning these all to API calls was top-of-mind.
This early technical scoping based on requirements ensures efficient API integration and data management solutions so the team can move forward and then collaborate with BAs and then UX-ers.
Onboarding Flow and Requirement Gathering
Note: Images are blurred for client confidentiality purpose
Why BA Requirements Gathering is Crucial Before Wireframes
To provide a solid foundation, to limit rework and foster communication between stakeholders (users, developers, designers) a Business Analyst will typically conduct user and stakeholder Interviews to understand business goals and success metrics, write user stories and generate Use Case Diagrams indicating functional requirements to create a shared understanding.
Segmenting the UX Wire-framing Process
From Product Spark to Secure Investment
1 – Guiding the First Steps
The process begins the moment a product ID is entered as the customer clicks a product. These wireframes propose a gentle walk-through, holding the customer’s hand and setting clear expectations. As personal details are collected, the system cleverly identifies pre-registrations, streamlining the experience. For unrecognised products, the UI gracefully handles the situation, preventing frustration.
2 – Building Trust and Security
Next, the validation screen requests a unique member ID, followed by a secure OTP process. This includes both email and mobile verification, paving the way for a robust KYC process. Here, the customer navigates through identifying their tax jurisdiction, providing identification images, as part of a seamless IDV (Identity Verification) experience. To ensure compliance with regional regulations, the system also gathers marketing and accessibility permissions, adhering to GDPR guidelines.
3 – Personalisation Meets Regulation
This joined-up onboarding process seamlessly transitions the customer from initial product selection to specifying their investment pledge. Furthermore, their National Insurance ID is verified, ensuring complete compliance.
A Smooth Conclusion
Finally, once all data is collected, it’s securely transmitted to the backend. The front-end then provides clear and reassuring messaging, confirming a successful onboarding experience. This leaves the customer feeling confident and ready for next steps. Wires were shared or feedback across the team, and beyond. This included stakeholder, Technical Leads and Design System Product Owners.
Fine tuning the results
Sneak preview of the final delivered User Interface (UI)
The process is still fresh, but typically to run a data-driven decision making process and iterate improvements, when the process is developed these will go through Usability Testing and Heuristic Evaluation. Prototyping, assisted by QAs, were on standard to verify and test stakeholder feedback
Conclusion and Impact
These wireframes don’t just showcase a process; they tell a simple story of a complex customer experience. By prioritising clarity, security, and personalisation, this onboarding journey fosters trust and loyalty from the very first click.
Thank You
Empowering users with the financial tools they deserve
- Mastering Design Theory and Lean Agile
- Solve big problems, fast.
- How delight and speed are rewriting our UX playbooks