The Company / Product
LendingHome helps Real Estate Investors (REI's) scale their business the necessary capital, tools, and support for their fix and flip properties. The company is consists of 350 employees distributed across the United States, with over $140 million in annual revenue.
LendingHome's name was not unique enough in the market, and leadership wanted to expand our services beyond loans to the entire lifecycle of real estate investors needs.
Translate our new marketing brand guidelines to a product design system, and launch new product experience in 3 months.
- Establish Design System with Product Design Team
- Build component pages for shared Style Guide Site on ZeroHeight
- Coordinate and pair w/ Engineering team match designs to implementation.
Team Size (20)
3 Product Designers, 18 Engineers
- Launched new brand and product redesign on time.
What I Did (Highlights)
01. Establish product design system based on new brand guidelines.
02. Build shared style guide for greater Tech org in in Zeroheight.
03. Pair with Engineering team on implementation to match specs.
01. Establish product design system
The Kiavi name and advertising-focused brand guidelines document had already been established by our Marketing Team in collaboration with an external design agency.
Our challenge as a Product Design team was to translate these print-heavy styles to a digital experience.
My role included this, that and the other thing.
To begin to define a system, each member of the design team created their own visual studies, which we eventually voted on as a primary candidate to share with marketing and leadership for feedback and buy-in.
The final experience looked like the one below. To get alignment from marketing and leadership teams, we held a cross-functional meeting and shared a prototype. changes were captured, and we were ready to build.
02. Building a Style Guide Site
One of the design team members built the structure of v1.0 of a style guide site which would serve as a source of truth for both designers and engineers during the rebrand.
I built and organized the Button and Typography styles pages. One of the challenges was that Zeroheight did not have areas for that and that.
To combat this issue, I did this and that.
03. Pair with Engineering on implementation
I joined twice weekly "Pair Sessions" with engineering to tweak code and mitigate ifferences between design specs and implementation in real time.
One of the challenges here was regarding typography; for example, our H3's were semibold 24px, but implementation they appeared heavier and larger.
The challenge was that we wanted to keep our spec in the style to optically it looked right, but would have to communicate to eng in zero height the differences.
To resolve this, I paired with an engineer other code in real time to make it look right.
I would then update our style guide to show xyz, so that we could keep the spec the same, but they could see the difference.
Additionally, another engineers made a table to do this and that.
- Launched on time on Nov 16, 2021.
- New brand experience well received.
- Set precedent for tech collaboration.
- Pairing with Eng in real time is amazing.
- Matching type specs with code is hard.
Want to learn more?