Project Overview
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.
The Problem
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.
Project Goal
Translate our new marketing brand guidelines to a product design system, and launch new product experience in 3 months.
My Role
- 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
Duration
3 Months
Results
- 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.
New Kiavi Brand Guidelines were heavy on marketing.
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.
My options for our Marketing flow. I liked the simplicity of option XXXXX, so I started to refine some system components after that.
I did some visual studies of buttons, forms etc. Our new gutsiness were light so I kept them through that.
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.
I build the button and typography pages for our new style guide site. Adding specs was a challenge because ________.
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.
Example Design spec 200
Example: Implementation
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.
Final output of styles in zero height
The Results
Outcomes
- Launched on time on Nov 16, 2021.
- New brand experience well received.
- Set precedent for tech collaboration.
Lessons
- Pairing with Eng in real time is amazing.
- Matching type specs with code is hard.
Want to learn more?