Dark Matter Pricing Experience

• Next Project:
  Credit Report Service

  • Overview

    Dark Matter needed a pricing experience that could handle complex mortgage inputs while remaining simple enough for non‑technical users. The existing process was fragmented, inconsistent, and difficult for clients to configure without engineering support. I led the end‑to‑end design of a 0→1 pricing engine, from competitive analysis through wireframes, design system foundations, mobile‑first UI, accessibility, and development support. The result was a flexible, intuitive pricing flow that clients could configure independently — unlocking scale across dozens of lenders.

    
    
    

    Workflow Discovery

    Loan applications were managed across multiple Excel files with inconsistent processes across offices. This made it nearly impossible to track progress or maintain accuracy.

    Design Strategy

    • Consolidate workflows into a single, coherent process
    • Identify the essential tasks for the MVP
    • Separate regulatory "must‑haves" from redundant content
    • Define a clear scope that could be delivered with the available resources
    • This alignment became the backbone of the MVP.

    
    
    
    
    
    
    
    

  • 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 Bess: 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.
    Validate User Needs: Ensure our design decisions were grounded in real user needs and feedback.

    
    
    
    
    
    
    
    

  • Primary Jobs to be done

    The Borrower’s core job: submit a complete mortgage application quickly and confidently.

    Design Decisions

    • Simplified onboarding: Clear requirements upfront
    • Transparent next steps: A step‑by‑step task overview
    • Reduced friction: Minimal fields, strong error handling
    • Mobile‑first design: Borrowers often complete tasks on the go
    • Scalable architecture: Flexible enough for future regulatory changes
    • Loan Officer visibility: A parallel view to track borrower progress

    
    
    
    
    
    
    
    

  • 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

    I identified the initial screens to focus on by analyzing user needs and project priorities. This approach ensured that we addressed the most critical aspects first, setting a solid foundation for subsequent design and development phases.

    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: Prioritizing mobile design ensured a seamless user experience across all devices, catering to the growing number of mobile users.
    • Bootstrap Grid System: Implemented Bootstrap Grid to simplify responsive layouts, allowing us to think in columns rather than pixels. This enabled flexible design specifications across breakpoints: Large displays (2-4-6 columns), Medium displays (6-6 columns), and Small displays (2-2 columns).
    • Responsive Breakpoints: Utilized Bootstrap's breakpoint system to ensure layouts adapted seamlessly across mobile, tablet, and desktop views without hardcoding pixel values.
    • Accessibility: Considered accessibility guidelines to ensure the design is usable for all users, regardless of device.

    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: Clearly displays the pricing details to help users make informed decisions.
    • Points and Interest: Provides detailed information on points and interest rates for better comparison.
    • Contact Options: Easy access to reach out to a Loan Officer or Advisor directly from the page.
    • Interactive Elements: Users can interact with different options to see how changes affect their pricing.
    • User-Friendly Layout: Simple and intuitive design to ensure a seamless user experience.
    • Customizable Views: Allows users to customize the view to see the most relevant information.
    • Quick Links: Direct links to additional resources and tools for further assistance.
    • Feedback Integration: Incorporates user feedback to continuously improve the results page.
    
    
    
    
    
    

  • 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.

    
    
    
    
    
    

  • Accessibility

    Ensuring the pricing experience was accessible to all users was a core priority throughout the design and development process. We implemented comprehensive accessibility standards to create an inclusive experience for users with disabilities.

    Standards

    • WCAG 2.1 Compliance: Designed and developed the interface to meet WCAG 2.1 AA standards, ensuring compatibility with assistive technologies.
    • Keyboard Navigation: All interactive elements are fully navigable using keyboard alone, with logical tab order and visible focus indicators.
    • Screen Reader Testing: Conducted extensive testing with screen readers (NVDA, JAWS) to ensure all content is properly announced and context is clear.
    • Color Contrast: Maintained sufficient color contrast ratios (minimum 4.5:1 for text) to ensure readability for users with color blindness or low vision.
    • Form Accessibility: All form fields include proper labels, error messages, and helper text that are associated with inputs for screen reader users.
    • Alternative Text: All images include descriptive alt text to convey meaning for visually impaired users.
    • Responsive Design: The interface scales properly for users who magnify content and maintains functionality on smaller screens.
    • Focus Management: Implemented proper focus management for modals and interactive components to support keyboard and 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.

    Go to DM Config Case Study
    

    • 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.