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]
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
Sidebar: The sidebar is where all editing occurs
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
Canvas controls : Allow merchants to manage the pan and zoom functions, ensuring that the constructed journey remains visible within the confines of the screen.
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]
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
Sidebar: The sidebar is where all navigation and editing occurs.
Template Settings: The template settings allow the merchant edit a few settings for the template.
Theme Settings : Opens Theme Settings things where the merchant can configure styles and design related settings.
Template Preview: Where the merchant can preview everything in real time.
#3 Previous Defined UX Problems
Journey Builder
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
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
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.
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
Page
As a merchant, I need to be able to see the page previews in Journey Builder
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.
Page
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
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
Page
As a merchant, I find that the Page Types in Template Editor and Journey Builder are confusing
The merchant is not able to add desired sections if they select a wrong page type
Page
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
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).
Entry Point
As a merchant, I should be able to Copy the URL for an Entry Point
The user should be able to copy the URL of an Entry Point element from the Entry Point sidebar
Action Group
As a merchant, I can accidentally delete an action group without understanding the depth of action group or repercussions of deleting
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.
Entry Point
As a merchant, I should be able to Copy the URL for an Entry Point
The user should be able to copy the url of an Entry Point element from the Entry Point sidebar
Top Bar
As a merchant, I have to navigate between Journey Builder and Template builder constantly which is difficult and exhausting
The user should be able to copy the url of an Entry Point element from the Entry Point sidebar
Canvas Controls
As a merchant, I am not able to discover how to add new elements
Beta Merchant was not able to proceed to create a journey because they did not notice the Page adder(blue circle)
Actions group
As a merchant, I find it difficult to use and/or position actions
Do we necessarily have to connect pages or actions in a certain order? (in the journey builder)
#2 Template Builder Pain Points
Pages
As a merchant, I find page types in Template Editor confusing
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
Sidebar
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
Template editor: Highlight the section on name hover
Product Grid Blocks UI: User is unable to determine which product is which
Update icons on Store/Add section Panel
Select a section directly from the UI preview
Store Panel - Settings suggestions
Theme Settings: Request to highlight changes on doing any changes on theme settings
Sidebar
As a merchant, I need easier way to edit the sections
Template Editor: Basic / Advanced controls that you can toggle on the sidebar
Topbar
As a merchant, I need "preview" option on the Template Editor
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
Sidebar
As a merchant, I need ability to choose if a link opens in a new tab
Template Editor: Ability to choose if a link opens in a new tab
Sidebar
As a merchant, I need different sections/ ability to hide or show sections on desktop vs mobile
Control on Desktop view and Mobile view
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.
