My Process

Problem Discovery — User Experience


Due of the rise of B2B Commerce, manufacturers are looking for ways to personalize their shopping experiences for their customers.



With varying industries, the purpose of online stores may differ. Some manufacturers would like a store that is solely for reordering products, others would like to use their store to promote new seasonal products. Essentially, manufacturers would like the freedom to build their experience however they see fit.

Currently, online stores are built behind the scenes. SaaS companies help these manufacturers build their stores, and while that may work for some, it is not sustainable. Manufacturers need a solution where they have the power to update their store to in response to many variables: Changes in the market, frequent merchandising, and customer needs.

In response to this problem, this study showcases the research and development that was taken to design a builder app that would give manufacturers the flexibility of creating and editing their own online store.


Top Challenges

Below are some design challenges face when approaching this project with some high-level questions we used to brainstorm possible solutions.

Need-Specific Templates

  • How can we design an onboarding experience for users with various needs for their store?
  • How can the user change their template to fit different needs?

Dynamic Lists

  • How can users create different types of list such as: Product Lists and Object Lists?
  • How can users create Object Lists that are dependent on sorting mechanisms such as date range, alphabetical, most recent?

Global Templates vs. Single Use Pages

  • How do we differentiate between customizing the pages of a site map, and customizing pages within the app?
  • How do we differentiate a template of a page vs. a one-off page for marketing or merchandising?
  • How can users edit pages with segments that are locked and cannot be moved?


Competitive Analysis

We took a closer look at what competitors are doing as well as researched best practices for builder products outside of our industry.

Designshake   Customize   debut   Shopify2.png
Screen Shot 2017-08-23 at 12.41.32 PM.png
Screen Shot 2017-08-23 at 12.32.30 PM.png
Screen Shot 2017-08-23 at 12.34.16 PM.png


User Stories

As complex as designing a building app can be, we needed to start by simplifying it. By identifying the basic tasks a user can do, it was clear that the biggest challenges were surrounding how ‘components’ can be built. We started by creating a list of the types of ‘components' a user can build through user stories. From there, we thought of the how to’s.

user stories.png


Since we have already conducted user interviews for Direct Mobile, we took the opportunity to identify User Personas to help us better understand what kind of experience to build. Here are some examples of the types of individuals who will be using the app.

user persona.png

UI Design

Site Mapping

When working on the site map, we had to keep in mind that this app would launch upon being within another application (See Hub), so not only did we need to think through the navigation of the builder app, but we also needed to think through the navigation of the app it was launching out of.

Screen Shot 2017-08-25 at 8.55.33 PM.png


Since this would be new to the product, we had an opportunity to increase adoption by providing a strong on-boarding experience. Upon entering the catalog builder, a user will be able to start building:

  1. Creating their shop
  2. Selecting a theme
  3. Choosing app colors
builder sketch1.jpg

Onboarding sketches

Interactions (left), Adding Components (right)

builder sketch3.jpg

Creating Objects Lists (left) , Onboarding(right)



Once we had a our on-boarding journey, we built this into a prototype to share with our customers for feedback. View Onboarding Prototype


v1 Homepage (left), Add a component (right)

Creating dynamic product lists

Project ended due to availability of resources