Design Strategy in Action: Simplifying Tech to Propel Business Success
TLDR;
I led a team of 3, sometimes 5, designers responsible for creating all experiences related to Blend’s low-code tool, the Blend Builder Platform. Users of this tool can build products for banks—such as loans, credit cards, and deposit accounts—in a matter of months instead of years.
During my time at Blend, my division experienced a year-over-year growth of 9%. The user experience updates created by my team played a crucial role in securing a deal with Navy Federal Credit Union, which is expected to generate over 2 million transactions per year, each contributing to Blend’s revenue. At the time the deal was made, the Blend Builder Platform was processing approximately 1 million transactions per year.
$30M
Quarterly Revenue
$9%
Year Over Year Growth
3M
Annual Transactions
Situation
I was hired at Blend to lead the design work for the Platform team, focusing on their low-code tool, the Blend Builder Platform. Our goal was to enable customers to access the Builder, allowing them to create their banking products. When I joined, only Blend's professional services team could use the Blend Builder Platform.
This slide is taken from one of Blend’s earnings calls.
Task
Create and execute a design strategy that influences the product roadmap to achieve our goal of enhancing the usability of the Blend Builder Platform.
I based my design strategy on company and business goals, worked to get projects on the roadmap, and led my team in executing those projects, and helped guide them to launch, as shown in the illustration
A prototo persona representing the non-technical user
Activities
Identify and document users
My initial steps in developing my strategy involved meeting with product managers, shadowing customer support team members and engineers, and conducting a heuristic evaluation of the Blend Builder Platform to document my experience as a new user. This process led me to create proto-personas that identified two main user archetypes: technical and non-technical users. I focused on their goals, needs, and pain points.
Both groups struggled with managing more code-centric elements of the Blend Builder Platform and desired a more hierarchical interface. These two elements guided my strategy. Key sentiments from the sessions included:
The desire for a clearer, more hierarchical interface
Hope for an easier way to work with the data
A need to spend less time hacking the data model
The non-technical proto persona
Get Projects on the Roadmap
Working with my designers, the product managers, and the engineers, many projects related to this effort appeared both on our roadmap and rituals, all with the goals of reducing the amount of technical overheard users would endure while trying to use the Blend Builder Platform, as shown in this detail from the illustration of my strategy
Projects I helped get on the roadmap
A sample of projects built from the strategy
Connect the Front-End to the Back-End in a Simplified Manner
For elements within the Blend Builder Platform to function correctly, users have to connect them to the data powering the backend. This issue manifested itself in different ways. One of my designers worked on remedying this issue by introducing a more contextual, UI-based approach to connecting the front end and the back end.
The shown image allows users to directly edit the data model in the context of what’s being built.
Giving the users the ability to edt the data model in context
Simplify editing the data directly
The notion of being able to toggle back and forth between the front end and the back end view was introduced. This allows for a more seamless handoff between the technical and non-technical users to allow for direct editing of the data, which was required of every project to ensure the products being built took advantage of Blend’s regulatory-compliant APIs, as well as those belonging to our customers.
Now any user could edit the data model.
Giving the users to option to toggle between regular and advanced editing
Simplifying using the backend view also meant allowing users to understand where data was used throughout an application, which could be pretty large.
For example, our Instant Home Equity product was comprised of 2600 nodes, which could make it almost impossible to find every instance of a data object, which could be problematic. With my assistance as a player-coach, the team designed a way to find and get to every instance of a piece of data.
Showing where data is used throughout an application
Enabling Copying and Pasting
Long a pain point for users, I worked as a player-coach to help my team design the experiences necessary for users to be able to copy and paste within the Blend Builder Platform. I spent a great deal of time with the lead engineer on this project to fully understand all of the technical issues, of which there were many, related to it.
This project unearthed many data mapping problems, which these screens seek to address.
My wireframes and flows for the copy and paste flow
The final UI for the Copy & Paste Project
Results
Blend’s press release about the Navy Federal Credit Union deal
To this day the Blend Builder continues to power the experiences banks use to provide products and services to their customers, as shown in one of Blend’s quarterly earnings presentations.
These kinds of experiences are enabled by the Blend Builder