✺ ShopOnline by OnDemand
An educational e-commerce platform
for OnDemand students
"Shop Online by OnDemand" is an educational e-commerce platform aimed at delivering a user-friendly website for students and parents. The primary goal is to facilitate easy course discovery and purchase processes.
In 2019, our team was tasked with redesigning the website to improve its user experience for students and parents. The following year, we were assigned the task of updating the website's design to showcase a new product line, as per our client's requirement.
Client
OnDemand
Duration
2019 – 2020
Tools
Figma, Photoshop, Illustrator, Asana, Google Sheets
Methods
Research, Product Design, Visual Design, Design System, User Testing
Key results and Impacts
My Role
Team
Chaiyawut Lertvichaivoravit (Lead Product Manager)
Nantanat Thamthonsiri (UX Designer)
Sasarak Sutthisukon (Project Manager)
Challenge
The website's user interfaces were cluttered with information, making it difficult to browse courses and process payments. This overwhelming design translated to an ineffective mobile experience, resulting in high bounce rates.
Process and Solution
Define the problem
Our process began with Auditing the current experience to understand the challenges associated with the current flow and design.
Understand the user
We then undertook user research with stakeholders. This included interviewing them to comprehend the issues and business goals. Given that OnDemand is a tutoring institution with numerous locations throughout Thailand, we decided to interview branch staff and the call center team to gain insight into current flows, common questions, and issues. The goal was to develop a design for ShopOnline that could assist OnDemand staff in providing a seamless course purchasing experience.
We proceeded with user interviews to explore:
We assigned tasks to participants and observed their interaction with the current website. The testing included six students (three high school and three middle school students) and three parents. All had made purchases at the branch, and only a few had visited or made purchases via ShopOnline.
User personas and user journey mapping were developed based on these interactions.
Drag and Zoom 👀 to see more details
Insights and Pain-points
The research indicated that parents often rely on peer consultations while choosing courses or schools. Some students, on the other hand, already have clear preferences regarding subjects. Physical branch purchases are preferred for their provision of interactive recommendations and confidence in purchases.
However, we did identify several pain-points such as:
Opportunity
These issues led us to explore opportunities for improvement such as better content presentation, inclusion of evaluation videos, display of popular courses, and seasonal promotions.
Solution Brainstorming
Armed with an understanding of the problems and users, we brainstormed possible solutions. These included:
Design and Prototype
After prioritizing these solutions, we sketched out the flow, created a sitemap, designed, and prototyped the new version of the website. User testing was then conducted with two tasks assigned per user.
Screen Flow Sketching
Sitemap
Drag and Zoom 👀 to see more details
Final Design
Design System
Prototype we used for User Testing round 2
User Testing
We got positive feedback included improved usability, more readable and modern text, relevant promotions at checkout, and the appreciated inclusion of course example videos. Users also found the basket icon and discount more visible.
On the other hand, a few users missed noticing the new filters, and one parent found the interface confusing. Suggestions for future improvements included a profile page with purchase history and clearer course content descriptions.
Next Steps and Handoff
These insights led us to our next steps:
Interview branch employees to understand course recommendation methods.
Introduce pages for Payment, Sign Up/Login, Profile, and Purchase History.
Refine the prototype based on the second user test feedback.
Interview parents and students from a new target audience - those unfamiliar with OnDemand but interested in tutor courses.
The final designs were then documented and handed off for development.
Learnings
Even after the design was handed off, there were plans for further user testing and improvements, showing that the product design process is an ongoing cycle of learning, designing, testing, and refining.
Proper documentation was vital for successful handoffs. It helps the development team understand the design decisions and ensures that the design intent is realized during development.
