Testing a Proof of Concept

1. Ideation & Sketching

Goal: Test our hypothesis that clients will find value in this product with a Proof of Concept before building it
I was tasked with with designing and testing a POC feature called Key Measures
I made initial sketches, and iterated on the wireframes with one of the founders

2. Low Fidelity Prototyping

I designed this prototype for a presentation on this feature to the client.

3. Successful Hypothesis Validation

Result: Concept resonated with client, they signed a contract with us, so engineers built this proof of concept feature

Collaborative Brainstorming

I was assigned to the team to build the Key Measures feature into a full flagship product called Procure.
I got together for a brainstorming session with the founder, the product manager, another designer and stakeholders/end users.
In that session, our end-users sketched out the traditional customer journey maps/pain points/requirements.
I worked with the PM & another designer to sketch out how the customer journey map could work in our system and with our data structure, and which workflows we could implement.

Scoping the MVP

I scoped down the customer journey into the first 3 workflows we could build
for the MVP:

Importing resources & cost codes
Mapping Resources to entities
Exporting takeoffs and BOMs

User Flows I omitted:

Pricing calculation features
Full ERP Integration Hub

Success Metrics:

Reduce manual work of measuring take offs and calculating purchasing data
100% of imported customer data is mapped to our system data
All 3 workflows are successfully completed by users
Customers can export a 100% accurate Bill of Materials

Wireframing the Basic UI Structure

The key user story: As a purchasing manager, how do I use this product to produce the accurate Bill of Materials (BOM) I need to build this home?
I iterated on my previous proof of concept design, identifying which parts of the UI should support the 3 workflows

High Fidelity Prototyping

Working with Ambiguity: I needed to design a mapping interaction without having a full dataset to design with.
Collaborative Whiteboarding: I got together with the other product designer at Higharc for a collaborative white boarding session and sketched out a rough mapping interaction.
High Fidelity Prototyping: I designed a high fidelity prototype to test our hypothesis that we needed a table-based mapping interaction.
Result: Consensus was reached that because of my prototype, we decided to build this table in React because AG Grid wouldn’t support my design, the mapping interaction from the high fidelity prototype was implemented.

Check out the Figma Prototype

Three key workflows for the MVP

Import customer ERP data.
Map home file data to imported customer ERP data
Export resulting Bill of Materials (BOM) data.

Tradeoff: I initially designed a full feature for workflow #1, but
I simplified it for the MVP to get a working version shipped faster.

Final Iterations

Before: 3D canvas in center, Inspector panel on the right

Challenges of fitting 6+ column headers and a nested data structure into a narrow side panel. I had to abbreviate and truncate a lot of column headers.
We didn’t have a full dataset available to us which is why the design turned out like this.
When we got a real dataset in on DEV, this design started breaking down

After: 3D canvas above, Inspector panel below

One of the engineers tested out a horizontal orientation of the interface on DEV and asked me what I thought.
This layout and full table width enabled a better mapping workflow by increasing the visibility of content.
This turned out to be the better design for customers used to using table-based editing software like Excel and Google Sheets.
Takeaway: Work with engineers to test and prototype with complex data sets early on and throughout the process to inform the most effective design.

“With Higharc, we see where every stud goes, where every beam is, how many sheets of plywood you need on the wall...That level of granularity helps you take waste percentage down exponentially.”

– JOHN FOSHE, CUSTOMER

Takeaways

Collaborate closely with engineers to prototype ideas and wireframes with real datasets early and often when possible to test the most effective design solutions.
Always be ready to scrap designs: constraints, scope and performance will determine what the best UX is.
Strategic Progressive Disclosure is key to guiding users through multiple workflows in information dense UIs. Don’t put every workflow in one view.
Convinced two more enterprise clients to sign big contracts with us.
Build on familiar UX patterns for customers...and make them better!

Higharc Procure

my role

Duration

THE TEAM

Processes

Problem

Solution