DIO
DESIGN
HubHaus Transformation
I am responsible for product design and branding for HubHaus. My redesign of HubHaus's website resulted in a 40% customer conversion increase. The newly designed internal tools helped boost acquisitions and operational efficiency, which supports our nationwide expansion for HubHaus. This successfully contributed to our rapid growth.
My Role - Senior Design Lead
Collaboration with CEO, Growth Department, Engineers and Copywriters
Back story -
I joined HubHaus in March of 2018. There was only one designer on the team before I arrived. There was a version of the website, the tenant portal, and admin portal. Luckily HubHaus had already proven a product-market fit, so we were looking to scale to more states and cities. I got in at the right time to create valuable digital tools for the staff.
Research conducted
I lived in one of the HubHaus residency for 6 months to experience our product.
-
Reviewed recorded user interactions on the HubHaus website via Hotjar
-
Conduced eleven live user studies with potential users using different devices.
-
Gathered website data. (including Google analytic, Mixpanels & Periscope data...)
What did we find?
Bad usability led to high drop-off and an outdated visual design led to a lack of trust
1.Mobile/tablet had usability problems which resulted in only half of the conversion rate compared to the desktop site.
2. The website did not have a user flow for users with different needs or in different stages of room searching.
3. Lack of some features to support user interactions.
4. No efficient navigational system.
New Branding
.png)
The color is too contrasting and makes it hard to have it in different colored backgrounds.
Concept
A House shape - Hub"Haus"
Infinity loop - Community effect
Puzzle- Diverse people getting together
thehubhaus.com redesign
At first, the goal was to keep the development lean. To accomplish this, the product team conducted A/B testing and optimized the website piece by piece. However, the problems stated gave us a reason for a site revamp.
Primary problems:
1. Lack of a flexible code structure for testing and experimentation.
2. Bad usability, especially mobile UX causing a drop-off. Visual Design was out-dated, causing a lack of trust.
A twist to enhance the user flow
1. Simplified the top menu bar options to decrease confusion and help guide potential tenants, landlords.
2. Encouraged cross-page browsing to keep users on the page. I found every potential touchpoint that would drive users to browse more houses.
3. Enhanced the after-booking journey by recommending more houses which resulted in a 33% increase of the number of showings booked per user.
Digital ecosystem
& Scalability
.png)
Admin system - Internal tools.
Proven success
Lucy the PM:
OMG the site conversion is nearly 40% better than the old one!
+32.5%~39%
book a house showing rates
6.3 increased to 6.5
satisfaction rate for Tenant after Tenant Portal Improvement
Estimated 200 + hours/week
cut in labor cost with 10+ Internal tools built
Kei the VP of growth:
This is awesome! How!
Consistent Brand
A set of portraits for the team, as we have a global team, it helps boost team moral.
What we learned from building this product
What we did well
-
Good consistent branding helped to build trust and to drive high booking rates.
-
Improvements in information architecture and UX for mobile, tablet and desktop.
-
Improved website speed. Our tech team changed to Vue.js and built a good foundation for future UI development changes.
Below are some other small examples of UX improvements:
