Online Store Funnel

Project Simplify


To enhance the existing online store purchase experience and address customer pain points, with the goal to increase digital sales %, transaction volume and decrease drop off rates. Through this project, the information architecture of the purchase funnel was revamped and the UI was relooked in order to improve current site performance to simplify the current user experience.


MY ROLE

I was the lead designer on this project; working with product owners to improve the information architecture, mapping out an enhanced customer journey and user flow while maintaining frequent feasibility checks with developers. I also ran an unmoderated A/B test to validate interaction crossroads, worked on the UI design to align with the design system - including documentation of UI states and components for development handoff.


Company: StarHub
Year: 2020
Skills: UX, UI, Project & Stakeholder Management




Research


PRODUCT DEEPDIVE

Identifying pain points from NPS, analysing activity map for current user behaviours, assessing Adobe Analytics for drop off rates per customer type.

I ran a workshop with stakeholders to better understand perspectives from product owners and CX team



Online Store Funnel
Online Store Funnel


Wireframing

Addressing all the different customer journeys and flows, covering for all scenarios and types of customers (recontract, existing new, new new)  

Validating the amendment process

Using mid-fidelity wireframes, an unmoderated A/B test was done to confirm user's behaviour to amend products in cart, or move backwards to edit the order. This was to aid and validate different interactions in order to assess which fared better in terms of usability.

“At the end of this, I should be able to to identify user behaviour of customers around their need to amend a mobile device+plan in the sales funnel"
Online Store Funnel
TEST FINDINGS
  • Test A fared better as users didn’t have to go back and forth in nested pages.
  • Both test justified the use of the order summary card
  • Majority of users interact with the back button to move back a step
  • An edit icon fared better in terms of visibility as compared to a text link.
  • Low percentage of users navigate back from the progress bars - more in Test B


Design Process

 
KEY OBJECTIVES

Leveraging on the design system, I had to design for an optimized mobile experience with the consideration of accessibility. The key objective was to lead customers through the purchase journey with no road blocks or confusion.

Online Store Funnel

CHALLENGES

 
  • Need to maintain consistency with other LOBs (projects happening concurrently) - A template had to be created through detailed assesment of all permutations, looking ahead with foresight to prevent downstream design challenges
  • Tech constraints surfaced midway through sprints - rethinking logic while still considering product construct
 
Online Store Funnel

Project handoff

After stakeholder walkthrough of the high fidelity E2E flows, the project was delivered to the development team via Zeplin, and this included an in-depth documentation for key components, states & specs.


As this project was delivered in Agile for development, sprint reviews included development updates, UI checks and UAT assessments.


Outcomes

Decrease drop off rates

  • Optimizing funnel journey with clear steps
  • Introducing dynamic steps in the progress bar to show what is relevant to customers
  • Improving content placement by removing unnecessary steps

Online Store Funnel

Eliminate the need for customers to repeat steps or start over

   
  • Enhancing the progress bar interactivity, allowing customers to return to previous steps
  • Allowing customers to edit their order and return to saved data in steps of the funnel
Online Store Funnel

Improved pricing display

   


  • Remaining transparent with charges
  • Introducing visual hierarchy with the use of colour and typography so customers can better identify chargeable figures vs non chargeable figures
    Online Store Funnel

    Provide better usability

     
     


    • Creating a seamless mobile optimized experience
    • Leveraging the design system components
    • Improving user interaction 
    Online Store Funnel

    Key takeaways

    • Always important to have foresight on how a project can have downstream impacts on other products
    • Need to have regular walkthroughs with developers to align on approach and check feasibility since upstream is waterfall but downstream production is Agile

      Opportunity areas

      • Display gratification and value saved in discounts & promotions
      • Potential to improve document upload features by implementing auto-fill sync up