Dark Matter Pricing Experience

Process

With tight deadlines and reduced development resources, I focused on keeping the FWA purchase workflow as simple as possible, minimizing steps and reducing potential points of friction.

• Team was new to working with a Designer
• No existing experience or design system
• Ambitious timelines
• Multiple projects running in parallel

Overview

Dark Matter needed a simple yet robust pricing experience for complex mortgage inputs. I designed a 0→1 pricing experience, from competitive analysis, journey maps, personas, HMW, design system, mobile UI, and accessibility. Enabling clients to configure independently and scale across dozens of lenders.

Empathizing with users

I collaborated with the Product Owner to start nailing down our target users and use cases. Together, we reviewed previous mortgage applications and customer data to understand patterns in how users interacted with similar workflows. This research helped us identify key user segments and their distinct needs, ultimately allowing us to develop detailed personas that would guide the design and development of our pricing flow.

Key Persona Findings

• Simple Process: Streamlined workflow that guides users through pricing step-by-step without unnecessary complexity.
• Clear Explanation: Transparent pricing breakdowns and term definitions so users understand how costs are calculated.
• Easy to Understand Pricing: Visual comparisons and plain language descriptions that make loan options accessible to all users.

Workflow Discovery

I collaborated with a Subject Matter Expert to map out the current workflow, understanding how the current process worked and the type of applications the Loan Officer handled.

Design Strategy

• Informed Design Decisions: Understanding which screens were required to support the current workflow.
• Accelerate MVP Development: Align MVP features with workflow requirements.
• Identify Gaps:Begin discussing areas that Product and SME's wanted to improve.

Competitor Analysis

The team had already conducted a competitive analysis of similar platforms, including Rocket Mortgage, Quicken Loans, and Chase Mortgage. This provided valuable insights into existing loan officer platforms and pricing flow implementations.

Design Strategy

• Informed Design Decisions: Understanding competitor approaches helped us identify industry standards and validate our design choices.
• Accelerate MVP Development: Align core features with competitor offerings to speed up 0-1 product iteration cycles.
• Identify Best Practices: Analyze user flows and features across competitor platforms to find opportunities for improvement.
• Discover Innovation Gaps: Uncover areas within the competitive landscape ripe for differentiation.

How Might We

I ran a "How Might We" session to identify key challenges and opportunities within the current workflow.

HMW Outcomes

• Brainstorm Solutions: Generate creative ideas to address identified workflow challenges and pain points.
• Identify Opportunities: Uncover new possibilities for improving user experience and process efficiency.
• Align Stakeholders: Ensure Product and SME's perspectives were incorporated into opportunity statements.
• Frame Design Direction: Transform challenges into actionable design problems to guide wireframing.
• Validate Assumptions: Test hypotheses about user needs and workflow improvements.

Wireframes

Early wireframes allowed us to validate ideas quickly and avoid over‑investing in the wrong direction.

Design Decisions

Wireframes were focused on:
• Getting Started
• Task Overview
• Document Upload
• Progress & Status
• Error & Validation
• Contact Information
• Application Summary

Design System

Creating a simple reusable design system that could flex with the scale of the project would save us a lot of time. But also considering that this design system would only be used by me in the short-term so creating an entire design systems was out of scope.

Design System Requirements

• Color tokens: Accessible, semantic palette
• Typography scale: Clear hierarchy and readability
• Spacing tokens: Consistent rhythm across screens
• Component library: Buttons, inputs, modals, alerts, and more

Pattern Templates

While multiple design patterns could enhance the visual complexity of the flow, maintaining simplicity was more important. I focused on creating two core reusable patterns that would streamline both the user experience and development process.

Design Impact

• Consistent layouts
• Predictable spacing
• Faster developer onboarding
• Smooth integration with Bootstrap

First Tasks

Design Decisions

• Clear navigation
• Simple document upload entry point
• Extensible structure for future steps
• Mobile‑first design to accommodate on‑the‑go users
• Used as a live demo for our clients in meetings and presentations

Mobile First

To gain stakeholder buy-in, I initially focused on desktop screens. However, it became clear that a mobile-first approach was necessary, since the persona was a Borrower this type of task was mostly commonly completed on Mobile.

Design Principles

• Mobile-First Design: Prioritized seamless experiences across all devices for mobile users.
• Bootstrap Grid System: Implemented responsive layouts using Bootstrap Grid with flexible breakpoints across devices.
• Responsive Breakpoints: Adapted layouts seamlessly across mobile, tablet, and desktop without hardcoding pixels.

Using a mobile-first approach allowed us to prioritize the most critical features and ensure a seamless experience across all devices.

Results Page

The Results page needed to clearly display pricing details, points, and interest rates to help users make informed decisions. It was essential to include interactive elements and contact options for a seamless user experience. This page was just an MVP, designed to gather initial feedback and create a functional endpoint.

Design Impact

• Price Transparency: Clear pricing details for informed decisions.
• Points and Interest: Detailed rates and points comparison.
• Contact Options: Direct access to Loan Officers or Advisors.

Accessibility

WCAG 2.1 Compliance: Accessibility was a core priority throughout the design and development process. We designed and developed the interface to meet WCAG 2.1 AA standards, ensuring compatibility with assistive technologies. By implementing comprehensive accessibility standards, we created an inclusive experience for all users, including those with disabilities.

Accessibility checklist

• Navigation & Input: All interactive elements are fully navigable using keyboard alone with visible focus indicators, proper focus management for modals, and all form fields include proper labels, error messages, and helper text.
• Content & Perception: Conducted extensive screen reader testing (NVDA, JAWS), all images include descriptive alt text, and maintained sufficient color contrast ratios (minimum 4.5:1 for text) for users with color blindness or low vision.
• Responsive & Scalable: The interface scales properly for users who magnify content, maintains functionality on smaller screens, and supports all assistive technology users.

Prototype

Having a dynamic prototype, as opposed to static screens, was particularly beneficial when presenting to stakeholders. It enabled us to effectively communicate our vision and demonstrate the user experience in a tangible way. Stakeholders could interact with the prototype, providing them with a better understanding of the flow and functionality. This interactive approach helped to align expectations and secure buy-in, ultimately facilitating a smoother development process.

Onboarding clients

The Dark Matter flow was created to get buy-in from our clients. 42 of our clients decided to use this flow and they all had their own requirements, some across different states with different compliance needs, and some had more established brands. They needed to be able to make a lot of changes to the flow we put together. To make it scalable and self-service, we created infrastructure that would allow clients to customize the flow independently. This way, we could sell and make the solution usable for so many other companies.

• 42 Clients, 16 Initially.
• Self service options will be provided for clients to update branding and copy independently without developer resource.
• Enhanced customization and scalability for clients.
• Lower reliance on developer resources for making updates and changes.

Application Structure

To understand the general application structure, I conducted a thorough investigation of the mortgage application process within Dark Matter Technology. This involved analyzing existing workflows, interviewing key stakeholders, and reviewing user feedback. By mapping out the entire process, I identified critical touchpoints and areas for improvement, which informed the design of a more efficient and user-friendly pricing flow.

• Flexible Structure: The application is designed to be adaptable, allowing for different question orders or branding edits tailored to each client.
• Scalable Design: By using primary and secondary color schemes, the system can support up to 40 clients without additional development work. This approach allows each client to have a unique and expressive brand identity while maintaining overall consistency.
• Easy Maintenance: The configuration system ensures that updates and maintenance can be performed easily, minimizing the need for extensive development work.
• Client-Specific Customization: Each client has unique needs and processes for making content changes, which the system accommodates without requiring new development work.