Ecommerce checkout
E-commerce Checkout for Piyush Enterprises Singapore
Led design of B2C web and mobile checkout for a gourmet food start-up.
Industries: Ecommerce, Gourmet Food
Platforms: Web
Competencies: Project management, research, data analysis, UX and UI design, testing.
Deliverables: Project proposal, research analysis, presentations, sketches, wireframes, prototypes.
Brief
As an early-stage start up, the company needed a sound product aligning to their goals and brand image, ensuring a seamless and efficient online purchasing experience that enhances customer satisfaction, drives conversions, and establishes a competitive edge in the digital marketplace.
Challenges:
Limited resources for user research
Continually validating the design's direction with leadership.
Balancing conflicting customer and business needs.
Personas:
The target users were new to this ecommerce site. I collaborated with the team's data analyst to research and create four different personas. For this project, I focused on the top two who represented the majority of users: women over 30, health-conscious, who valued gourmet offerings for self-use and gifting.
Persona 1: Jo
Age 50
Lives in own HDB
Manager
Married
College or high school education
Median household income $95k
Persona 2: Jill
Age 30
Lives in rented Private condominium
Working
Married
University/College education
Median household income $120k
Process:
I started this project by reviewing all the existing research so that I could connect every design choice to a real problem. This informed every subsequent step from wireframing to development and ensured the project’s success.
1)
I integrated research from multiple sources (including competitive evaluation and user testing which I conducted myself) to define and prioritize every problem, then documented requirements for use in design process and to gain necessary approvals.
Sample of key-points to be addressed:
• Simplified User Authentication:
Address the issue of overlooked sign-in fields by implementing a streamlined and user-friendly authentication process, minimizing the chances of users missing essential information during account creation or login.
• Integrated Product Information Entry:
Resolve the problem of disconnected product information entry by ensuring a cohesive and integrated interface for users to input and review product details. This helps in creating a seamless and intuitive experience, reducing user frustration.
• Optimized Checkout Process:
Alleviate the overwhelming final step by optimizing the checkout process, breaking it down into manageable and clearly defined steps. This ensures a more straightforward progression through the final stages of the purchase journey.
• Transparent Order Review:
Enhancing transparency in the order review process before order placement. Clearly present a summary of selected items, quantities, and pricing before users confirm their order, reducing the likelihood of errors.
• Clear Pricing Communication:
Mitigate the problem of surprise total order cost by providing clear and transparent communication of pricing throughout the user journey. Display all costs associated with the order, including delivery charges, taxes and fees, prominently to avoid any unexpected surprises for the users.
2)
I started with sketches of the key sections to keep up the flow of creative ideas. Some of the challenging parts included
Unified product information page
Order summary with total cost with shipping and promo code
I started building the wireframes with the working designs for pages. Other important design decisions made during the process included:
Made sign-in fields more prominent
Eliminated repeat information entry
Subdued distracting buttons
Wrote clear error messages
3)
I worked closely with a junior designer in expanding my wireframes to create an interactive prototype for user testing. Before finalizing the desktop prototype, a mobile version was prototyped to ensure consistency and uncover any problems. A few adjustments were made to keep them consistent and usable. The goal of our user testing was to identify any new checkout flow issues and use this to finalize design. Five unmoderated tests were run on the UserTesting.com platform. Results showed that target personas were able to easily complete the new checkout process. This helped tremendously to keep the project alive and on track.
I served as the design lead, managed this project. Collaborating closely with front-end developers, I communicated design concepts, addressed queries, and provided prioritized feedback. I proactively identified and resolved roadblocks, adjusted designs to fit technical constraints, and documented solutions for future product planning. Weekly meetings with marketing and business leaders allowed me to share progress, gain valuable insights into business goals, and prioritize feature development with the team.
Following the rollout, we closely tracked customer traffic, patterns, and conversions. Identified bugs led to design adjustments, and data analysis helped uncover potential issues. Regular team reviews prioritized fixes and ensured a closed feedback loop. Monitoring the live site provided crucial insights for quick problem resolution. This information played a critical role in validating the design and instilling confidence among leadership.
