Work

About

Linkedin

Bold Commerce
2023

VIEW

Revolutionizing the Buy-Now Experience

My Role

Product Designer

Project Manager

collaboration

Product Team

Engineering Team

Marketing Team

Tools

Figma

Storybook

Read Time

5 Mins

image 1
image 2
image 3
image 4
image 5
image 6
image 1
image 2
image 3
image 4
image 5
image 6

PROJECT
BACKGROUND

bath_private
In my role within the marketing team at Bold Commerce, a company that transitioned from serving SMBs on Shopify to providing enterprise-level custom checkout solutions, I collaborating across departments to enhance our offerings, especially during the rapid growth spurred by the pandemic.
Challenge
Our team encountered a significant challenge with the existing Buy-Now demo, which was created four years ago and was in need of a makeover.
challengeinterface1
challengeinterface2
BuyNowZhenlong2

PROJECT
INITIATION

projectinitiationicon
In late-2022, I was entrusted with the task of revamping the Buy-Now checkout experience demo and creating demo stores to better showcase our products. Given our team's specialization in creating custom checkout solutions, the project had an open-ended scope, allowing us to either delve deeply into comprehensive modifications or implement more superficial updates, based on the needs identified. To effectively address issues with the current product, I specifically designed the workflow:
0% progress100% complete
Interviews
Scoping
Benchmark
Design
Testing
Result
Interviews
Workflow complete — ready to ship
buynow13

IIllaauunncchheeddtthheepprroojjeeccttbbyypprrooffiilliinngguusseerrssaannddiinntteerrvviieewwiinnggBBoolldd''sstteeaamm,,eenntteerrpprriisseecclliieennttss,,aannddeenndd--uusseerrss,,uussiinnggUUXXrreesseeaarrcchhttooiiddeennttiiffyytthhrreeeeuunniiqquueeppeerrssoonnaass..WWeeaasssseesssseeddBBuuyy--NNoowwpprreeffeerreenncceess,,tthheeccuurrrreennttcchheecckkoouutt''sseeffffeeccttiivveenneessss,,aannddtteeaammrreessoouurrcceessttooggaauuggeetthheeoovveerrhhaauull''ssssccooppee..IItthheennccrreeaatteedduusseerrjjoouurrnneeyymmaappss,,hhiigghhlliigghhttiinnggtthheeeemmoottiioonnaalljjoouurrnneeyyaannddppuurrcchhaassiinnggppaatthh,,iinntteeggrraattiinnggaalllliinnssiigghhttssttooiimmpprroovveetthheeuusseerreexxppeerriieennccee..

Drag Me
Enterprise Clients
  • Reusable Buy Now Checkout system.
  • Configurable flows for different products and user journeys.
  • Modular components that support A/B testing.
Engineering Team
  • Shared Storybook component set for development.
  • Consistent implementation of payment and checkout logic.
  • Modular design system adaptable to varied business needs.
Marketing Teams
  • Rapid prototyping for client demos.
  • Modular flows that map to client workflows.
  • Figma library for reusable, customizable marketing layouts.
Pain Points
Our user testing and interviews revealed several pain points with the existing Buy-Now experience:
oldbuynow2

Not Responsive

Certain parts of the user interface were hidden during responsive testing, necessitating excessive scrolling.

Viewport Utilization

Poor space utilization resulted in extended checkout times, contradicting the essence of a Buy-Now feature.

Learning Curve

The information structure required a steep learning curve, leading to longer decision-making times.

DDuurriinnggtthheeiinntteerrvviieewwsseessssiioonnss,,wweerreeaacchheeddaaccoonnsseennssuussoonntthheerreessoouurrcceesseeaacchhtteeaammccoouullddccoonnttrriibbuutteettooddeevveellooppiinnggtthheenneewwBBuuyy--NNoowweexxppeerriieennccee..

Drag Me
Engineering Team
The technology behind the Buy-Now experience would remain the same, building upon existing elements while maintaining security-related constraints.
Product Team
They would participate in user testing, aiding in shaping the product, and providing the previous Figma file for design support.
Marketing Teams
They requested that the Buy-Now experience demo align with the new branding. Brand guidelines will be provided to assist in the design process.

MARKET
RESEARCH

biotech
We conducted market research, examining checkout experiences offered by competitors:
Buy Now
Bolt Checkout:Utilized API requests to autofill the checkout process, creating a 'one-click' product within the standard checkout.
Buy Now
Amazon Buy-Now:Differentiated standard and Buy-Now checkout experiences, focusing on efficiency for users with pre-set accounts.
Our primary goal was to create a modular Buy-Now experience that simplifies the checkout process while offering customizable components to adapt to diverse business needs. Keywords such as 'New Brand,' 'Modular,' 'Streamline,' 'User-friendly,' and 'Adaptation' guided our design process.

DRAFTING
USER FLOW

buynow13
architecture
My design challenge involved prioritize essential information during checkout to create a fast and accurate experience. My first approach was to implement a 'Bento Box Layout', making the Buy-Now experience modular and adaptable. I layered different pieces of information across multiple pages within a pop-up modal, simplifying each screen to ensure responsiveness and user-friendliness. To achieve consistency, I created similar information entry experiences across different modules, minimizing the learning curve.

Design
Improvement

architecture
To improve the Buy-Now interface, feedback from the Product and Engineering Teams was actioned, focusing on user experience and security. The Product Team suggested streamlining user flows, enhancing icon clarity, and optimizing text and element sizes. The Engineering Team advocated for integrating popular payment options like Apple Pay and PayPal and stressed the importance of robust security measures. These recommendations led to a redesigned payment module that simplifies the process for returning users and updates the UI with new branding elements, ensuring a secure and efficient checkout experience.
BuyNowZhenlong3

Scope Narrowing

Focused on returning or newly registered customers with pre-set information carried over from the original site registration.

Information Presentation

Default shipping and payment details surface immediately, reducing friction and hesitation during checkout.

Branding Integration

Updated the demo UI with Bold branding to strengthen visual identity while offering an off-the-shelf framework for customers.

Agentic Coding Engine

Internal R&D

Agentic Coding Engine

Checkout Without Limit

Bold Commerce

Checkout Without Limit