Spinwheel

Overview:

Spinwheel.io is a debt-management SaaS startup that approached me to design a mature end-user experience for their beta product within a 4-sprint timeframe.

My role:

Product Design
Product Design Strategy
Design System Architect

The challenge:

The main challenge for this project was to design a debt-management solution that was intuitive, user-friendly, and visually appealing to Spinwheel's customers and their consumers (B2B2C). Additionally, we had to ensure that the design would be scalable and easily configurable for Spinwheel's customers to align it with their brand. The final and biggest challenge was the extremely tight timeframe of 4 sprints.

The product design solution:

I quickly created a project plan that would allow us to maximize the 4-sprint window, focused on critical design tasks that would achieve Spinwheel's outcomes. Each of the below phases was completed in record timing by staying closely engaged with client stakeholders across each phase of the design.

Up-front research:
We conducted rapid research and aligned on personas, use-cases, and outcomes for end-users. This phase involved understanding the user's pain points, how they interact with the current debt management solutions, and what features they would like to see in a product. We considered both customer personas (developers and product managers) and consumer personas, such as students, parents, and other individuals who may require debt management help. By conducting user research, we were able to identify key features that the product needed to have, which helped us in the subsequent phases of the project.

Setting a UX vision:
After we had a good understanding of the user's pain points and needs, we used a lean UX model to align the business's goals with tangible user experience themes and priorities. We aimed to help Spinwheel.io win with its beta release. This phase involved synthesizing the research data and insights to define a clear vision for the product. The vision set the tone for the entire design process, and it helped us to identify the key design themes and user experience priorities that would inform our design decisions.

High-fidelity concepts:
With the UX vision in place, we moved directly into creating high-fidelity designs. We created three different design directions that offered unique ideas around data visualization, interactions, and functionality. This phase involved a lot of collaboration between the Spinwheel.io team and the design team to ensure that the design concepts were aligned with the UX vision and business goals. We used a user-centric design approach, ensuring that each design direction was focused on the user's needs and would improve their experience with the product.

Here's a snapshot of the first concept I came up with, which I called "Immersive" due to the progressive style of the aggregate debt data visualization. Conceptually, my goal was that the data visualization would update in real-time based on changes made to their debt pay-down timeframe or a recent payment.

Here's a snapshot of the third concept I came up with. In this concept, I pushed the UI to be as information-dense as I could while maintaining balance and overall usability.

Refinement to spec design:
After we had developed the high-fidelity design concepts, we selected the best parts of each concept and refined them into a more suitable beta product design. This phase involved creating a design system that would enable the Spinwheel.io engineering teams to build and scale the product more efficiently over time. We worked on a lightweight design system that would be easy to use, flexible and allowed for customization. We ensured that primitive elements like color and typography were easily configurable across the entire design, so customers could theme the product design for their brand. We also tested and validated the design with the Spinwheel.io team to ensure that it was effective in meeting the user's needs and business goals.

Here's a clipping of the overall design system I created for Spinwheel. It's a primitive design system in the sense that I focused on the key aspects that Spinwheel would need to scale and achieve their immediate goals.

Here are three of the critical screens I worked on for the final design phase. The Dashboard screen (left) progressed into a nicely balanced view that allowed users to see all of their debts in one place and take action based on high-level but important details. The Debt Category screen (middle) is a design for users to view all debts by category, and take actions based on recommendations from the Spinwheel technology. The Make a Payment screen (right) enables users to make payments and see what the impact of their payment will be to their overall debt pay-down.

All of the designs were compositionally setup to work responsively across any screen size. Here's the dashboard for larger screen sizes.

Here's the payment screen at larger screen size.

The outcomes:
Finally, the Spinwheel.io team was thrilled with the design. Engineers appreciated the detail and thought put into the structure of the design and the ability to use the design system. Product managers loved that they could showcase their vision with higher-fidelity designs. While the product is still in development and only in the hands of early adopters, Spinwheel will start to gather feedback from end-users soon as their customer base grows. This phase involved launching the product to early adopters, gathering feedback, and using that feedback to make improvements and updates to the design. The outcomes were positive, and the product was well-received by both the Spinwheel.io team and early adopters.

"All of our internal product leadership and developers are really excited about the new designs you provided. The developers appreciated the design system scalability, and product managers can now be more confident showing customers on our product experience vs. just talking about our product features"