Overview

Design with Frank is an architectural tech start-up that sells professional blueprints online with a mission to democratizing good home design for everyone. Our team was told by Gabriel and Yaoyi, Co-founders of Design with Frank, that they would release a 3D software that allows home buyers to design custom homes tailored to their creative visions. But the company was still at its soft launch stage with a viable version product available.

The Problem

The soft-launched site was attracting traffic, but the conversion rate is low.

The Goal

The redesign aims to create a seamless home design purchasing journey, focusing on the most apparent needs of the majority of first-time new homeowners: structure, trust, and undemanding.

My Role

Project manager, UX/UI designer, Interaction Designer

Tools

Figma . Google Slide . Photoshop

Scope

5 Weeks . Me + 2 Founders + Engineer

Design Challenge

“How might we streamline the content on the home designing website, so first-time self-builders are not overwhelmed by the task. “

Discover

Identifying User Pain Points

To identify hidden pain points on the current website, we conduct 5 usability testing we learned that the company does not do a great job of demonstrating the service to potential buyers.

Following are detailed breakdowns of touch-points where all participants encountered issues or had questions:

Usability Testing Key takeaways:

Expectations For Service Don’t Match What is Delivering - DWF marketed their product as fully customizable, but the full-fledged customized engine was no launched.
“ This product is not customizable. ”
Jargon-filled Language Description Clouds Brand Message - DWF utilized architectural jargon such as “ rendering,” '“detail schedule,” etc. These terms disengage users.
“ What does rendering mean? ”
E-commerce Shopping Experience Feels Fragmented - DWF directed users straight to the checkout page from the product page without a confirmation.
“ What exactly am I getting from the package? ”
Lack of Action Indicator Causes Frictions During User Journey - DWF did not have distinguished visual differences on action features.
“ How do I close this window, should I scroll? ”

“ I need a Structured, Trustworthy, and Undemanding service to minimize my stress from the home building process. ”

Simon is the composite character, which our team created based upon 5 interviews of people who were going through the home building process to further define the needs of targeted consumers.

Feature Inspirations

I conducted competitive and comparative analyses. They were companies that sold floor plans online. I created the overall flow of the entire buying process and mapped out user journies.

I highlighted elements that facilitate the journey and prioritized them with MoSCoW to avoid featuritis.

Prefixed Package

Credibility

Plain Language

Itemized Info

Design Solution

‘Make it Yours’ Design engine -> Prefixed Blue Print Package

Scenario: A first-time landowner wants to purchase a one bedroom one bathroom blueprint package from DWF to get an idea and scope of the project

Stopping the Decision-Making Anxiety

From our research and persona creation, we learned that most people felt overwhelmed by the home building task, we decided to package up limited viable options into prefixed home design drawing sets to make the shopping journey less demanding, minimizing potential frustration.

Laying the Foundation for a Structured & Trustworthy & Undemanding Experience Design

My Contribution

Converted research to written paragraphs to identified end goals for each frame.

Synthesized elements from individuals to develop the final sketch wireframe

Core concepts:

Stop marketing their product as fully customizable to match “frank”’s soft-launch

Deliver clear and concise message with plain language
Deploy high performing content to guide users and connect fragmented shopping journey

Through synthesized information, our team first drafted out sketches individually and collaborated to highlighted features from each frame. With the rapid iteration approach, we were able to develop consensus in a timely manner.

Key Changes

Product Page

Design gallery -> preselected packages

Focusing Frames in Figma

My contribution:

Layout framework for each page
Streamlined and quantified UX information
Built Product List Page and Product Detail Page
Put together Prototype in Figma

“Home” Page

Helps first-time visitors to grasp a full image of what the company has to offer, find exactly what they’re looking for, and keep them engaged.

1. Who is Frank - brand statement

Structured Contents and Guidelines:

"Who is Frank?” - introduced brand statement at the beginning to provoke brand awareness
“Why Us” - highlighted “Professional Floor Plan”, “ Made to Sustain”, “Instant Download”, “Design Consultant Team” makes DWF stands out in the industry to gain acknowledgment
“What is Included” - comparison chart with upfront pricing for users to identify end products in visually clarifying format
“Meet Our Team” - human images increases initial trust
“Footer” - CTA encourages next desired action

Transparent writing

Keep users engaged and avoid jargon, use plain language “professional floor plan” instead of “high-quality rendering and details” on the current site

Sufficient Color Contrast

Images of text have a contrast ratio of at least 4.5:1, which fits WCAG guidelines and makes web content more accessible

2. How Does it Work - featured qualities

“How It Work” Page

Brings clarify to users about the service and end products while preparing them for the next action

Step-by-step Guidelines

structured infographic on the top helps users to follow understand the end-to-end process

“What is included in the package?”

Itemized and quantified sheets of construction drawings, numbers of consultants sessions, and times of revision.

“ Product List ” Page

Presents limited viable options in an explicit way

Pre-selected layout packages

Designs are categorized based on floor layout to help users to find their most relevant product quickly

“Product Detail” Page

includes detailed information to help users to make an informed purchasing decision

Onboarding - guidance

Explaining terms the user will encounter on the product detail page
Providing a self-help section for users to refer back to

Streamlined selections

users only need to select 2 options ( package type and energy system) to add items to the cart, compares with the 4 options before

Order Confirmation

Users shared confusions on items included in each package, so we added an order confirmation to demonstrate a list of items they should expect before directing them to Shopify

Results

Scenario & Task: : “ You are a new land owner looking to build a home for yourself outside of urban area.
Show me how you would purchase a Discovery Design Package of a 1 bedroom and 1 bathroom home.”

User Needs & Goal Met:

85% Reduction in time to complete the task (9-15 mins to 2-3 mins) — guided process, concise information, pre-selected design packages. and “compare package” feature
Trustworthy brand — added a “featured in” for brand awareness, “Team” image to increase initial trust, and “compare package” chart shows price and items upfront
Easy to follow through — Jargon-free guideline, “comparison chart,” sufficient color contrast, accordion view to explain home terminology to keep users engaged
“Clean” and “friendly” feel — kept the professional yet affordable brand tone consistent

Conclusion & Next Step

Through usability testing results, users showed significantly reduced time to complete the task and increased trust with the brand in the redesign. Our design focused on building a structured, trustworthy, and undemanding service through clarity of terminology, the product visibility, and intuitive navigation through UX writing and visual graphics. As a result, users gained confidence with product knowledge during their streamlined home design purchasing process.

Next step, the company was at a rapidly developing stage, therefore, our team like to continue refining and iterating the overall user flow for each milestone.

Reflection

Stop Designing For the Future and Focus on the Present Feasibility.
During our initial stakeholder meeting, our clients highly emphasized the core of their unique business model, which is to provide a “ fully customized self-home designing“ experience. Our team took the idea of “customization” to heart, that we later realized we lost sight of users’ current pain points regarding the soft launch stage. The company’s “customization software” was yet to launch, by featuring something that would exist in the future result in discrepancies between users’ expectations and product delivery. Hence, low conversion rate as users don’t purchase what they don’t understand.