Homepolish / Project Creation
The goal with redesigning the project creation experience was to make it as seamless as possible for clients to connect with a complimentary interior design conterpart.
This was part of the overall user registration UX – since you were able to have an account prior to creating a project. Registration was partitioned into two parts, account creation (ac) and project creation (pc).
Homepolish was a company that connected clients with interior designers for various sized renovation and design projects. The work included tools to help gauge price bracket – making sure scope complemented the designer’s availability – and a comprehensive tool that allowed seamless collaboration when parties were working remotely. It was a lot of fun designing tools for other designers and the CEO was a great like-minded collaborator.
Client Qualification Journey:
Projects created by the client would be grouped in 3 different tiers depending on scope and budget.
Projects created by the client would be grouped in 3 different tiers depending on scope and budget.
User Flow Chart/Map:
Working out the UX section by section with a simplified outline.
Working out the UX section by section with a simplified outline.
A tangential side note.
Our creative team was quite small with two designers (both of us juggling multiple different projects) and three product managers. During this time I was going back and forth from California to NYC (pre-covid), so most of our creative sessions were done remotely. Training for working conditions in the immediate future you could say.
Our creative team was quite small with two designers (both of us juggling multiple different projects) and three product managers. During this time I was going back and forth from California to NYC (pre-covid), so most of our creative sessions were done remotely. Training for working conditions in the immediate future you could say.
For this project, an iterative process was started by working out the UX on mobile which would guide other platforms (desktop) later on.
There was this fairly simple idea of a long scrollable array split into sections.
After the initial wire sketch, deep-dives were made into each section to explore various options.
Example sketches services via Location Details is below.
Eventually, we consolidated the selected options into a sequence of sections.
Continue narrowing down while adding more fidelity to the wires.
One of the fun (if not tedious) tasks of this project was sifting through the massive catalogue of interior design case studies and selecting backdrops for each step of the user flow.
Work Area / Living Space Mix
Work Area / Living Space Mix
Living Room / Home Mix
Home / Kitchen
We narrowed the case study images down to three per section and tested them in-situ for both desktop and mobile.
After putting together a batch of selects, we did another round of testing in-house and made sure all consideraitons were applied. This ended up being a little messy – with unforseen politics among the interior designers who wanted to be featured. In the end, we made the call based on what we thought were best for content framing and overall composition.
Uncropped Photos
Uncropped Photos / Crop Areas
Cropped Photos
Using a variety of prototyping and capturing tools (AE, Principle, etc), it's always good to do some rough transition examples for front-end, just to make sure everybody is aligned.
Round after round of UX hand-holding comes next.
Step 1 / Starter Screen / Desktop
An anchor link for "How the Homepolish process works" is right below the input box on every step of the way.
Selecting any of the options triggers a progression in the flow.
Step 1 / Starter Screen / Mobile
Step 2 / Location Details / Business / Desktop
The zip entry auto-populates city/state.
Step 2 / Location Details / Business / Mobile
Step 2 / Location Details / Residential / Desktop
Various form element states.
Whoopsie daisy – big fan of error message copy.
Step 2 / Location Details / Residential / Mobile
Step 3 / Scope of Work / Services / Desktop
The two big buckets for services were "Build & Renovation" and "Interior Design". We went through many different variations of the UX for this and ended up with a simple modal sequence that's triggered when selecting either option.
Build & Renovation flow
Selecting "Yes" for structural changes expands the modal for an additional question regarding hiring an architect.
Step 3 / Scope of Work / Services / Mobile
Step 3: Continued / Scope of Work / Services / Desktop
I used the same space grid here that I used for the Collection tool with the added option of selecting the "Entire Location". This made the rest of the options inactive and prompted the user to enter the square footage.
Step 3: Continued / Scope of Work / Services / Mobile
Step 3: Continued / Scope of Work / Services / Desktop
Seeing how Homepolish thrived on their expert interior design skills, we made it so that when the user attempts to bypass the this step, they get a contextual "are you sure?" message.
Interior Design Flow
The option for "Furniture Selection" expands for an additional question that better prepares the deisgner.
We made it easy for the user to auto select previously used spaces that they specified in the previous steps.
Step 3: Continued / Scope of Work / Services / Mobile
Step 4 / Scope of Work / Additional Notes / Desktop
Step 4 / Scope of Work / Additional Notes / Mobile
Step 5 / Scope of Work / Budget Slider / Desktop
Step 5 / Scope of Work / Budget Slider / Mobile
Step 5 / Final Details / Contact / Desktop
Step 5 / Final Details / Contact / Mobile
Thank You Screen
Also known as the "let down screen" was shown to the many unqualified users.
