Building a website for an online design school
An educational case study in user-centered web design
UX researcher | UX/UI designer
2024
I worked on this project during a bootcamp. The product I worked on was an online school offering courses in UX and UI design.
As this project was a learning experience for me, I handled every stage of the process alone. While the concept of the online design school was provided, I learned to apply different stages of design thinking to the project and gained a deeper understanding of how design can serve as a problem-solving tool.
Data Gathering and Research
The early stages of research began with user interviews. I spoke with 10 individuals, including those searching for schools to learn design from scratch and designers looking for advanced courses. The goal was to understand what they prioritize when searching for online courses, the challenges they face, and the factors that influence their decision to choose a program.
User personas
Empathy map created based on notes from user interviews.
Understanding the Problems and Defining Goals
After understanding and empathizing with the target users, I defined the project's goals and identified the primary user problems to address. The website's goal was to provide clear and essential information that students look for, including details about price, course length, learning outcomes, and instructors.
Key insights revealed that users value clarity in information and are highly concerned about the lack of human interaction in online courses. Offering opportunities for communication before, during, and after the course was identified as a critical user need. Additionally, payment security and clarity in the cancellation and refund policies emerged as a significant concern.
In addition to learning and obtaining a certificate, students expressed a strong desire to build community. Making meaningful connections in an online course can be challenging. Many students, particularly those who were new to the field, saw these courses as opportunities to meet peers and grow their network.
Competitive Audit
I conducted a competitive analysis on four different online schools in two stages: one based on the heuristic evaluation system, and the other based on information architecture principles.
Key Takeaways:
Successful websites are built on simple and straightforward structures that make it easy for users to navigate and find what they need. It's important to present clear value propositions that immediately show users why the course is worth their time and investment. From this analysis, the most important values include certificates, self-paced learning, job preparation, and affordable pricing with financial plans. Courses should be introduced quickly and clearly through simple cards that display all the necessary information at a glance.
Encouraging communication and engagement is also key, with features that make it easy for users to ask questions and connect. Effective platforms offer multimedia education, combining videos, text, images, and various types of tests and questions to create a richer learning experience. Finally, fostering student interaction is also important—whether through interactive assignments or systems that encourage peer support as part of the learning process.
Defining the Brand
I started by brainstorming and prioritizing different brand attributes, which gave me a solid foundation for creating a mission statement. By defining these characteristics, I was able to narrow down the design elements and strategies, making the whole process feel more focused and manageable.
Design System
Desktop grid
Mobile grid
Typography: I have used the font Inter because of its clean and modern design and its wide range of weights. This font is a good option for various typographic needs.
Color: #8899CC is a calm and peaceful color. I chose it because it evokes a sense of trust. However, now, I think I should have probably picked a more vibrant color, as in some cases, it seems too muted and not so encouraging or energetic.
Wireframes
After defining the smaller elements and making key visual and functional decisions to address the problems identified during my research, I began working on low-fidelity prototypes. This step worked as a bridge between my research insights and the envisioned final product.
Key Features and Elements
User Account and Profile Management
User registration/login (including options for social logins).
Personalized dashboards for learners and instructors.
Progress tracking and saved content.
Community Features
Student forums or social groups.
Peer reviews.
Comments and rating systems for courses.
Secure Payment Options
Secure checkout for paid courses.
Multiple payment methods (credit card, PayPal, etc.).
Communication and Support
consulting sessions or messaging between students and instructors.
FAQ and support section.
Announcements and notifications for updates.
Usability Testing: User Feedback and Future Improvements
After preparing the final design, I conducted usability testing with five users aged 20 to 40. They were asked to complete tasks such as purchasing a subscription plan, finding a student who had previously taken a specific course and contacting them, locating a course’s table of contents and modules, and answering common questions like:
Where would you look for information about the cancellation policy?
Is there a limit on attending multiple courses at once?
Where would you go to report a problem?
How do you think you can receive advice on courses?
The test confirmed that many of the initial concerns raised by users were successfully addressed. Users appreciated the multiple ways to communicate with advisors, instructors, and peers, and they found the course information comprehensive and well-structured. However, testing also revealed areas that need improvement. Some users struggled to locate the course modules because of unclear navigation labels, and others found the concept of previous graduates as advisors confusing. This aspect of the system needs to be reconsidered, and adjustments will be made to enhance clarity and usability.
These insights will guide the next iteration of the design. The testing phase was an important step in identifying usability challenges, and the next stage of development will focus on refining the interface and addressing the issues that could disrupt user flow. By incorporating user feedback, the product will continue to evolve into a more intuitive and user-friendly platform.