Brian Carden Design
Product Design Leader based in Austin, TX
01.png

Process

As part of the product design leadership team at BigCommerce, one of my roles is to define and articulate our product design process. The following is a blog post I wrote detailing our team’s approach and methodology.

 

Product Design at BigCommerce

Untitled presentation (4).png
 

Discover

Our process begins with empathy. The first step to a creating a successful experience is to develop a deeper understanding of our user. What problems are they trying to solve? What motivates them? Why are they looking to our product?

Engaging with our users can take various forms depending on the type of information we are looking to gather. The most common form of qualitative user research we conduct at BigCommerce are 1:1 interviews.

 
Screen Shot 2019-09-21 at 1.29.14 PM.png
 

When we begin a project we establish an Interview Plan to define the objectives of the interview, any initial assumptions to be validated, and the general flow of questions to be asked. We try to arrange a number of these interviews to help us identify user needs and identify opportunities. Once interviews are completed, the research is synthesized and an Insight Report is generated. Often times this report allows us to validate or disprove our initial assumptions.

Competitive Analysis is another method we use during the discovery phase. How is our competition attempting to solve problems similar to our own? What feature sets do they offer? Do opportunities in the market exist we can capitalize on?

 
competitive analysis.png
 

As part of this process we map the journeys of our competitors and conduct an evaluation based on Nielsen's Usability Heuristics for Interaction Design: A set of criteria that allows us to evaluate an experience without having to account for aesthetics or personal tastes.

 
heuristics.png
 

The results of this evaluation are then rendered in a “rainbow plot” to allow us to easily identify trends and spot opportunities for improvement within our own product.

 
rainbow_plot.png
 

In addition to “qualitative” inputs like user interviews we examine “quantitative” data as well. Using tools like Segment, our team evaluates user behaviors and intent based on actions taken within the experience.

Define

Once we have a sufficient amount of background, we begin the process of partnering with Product and Engineering to help Define the Problem.

This is the most important part of a product designer’s job. Far too often product organizations fall prey to the trap of "institutional knowledge”. Stakeholder interviews are a valuable source of knowledge, but cannot be the only source of input. Beware of the product owner that says “I know what our users want.” Many engineering hours have been wasted building features users don’t want and didn’t ask for. Taking the time to validate assumptions with users pays exponential dividends.

The following is an example from our team’s Intro to Design Thinking presentation. At this point, we ask the audience: “What’s the problem here?”

 
Untitled presentation (10).png
 

Inevitably someone will answer “He needs an umbrella.” This is an example of jumping to solutions.

The problem statement is: “He is wet.” An umbrella is a solution, like a raincoat, an awning, or in an “MVE” sense (Minimal Viable Experience), a newspaper.

An Experience Canvas is a tool we use to kick-off projects with our partners in product, engineering, and sales/marketing. This series of whiteboard, post-it note, and small group exercises is a way for team members to share knowledge and perspective, and allow the team and stakeholders to align around the key aspects of the project including: definition of problem, value proposition, targeted users, and metrics for determining success.

 
Untitled presentation (9).png
 

The output from the Experience Canvas should be an alignment on the business needs and corresponding user needs. We should also have a clear understanding of the Objectives and Key Results we hope to accomplish. OKRs are how we hold ourselves accountable and determine if we are successful. While our Objectives can be aspirational. Our Key Results should be Simple, Measurable, Attainable, Realistic, and Time Based.

For example:
O: Make it easier for our users to on-board.
KR: 5% increase in our conversion rate by end of Q1.

Defining Users

One of the challenges our design team at BigCommerce faces is designing experiences for vastly differing user groups. We provide solutions for small business, mid-market, and enterprise business merchants. Within those economic parameters, our user definition task has the additional complexity of wide ranging business models and user needs.

Another output from our Experience Canvas workshop should be alignment on the user segment we are focusing on.

The team begins by generating user stories based on our collective experiences with users. These stories are then plotted on a graph based on the merchants’ e-commerce sophistication, and the complexity of product experience needed to achieve their goal.

An affinity diagram helps us visualize how these user needs align. The team traditionally votes to confirm our direction.

In the below example, we see a cluster of user stories in the “lower sophistication/lower complexity” quadrant.

 
users.png
 

Develop

With our problem statements, user cohorts, value props, and metrics for success defined… we are ready to begin solutioning!

Ideation begins with How might we… statements based on the insights generated during our Discovery phase.

For example:
How might we… make it easier for our users to on-board?“

Our Experience Canvas workshop has helped us define an MVE (Minimal Viable Experience) for the project. An MVE is the first incremental improvement towards a grander vision for a product feature set.

In this phase, development of one or more concepts begins. Design team members partner with Product and Engineering to define timelines and deliverables. Information architecture and wireframe explorations begin.

 
ideal.png
 

Validation of our hypotheses begin via rapid prototyping. Low fidelity prototypes are tested with coworkers, friends and family. With the team sufficiently confident in our direction, higher fidelity prototypes are created and real users are recruited for user testing.

These tests are ideally conducted in-person and recorded. A user is asked to complete a series of tasks and articulate their experience, thoughts, etc. Feedback is gathered and adjustments to the experience are made.

 
Untitled presentation (11).png
 

Deliver

With our prototype receiving positive feedback, we are ready to move on to the Delivery phase. Design team members meet consistently with Product and Engineering counterparts as they prepare to hand off production files. Our team at BigCommerce has been hard at work developing our Design Language System called BigDesign.

 
 

Along with designer facing specifications, use cases, guardrails, and resources we have partnered with our front-end engineering team to create a React Component Library in order to streamline the design to developer handoff and help standardize our interface patterns and behaviors.

With production code being developed, designers and researchers begin recruiting users based on targeted cohort groups. Users join a closed beta and are introduced to the feature. After several weeks our team conducts a follow up interview to gauge the success of the feature.

Once results have been deemed satisfactory, the feature is move to open beta, and available for all users to opt in. Feedback from users is encouraged through contextual prompts. Engineering and product prioritize bugs as the team meets with the Product Marketing Team to discuss got to market plans.  

Do It Again

Our feature has achieved General Availability within the product and is now available to all users. But, our journey is just beginning. The design team partners with product and engineering on a post-launch roadmap to plan the next wave of feature development. We gather new data points from users as they interact with the feature, we discover new opportunities for improvement, and the cycle begins again.

 
again.png