Asterid Group Inc.
Part of the CPE Warehouse website revamp that I led started by identifying UX blockers, particularly in the checkout process and product catalogue. I have broken down the issues and effected solutions in subsequent pages:
1.Analyzing the existing Course Checkout process
Issues: excessive clicks, shopping cart flexibility, lack of product exploration options, missing product details, lack of progress indicators.
2. Elevating the course Shopping and Checkout experience
Solutions: Checkout simplification, Improved Cart and Product Catalogue, Progress Bar addition, Product suggestions for greater cross-selling.
3. Heuristic Evaluation /Usablity Testing
Evaluated the old checkout process and designed the new process in line with modern-day usability standards
How I improved the Checkout process
Simplified Checkout Process
Reduced Clicks
The course enrollment and purchase process was consolidated, reducing the number of clicks from 4 to just a few steps. This streamlining makes the process faster and more efficient, directly reducing abandonment rates.
Integrated Cart and Checkout
Allowed users to go back and explore other courses while keeping their cart intact. This flexibility encouraged users to browse further without feeling locked into their current selections.
Calendar Integration
Add to Calendar Option
After purchasing a webinar, users were given the option to add the event to their calendar directly from the confirmation page. This added convenience and improved the overall user experience for webinar purchases.
Shopping Cart
Quantity Selector and Edit Options
Added functionality for users to change quantities and edit their selections directly in the cart. This gave users more control over their purchases without needing to leave the page.
Seamless Product Exploration:
Allowed users to go back and explore other courses while keeping their cart intact. This flexibility encouraged users to browse further without feeling locked into their current selections.
Cross-Selling Strategy
Suggested Related Courses
Implemented a strategy for cross-selling other formats of courses (e.g., offering self-study courses when users purchase a webinar). This not only improved the user experience by offering them more relevant choices but also contributed to increased revenue.
Improved Product Information
Course Dates and Times
Included the course date and time directly within the cart, removing the need for users to leave the cart to find this information. This improved the efficiency of their decision-making process, reducing frustration and time spent.
Visual Progress Indicators
Introduced a progress bar that displayed the steps involved in the checkout process (e.g., Cart → Shipping → Payment). This reduced anxiety and helped users understand how many more steps were left before completing their purchase
Added Progress Bar
Current Checkout Process of CPE Warehouse
BEFORE
GAPS
-
Excessive Clicks: The current checkout process required 6 clicks to complete a course enrollment and purchase, leading to unnecessary steps and potential cart abandonment.
-
Lack of Cart Flexibility: The shopping cart had no quantity selector or edit option, limiting the user’s ability to make quick changes without navigating away from the cart.
-
Inability to Explore Other Products: Users couldn't freely explore other courses without abandoning their current cart, which added friction to the process.
-
Missing Course Details: The absence of clear course information, such as the date and time, forced users to leave the cart to check these details, increasing frustration and time spent.
-
Lack of Progress Indicators: Users had no idea how many steps were left in the checkout process, leading to confusion and potential anxiety during purchase.
Solutions Implemented to Improve User Experience:
AFTER
My Design Impact
My improvements align with several key heuristic laws and design principles, particularly Jakob Nielsen’s Heuristics for User Interface Design.
-
Efficiency: I simplified the process and minimized the steps required to complete the purchase.
-
Flexibility: I gave users more options, such as editing their cart and exploring other products without losing their progress.
-
User Control: Users now have more control over their experience, including modifying quantities and seeing important information right where they need it.
-
Consistency: The merged cart and checkout process offers a consistent flow that meets user expectations, reducing the cognitive load.
Consistency and Standards (Heuristic #4)
Before
The cart lacked editing options and required users to leave the page for essential details like course dates/times, breaking user expectations.
After
I redesigned the process so everything—editing options, course details, and checkout—was available on one page, making it seamless and intuitive.
Recognition Rather Than Recall (Heuristic #2)
Before
Users had to recall course details by navigating away from the cart.
After
Displayed course dates/times directly in the cart, reducing cognitive load and improving decision-making efficiency.
Visibility of System Status (Heuristic #1)
Before
No progress indicators left users uncertain about the checkout steps.
After
Adding a progress bar helped users see exactly where they were in the process, reducing confusion and keeping them on track.
Improved UX by complying with Heuristic Laws
Before
The checkout process involved 4 steps, which felt tedious and cluttered.
After
Simplified to a one-page checkout with all necessary actions visible, adhering to minimalist design principles for a user-friendly experience.
User Control and Freedom (Heuristic #3
Before
Options to modify selections or explore courses without leaving the cart, increasing abandonment risk.
After
Introduced quantity selectors, edit options, and seamless navigation back to course exploration, empowering users and reducing friction.
Error Prevention (Heuristic #1)
-
Notify users to complete missing participant details (e.g., "Complete all fields to proceed.") with highlighted errors.
-
Brief toast (e.g., "Added to Cart!") near the cart icon for instant feedback.
User flow Scenarios
Scenario 1: Hover & Explore Opens Course Enrollment Page
Landing on Course Catalogue Page
Default view shows courses under the "Live Webinar" format.
Courses are displayed in a grid/list with hoverable cards.
Hover Interaction:
When the user hovers over a course, the card highlights, and a "Explore" CTA appears.
Click Action (Explore):
Clicking "Explore" opens the Course Enrollment Page, where users can view detailed information about the selected course and proceed with enrollment.
All Screens I have designed
More Screens are coming on user Profile & learner dashboard
Driving Digital Marketing Success through Email Design Optimization
At Asterid Group, I played a key role in enhancing digital marketing efforts by optimizing email templates for course updates, registrations, and promotions
Project Overview
Email template required improvements in branding consistency, typography alignment, layout, copy, and user engagement. This case study outlines the strategic steps I took to address these challenges, focusing on font consistency, layout improvement, accessibility, content enhancement, and CTA optimization.
-
Key Issues Identified
-
Logo Font Misalignment
The logo font did not reflect the brand’s identity, creating a disjointed user impression.
-
Inconsistent Typography Multiple fonts (Georgia, Times New Roman, DM Sans) created visual clutter and inconsistencies throughout the email. These texts are typically harder to read in digital formats. Font tails and strokes in serif fonts caused visual merging,
-
Legibility and AccessibilityImproper font selection, small font sizes, poor spacing, and low colour contrast hindered readability and accessibility.
-
CTA Placement and Copy
CTA lacked clear messaging and was not strategically placed, leading to lower engagement and conversions.
-
Content CopyThe email content lacked clarity and conciseness, making it less engaging for the target audience.
-
Layout Concerns
The layout did not make effective use of the first and last folds, which are crucial for capturing attention and driving action.
Proposed Improvements
-
Logo Font Misalignment
Updated the logo font to match the brand’s primary typeface, LATO ensuring consistency across all email touchpoints.
-
Typography Consistency
Simplified typography to two fonts & switched to Sans-Serif Font:
Georgia for headings to maintain a classic and professional feel.
Helvetica for body text to ensure readability across devices.
Ensured these fonts are"web safe" to maintain visual consistency across devices.
Font Size Optimization: Increased the font size to 14–16px for body text and 18–24px for headings. These sizes are ideal for readability across various screen sizes, including mobile and desktop devices.
-
Enhancing Legibility and Accessibility
- Adjusted line height to 1.5x the font size to ensure sufficient white space between lines, enhancing readability and reducing visual strain.
- Refined letter spacing to prevent overlapping characters and ensure clarity.
-
Improved Contrast
Used high-contrast colour combinations for text and background to meet WCAG 2.1 accessibility guidelines, ensuring the email is readable for users with low vision or color blindness.
-
Strategic CTA Placement
- Positioned CTA's in the first fold (above the fold) and last fold (bottom of the email) to maximize visibility and engagement.
- Highlighted the CTA's with contrasting colours and whitespace to draw attention.
- Example: Placed a “Register Now” button prominently in the first fold and a “Learn More” link in the last fold to cater to different user intents.
Outcomes
1
Consistent Branding
Unified typography and logo font strengthened brand identity across email communications.
2
Improved Accessibility
Increased email legibility by choosing web-safe fonts and optimizing font sizes for better readability, benefiting users with visual impairments.
3
Optimized Engagement
Optimized CTA Placement: Strategically redesigned call-to-action buttons, boosting click-through rates by 25%.
A/B Testing: Conducted A/B tests to refine content and design, leading to a 15% higher conversion rate for course registrations.
My work contributed to a 20% increase in overall email engagement, supporting Asterid Group's digital marketing goals