PRODUCT DESIGN

PRODUCT DESIGN

Journey & Template Builder V2

Journey & Template Builder V2

Popup's Store Editor

Popup's Store Editor

My Role

Product Designer — Redesign, Visual Design, Interaction Design, Design System, Prototyping

Timeline

April 2023 - September 2023

Overview

Popup is the only no-code eCommerce platform that allows you to visually control the customer journey and checkout experience, taking your online store to the next level.

Creating your journeys and crafting the storefront is achieved through the utilization of the store editor. This endeavor focused on revamping the platform's journey and template builder products.

Addressing past user issues, constructing wireframes, establishing a design system, and mapping out user flows were all part of the process.

Define.

#1 Previous Journey Builder Design

[Previous Journey Builder Layout]

  1. Topbar: The top bar has several function including:
    a. Ability to exit the Popup Editor
    b. Relevant information about the current store
    c. Ability to switch between the Journey Builder and Template Builder
    d. Ability to see the status of the Journey version (Live/Draft)
    e. Ability to save changes

  1. Sidebar: The sidebar is where all editing occurs

  1. Structure: The “Dock” is where merchants go to add elements to the Journey Builder. The dock can be activated by Right Click or by clicking the (+)
    a. Entry Point
    b. Page (Could Combine General, Lead, and Sales)
    c. Checkout
    d. Offer
    e. Order Status
    f. Redirect

  1. Canvas controls

: Allow merchants to manage the pan and zoom functions, ensuring that the constructed journey remains visible within the confines of the screen.

  1. Canvas: Space designated for the merchant to position journey elements and create diverse journeys according to specific needs.

#2 Previous Template Builder Design

[Previous Template Builder Layout]

  1. Topbar: The top bar has several function including:
    a. Ability to exit the Popup Editor
    b. Relevant information about the current store
    c. Ability to switch between the Journey Builder and Template Builder
    d. Ability to switch between different templates
    e. Ability to see the status of the Journey Version (Live/Draft)
    f. Ability to switch screen views (Mobile, Desktop, Full screen)
    g. Ability to Save Changes

  1. Sidebar: The sidebar is where all navigation and editing occurs.

  1. Template Settings: The template settings allow the merchant edit a few settings for the template.

  1. Theme Settings

: Opens Theme Settings things where the merchant can configure styles and design related settings.

  1. Template Preview: Where the merchant can preview everything in real time.

#3 Previous Defined UX Problems

Journey Builder

  1. We’ve received feedback that merchants don’t always notice the Dock ( + ). Given there aren’t a lot of elements that get used on the Journey Builder we could probably make them more accessible


  1. Pretty much every action occurs in this sidebar which requires a lot of clicking. We could introduce a 2 panel sidebar so make editing within the Journey Builder a lot easier.

Template Builder

  1. The Sidebar is used for everything. Because of this, merchants have to navigate in and out of things within the sidebar which can be cumbersome. It also requires a lot of clicking around.

A better approach might be to separate the the organization of Sections and Blocks from Section and Block Functionality and follow a similar pattern to Webflow and Canva.


  1. Our inputs take up too much space. When building more complex sections that have large schemas (schema = list of inputs), it can make a section look daunting, complicated and requires the user to do a a lot of scrolling.

Discovery.

#1 Journey Builder Pain Points

Element

User Story

Description

Element

Page

User Story

As a merchant, I need to be able to see the page previews in Journey Builder

Description

Currently, the journey builder previews are broken, so the user is not able to visualize the entire journey in the journey builder. Example of what The Journey Builder page previews could do. On hover (or trigger), scroll and view the entire page's content.

Element

Page

User Story

As a merchant, while adding a Template to a Page, I feel that option “Add new template” or choosing from an existing template are disabled

Description

Choose a page > add Template > the grey sections in the side bar, makes u feel that they disabled, looks like the "Create New Template" button and the existing Templates that u can chose from are disabled

Element

Page

User Story

As a merchant, I find that the Page Types in Template Editor and Journey Builder are confusing

Description

The merchant is not able to add desired sections if they select a wrong page type

Element

Page

User Story

As a merchant, I need a quicker and easier way to be able to edit a Template from a Page while I am at journey builder

Description

Not quite clear that it’s in the “store” toggle section. Also, would be great to access the template editor from the place where people add templates to the journey stages (journey toggle).

Element

Entry Point

User Story

As a merchant, I should be able to Copy the URL for an Entry Point

Description

The user should be able to copy the URL of an Entry Point element from the Entry Point sidebar

Element

Action Group

User Story

As a merchant, I can accidentally delete an action group without understanding the depth of action group or repercussions of deleting

Description

Delete confirmation when action group has 1 or more action inside it. Currently if an action group has a bunch of action you can just click delete and it's all destroyed. I think having a destroy confirmation may be better.

Element

Entry Point

User Story

As a merchant, I should be able to Copy the URL for an Entry Point

Description

The user should be able to copy the url of an Entry Point element from the Entry Point sidebar

Element

Top Bar

