Roong Vorasucha - SketchPro

Context

What does SketchPro do?

SketchPro’s mission is to build an AI assistant for the architecture, engineering, and construction (AEC) industry, starting with a web-based, image generation tool for architectural renderings

A white, 3D model input and what SketchPro produces after 1 generation

Why this problem area?

SketchPro allows more architectural designers to create their own renderings at a lower cost in a shorter amount of time

Currently, architecture firms outsource renderers, paying thousands of dollars per image, and each image takes weeks to make. Smaller firms also do not provide their clients with these visualizations because of the financial constraint.

A challenging problem space

Unlike other forms of visual media, architectural renderings need to be extremely precise

Just like construction drawings, renderings must accurately represent the design. Architects, interior designers, and their clients are very detail-oriented and can quickly catch even small discrepancies.

Available Features

We introduced various features to guide the AI with more precision

We learned early on that, in order to achieve that level of precision, users need to provide the AI with more guidance, mostly visually. We then grew a toolkit within SketchPro to allow users to do so.

Change Material via Palette

Provide SketchPro with specific textures when editing a material

Adjust Color

Fine tune colors of any material

Interactive Canvas + Online Search

Find specific assets from the web to add to the scene

Layers

Mix and match aspects of different outputs

The unanticipated outcome

Because of the various, unique features SketchPro offers, users found SketchPro workflows to be confusing.

Based on frequent chats with our beta customers, we learned that it does not matter how useful each feature is if users do not know how to apply them appropriately. SketchPro could get people to their envisioned renderings, but they felt there was a steep learning curve.

“I did find [the interface] almost started to be a little bit too much sometimes. Like, it started to get really complex.”

Architect, New Zealand

“I know it can do a lot, but I just don’t know how to use it.”

Interior Designer, New York City

SketchPro Editor, before the redesign

Problem Framing

The initial goal of optimizing for interaction efficiency led to decision paralysis

At this stage, my design focused on optimizing interaction efficiency by making tools easily accessible from the main screen. However, since these tools offer unique functionalities uncommon in other AI image generation apps, users were not aware of what was possible in SketchPro and were overwhelmed by the seemingly discrete tabs and buttons.

Ultimately, the question becomes:

HMW refine the interface so users always know what the next action should be?

Iteration and Testing

High Level Concept

Repackaging SketchPro into a step-by-step, wizard UX

After brainstorming with the CEO on potential solutions, we arrived at the idea of providing users with a step-by-step guidance to complete a task based on the different workflows available on SketchPro. I then gathered all those workflows and organized them into a diagram.

A workflow diagram, mapping the different “siloes” that each action entails

High Level Concept

Ruthlessly pared down and questioned the necessity of each feature

Old SketchPro editor, highlighting elements to be removed

Iterate

Created a clickable Figma prototype and tested the new approach with users to gauge the success of the idea

Learnings from testing round 1

Iterate

Built a workable prototype and tested it with 5 more users

Learnings from testing round 2

Final Solution

New Design Principles

1. ‘Show only what you can do at a given moment, but show ALL you can do’
2. Aggressively constrained at every step for simplicity

The Anatomy of SketchPro Editor

Main Workflows

Render

Generate new renderings based on an input image, a text prompt, and other settings

Change Material

Update materials of specific surfaces in the image

Insert + Smart Enhance

Search the web for assets to populate the scene, then use AI to blend them into a cohesive rendering, with realistic light and shadow

Success Metrics and Impact

Success Metrics

Users achieve desired renderings in fewer steps
Reduced error rates around prompting
Increased usage of the less common features
Team spends less time onboarding new users

Impact

Established the direction of the MVP, directly contributing to enterprise-level client conversions
Led the product redesign effort and enabled the team to ship MVP for a GA Launch in 4 weeks
Simplified user experience in preparation for launching to 9,000+ people on the waitlist, minimizing the need for live onboarding

User Testimonials

“…For ease of use, I would rank it right at the top. ... ...I like how restrained SketchPro was. I like how it was kind of organized in a workflow fashion.”

Interior Designer, North Dakota

“And I think, from our last major meeting, there have been improvements that really enhanced the user interface and experience.”

Senior Architect, Washington DC

“It was really easy for my interior designer to just jump on and start using it without me having to show her exactly how to use it. So I would rank SketchPro actually as one of my favorite tools that I've used.”

Design Technology Specialist, North Dakota

Reflection and Next Steps

Reflection

To get more accurate user testing results, I should test with completely new users

I could utilize services like usertesting.com to gain more unbiased feedback

If there was more time, I would test more concepts before narrowing down on one

Opt for low fidelity prototypes to save time as well

Document design rationale throughout the process to justify past decisions, especially when they are later proven to be less successful

In the effort to aggressively streamline the SketchPro workflow, we decided to remove Layers, a highly complex feature that we spent a lot of time building
We generally know why we decided to invest the time building out Layers at the time, but it would be much more helpful to have that rationale spelled out in a written form

Next Steps

Work closely with the engineering team to turn SketchPro into a robust product with snappy experience

As we release more and more people off the waitlist, continue talking to users and identify areas of improvement

Minimizing decision paralysis in a generative AI tool for architectural designers