Problem
Clients needed a streamlined and easily customizable pricing flow to enhance user experience and reduce development time.

Solution
I developed a highly customizable and efficient pricing flow that enhances user experience and reduces development time. The solution includes unique illustrations to make the interface more engaging and fun for retail users.

Next Project:
Credit Report Service

This is the prototype of the full PPE flow:

View Prototype

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

Data Input Templates

Efficient Development: Creating 2-3 flexible templates reduces the need for extensive development work for each new client.
Consistency: Flexible templates ensure a consistent user experience across different clients, maintaining brand integrity.
Customization: Each client can have their specific needs met without requiring new development work, thanks to the adaptable nature of the templates.
Maintenance: Simplifies maintenance and updates, as changes can be made to the templates rather than individual client implementations.
Cost-Effective: Reduces overall development costs by minimizing the resources needed to create and maintain client-specific solutions.
Quick Turnaround: Enables faster deployment of new client solutions, as the templates can be quickly customized and implemented.

First Screens

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.

Sparked Enthusiasm: Prioritizing these screens helped spark enthusiasm in the product team, no they could see some clickable screens.
Figma Assets: Allowed me to start creating Figma assets to support the design process.
Quicker Iterations: Enabled quicker iterations and feedback loops with stakeholders.
Clear Direction: Provided a clear direction for the development team to follow.
Identified Challenges: Helped in identifying potential design challenges early on.
Collaboration: Helped start the relationship with Design, Product, Development, and Stakeholders.

Mobile First

To support presentations to get buy in I had been working on Desktop screens. but it was clear from that this needed to be mobile First.

Design Constraints: Mobile design constraints required careful consideration of screen size, touch targets, and readability.
Optimal Mobile Width: Selected 430px as the optimal width for mobile because it is the most common width among devices.
Desktop Width: Although 1280px is considered a small desktop size, our metrics indicated it was the most commonly used size among our users, making it the optimal choice for our design.
Responsive Design: Ensured the design is responsive, adapting seamlessly between mobile and desktop views.
Consistency: Maintained consistency in design elements across different devices to provide a cohesive user experience.
Accessibility: Considered accessibility guidelines to ensure the design is usable for all users, regardless of device.

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.

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.

Initial Feedback

To gather detailed feedback, I collaborated with the Product team to identify key areas of the new pricing flow that required evaluation. This targeted approach ensured we focused on the most critical aspects. Here are the specific areas we aimed to get feedback on:

User Experience Evaluation: How intuitive and user-friendly is the new pricing flow?
Premium Quality Assessment: Does the experience feel premium compared to our competitors?
User Engagement Analysis: Are users more engaged with the new design and features?
Accessibility Review: Is the new pricing flow accessible to users with disabilities?
Conversion Rate Impact: Has there been an improvement in the conversion rate since implementing the new flow?
Ease of Navigation: Can users easily navigate through the pricing flow without requiring assistance from a Loan Officer?
Customization Effectiveness: Are the customization options meeting the clients' needs?
Overall User Satisfaction: How satisfied are users with the new pricing flow compared to the previous one?
Feedback from Loan Officers and Advisors: What did Loan Officers (LO) and Loan Advisors (LA) think of the new flow?
Support Call Analysis: Did the new flow generate any support calls?

Results Achieved

The Product & Pricing Experience project streamlined the pricing flow, enhancing user experience and reducing development time. The solution's flexibility and scalability meet diverse client needs. By implementing a customizable and efficient pricing flow, we provided a more engaging interface. Unique illustrations and a mobile-first design contributed to the project's success. Flexible data input templates and a clear results page maintained consistency. The dynamic prototype secured stakeholder buy-in, facilitating a smoother development process. Overall, the project improved user engagement, reduced costs, and enhanced customization and scalability. Clients loved the new experience, and form abandonment rates decreased significantly.

Improved User Engagement: Enhanced user experience led to higher engagement rates.
Reduced Development Costs: Efficient design reduced the need for extensive development work.
Scalability: The system supports multiple clients with unique branding effortlessly.
Client Satisfaction: Clients appreciated the customizable and user-friendly interface.
Lower Form Abandonment: Significantly reduced form abandonment rates.

Conclusion

The Product & Pricing Experience project streamlined the pricing flow, enhancing user experience and reducing development time. The flexible and scalable solution met diverse client needs. Unique illustrations and a mobile-first design contributed to success. Flexible data input templates and a clear results page maintained consistency. The dynamic prototype secured stakeholder buy-in. Overall, the project improved user engagement, reduced costs, and enhanced customization and scalability. Clients loved the new experience, and form abandonment rates decreased significantly.

Improved user engagement and satisfaction.
Reduced development and maintenance costs.
Enhanced customization and scalability for clients.
Significantly reduced form abandonment rates.

ProblemClients needed a streamlined and easily customizable pricing flow to enhance user experience and reduce development time.

SolutionI developed a highly customizable and efficient pricing flow that enhances user experience and reduces development time. The solution includes unique illustrations to make the interface more engaging and fun for retail users.