User Story

As a merchant, I have to navigate between Journey Builder and Template builder constantly which is difficult and exhausting

Description

The user should be able to copy the url of an Entry Point element from the Entry Point sidebar

Element

Canvas Controls

User Story

As a merchant, I am not able to discover how to add new elements

Description

Beta Merchant was not able to proceed to create a journey because they did not notice the Page adder(blue circle)

Element

Actions group

User Story

As a merchant, I find it difficult to use and/or position actions

Description

Do we necessarily have to connect pages or actions in a certain order? (in the journey builder)

#2 Template Builder Pain Points

Element

User Story

Description

Element

Pages

User Story

As a merchant, I find page types in Template Editor confusing

Description

He had built out an entire page and we then realized he had used the wrong template type. He had use a Sales Template but was just looking to collect information and wanted to have Lead Forms on the page.

As a merchant, I need flexibility to choose what happens after Form Post

Element

Sidebar

User Story

As a merchant, I find it difficult to understand which section I am editing on template builder and need an ability to select a section directly from preview

Description

  1. Template editor: Highlight the section on name hover

  2. Product Grid Blocks UI: User is unable to determine which product is which

  3. Update icons on Store/Add section Panel

  4. Select a section directly from the UI preview

  5. Store Panel - Settings suggestions

  6. Theme Settings: Request to highlight changes on doing any changes on theme settings

Element

Sidebar

User Story

As a merchant, I need easier way to edit the sections

Description

Template Editor: Basic / Advanced controls that you can toggle on the sidebar

Element

Topbar

User Story

As a merchant, I need "preview" option on the Template Editor

Description

Does anyone think adding “Preview” button to the top right corner would bring more comfort in edit mode too? This is applied template in the Journey. Easy access to Help Center would be good too

Element

Sidebar

User Story

As a merchant, I need ability to choose if a link opens in a new tab

Description

Template Editor: Ability to choose if a link opens in a new tab

Element

Sidebar

User Story

As a merchant, I need different sections/ ability to hide or show sections on desktop vs mobile

Description

  1. Control on Desktop view and Mobile view

  2. Merchant asked about if the logo list can instead turn into a carousel on mobile view

#3 Exploring and Wireframes

Among the various challenges encountered by our beta merchants, I'll address our focus on improving the sidebars within both the journey builder and template builder. Since a majority of interactions occur within these sidebars, we aimed to devise a more effective approach to tackle this issue. Following four workshops involving competitive audits and wireframing sessions, we established fundamental structures and layouts for both the journey and template builders. Unfortunately, I'm unable to attach the wireframes as they're currently archived. However, if you're interested, we could arrange a call where I can show you the outcomes from those workshops.

Design System.

#1 Building a Design System

After creating the wireframes, we identified approximately 58 components to construct for this project. These components needed to align with Caliper (Popup's Design System). However, we faced constraints due to the need to display a substantial amount of information within a limited space in both the journey builder and template builder.

[Store Editor Components and Documentation]

Final Designs.

#1 Journey Builder Layout

Unlike the previous design, in the updated version, the journey elements can now be added from the elements menu located on the left side. Each journey element placed in the canvas can then be configured within the right panel.

[Final Layout of Journey Builder]

#2 Template Builder Layout

In the previous design, the single panel was divided into two: the right and left panels. The left panel provided users access to various pages in their store, while the right panel facilitated customization of different sections within the template. Users could switch the Journey Builder from the narrow sidebar located on the far left of the interface.

[Final Layout of Template Builder]

#3 Userflow Handoff

Approximately 140 user flows were constructed for the redesign of the store editor, intended for handoff to the engineering team to initiate work on the second version. Unfortunately, I'm unable to present all the user flows due to the extensive nature of these flows, which have undergone numerous iterations impacting both the redesign and the design system. The sheer volume of user flows makes it impractical to cover each one in detail.

Takeaway.

Highlights

#1 Opportunities

Despite facing constraints and limitations in engineering resources, we managed to unearth various approaches and identify opportunities.

#2 User Insights

Leveraging user feedback from our selected merchants during beta testing was instrumental in identifying and understanding user pain points and motivations.

Lessons Learned

#1 Research

Identifying user pain points leads to precise and well-informed design decisions. It is your cheat sheet for a better UX

#2 Workshops

The product team's workshops greatly contributed to our comprehension of the platform's functionality. Consequently, this spared us from reinventing the wheel for specific userflows.

What I could have done better

#1 Usability Testing

Due to time constraints in delivering our designs promptly, we had limited time available for comprehensive testing, which could have significantly aided our design research.

#2 Communication

Having increased communication with the engineering team from the start could have averted multiple redesigns and clarified functionality requirements.

I'm looking forward to hearing from you.

Feel free to reach out if you want to collaborate with me, or simply have a chat.

Created by Uttkarsh © 2024

San Francisco

I'm looking forward to hearing from you.

Feel free to reach out if you want to collaborate with me, or simply have a chat.

Created by Uttkarsh © 2024

San Francisco