Seeds Online Course Platform is an online learning platform for art and culture enthusiasts. However, the growing diversity of courses complicates the purchase experience, leading to a high decision time. Since August 2023, I've been leading a redesign project focused on learner needs to simplify the course purchase experience and create a smoother learning journey.
Solution Quick Peek
By streamlining course discovery and purchase journeys, the first phase of the new design has led to a remarkable 39.2% increase in page visits and a 6.12% rise in active user.
Seeds Education, an expanding online course platform, is facing challenges as it offers more diverse courses and attracts different learners. Their existing system can not handle the growing complexity of the sales model and learner demands, requiring significant customer service intervention.
This redesign had 2 key goals: upgrading the platform's functionality to support the future business strategy and aligning it with the new brand identity. Furthermore, the redesign aimed to create a more engaging and user-friendly platform that would attract new learners.
My Role
On this freelance project, I wore multiple hats in the absence of a dedicated product manager. I went beyond creating a visually appealing interface that aligned with the new brand guidelines. I engaged with stakeholders to understand their needs, ensuring my design decisions balanced user goals and technical feasibility.
Furthermore, I stepped into the product manager role by defining the features spec and ensuring they aligned with the overall strategy. Finally, I acted as a QA, checking the deliverables against the design documentation.
Understand Stakeholders’ requirements
At the beginning of the project, stakeholder requirements were initially unclear, with limited details on functionalities. Additionally, there were no existing specifications documents to reference. I facilitated interviews with key stakeholders to address this, helping me understand their goals and the business model.
Key insights from the interviews:
The existing, course sales pages weren't flexible enough to handle the company's new course plans, creating a workload for customer support when learners needed upsell.
They cared about the new brand identity, sticking to the new visual guidelines was super important.
Regular meetings to discuss requirements
Uncover user pain points
Before jumping into design, I conducted a product audit through usability heuristics to identify key pain points.
Here are the key pain points identified:
Inconsistent purchase plan design: Learners can't easily compare and choose purchase plans because the design is inconsistent. This slows down their decision-making and might lead to missed sales.
Limited Upgrade Options: Learners have to contact customer support to upgrade their plan, which is inconvenient and time-consuming. This can lead to frustration and lost sales opportunities.
Unclear Brand Identity: The current UI design doesn't reflect Seeds Education's new brand identity. This creates confusion for learners about the learning experience they can expect.
The old course sale page, each course plan is different
Design Goals
Leveraging pain points and stakeholder requirements, I defined clear project goals that not only address user needs but also align with our overall business objectives. Here's what we aim to achieve:
Effortless Course Discovery
Build a consistent and scalable platforms that fosters seamless navigation, allowing learners to effortlessly find the courses they're interested in.
Frictionless Upgrades & Purchases
Integrate flexible upgrade options in the purchase flow. This empowers learners to tailor their journey and unlock new skills.
Brand Refresh
Refresh the platform's UI to reflect Seeds Education's modern brand identity.
More Flexible Upgrade Flow
Previously, upgrading courses required contacting customer service via Facebook, creating a time-consuming process for learners.To empower seamless plan upsell, user flow has been analyzed and identified 3 key touch points: My Courses page, Course playback page, and Sales Page.
The new purchase flow integrates upgrade options within these frequently visited pages, allowing learners to upgrade whenever they encounter a course of interest effortlessly.
Learning from Market Research
Before design exploration, I did market research to analyze purchase flows and upselling strategies employed by other learning platforms
Hahow
Udemy
Hahow
Countdown timer create a sense of urgency, potentially leading to faster purchases.
Clearer presentation of bundle course details help learners understand effortlessly.
"Save more, buy more" messaging in the cart encourage users to purchase more courses
Udemy
Highlighting a generous refund policy can address user hesitancy and lead to more purchases.
Consistent use of icons and clear copy improves product exploration, making it easier for users to find what they need.
Design Explorations
Leveraging insights from competitor designs, I dove into UI explorations for course plans. A key element across the new purchase flow was the course plan card, as it would be displayed on multiple pages. Therefore, ensuring consistent and scalable design for these cards was crucial.
I explored three options to enhance scannability:
Text-based cards only (selected)
Text-based cards with tag
Enriched card with images
Build a Consistent Design Language
In an early project stage, I partnered with a senior designer to develop a design system. The new UI components are adapted based on the new branding identity guideline.
Some examples of the components we delivered in the pattern library
The new design style offers light and dark mode options to complement the courses' visual tone. A key focus during development was ensuring seamless theme switching. To achieve this, we created corresponding color palettes for both light and dark themes, allowing developers to switch themes by simply adjusting token values.
To deliver a consistent user experience, I focused on building the platform with reusable components. This approach allowed for the rapid development of key pages while ensuring a unified visual language throughout the platform.
Essential pages like the homepage, course sale page, and course watching page all leveraged these components, creating a seamless learning journey for users regardless of the course they choose.
Final Design
Effortless Course Browsing
By implementing a consistent and scalable visual layout, the new platform provides a seamless course browsing experience for learners to browse and find the courses that interest them
Personalized Learning
Empowers learners to upgrade their course plans anytime through our intuitive upgrade features. This allows them to tailor their learning journey to their specific needs
New Brand Identity
The new UI aligns with the new modern brand identity to create a cohesive brand experience that can be easily extended to new features and platforms in the future.
Outcome
The redesign was successfully released within 6 months and received positive feedback from learners. Learners appreciated the "intuitive navigation" and "clearer course information," making it easier to find the perfect course. This resulted in a significant boost in new learner engagement after the launch.
Engineering Collaboration
Beyond design, I played a crucial role in facilitating cross-functional collaboration during the Seeds Online Course Platform redesign. In the beginning, developers did not trust designers due to past unsuccessful experiences.
To bridge this gap and foster effective collaboration, I implemented DesignOps. This included creating detailed design handoff documentation and proposing a Design QA process. This approach ensured clear communication and delivered a final product that matched the design.
