Building a website for an online design school

An educational case study in user-centered web design

UX researcher | UX/UI designer

2024

This project was my first case study, completed during a bootcamp focused on learning the fundamentals of design. 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—from research and brainstorming to wireframes and final designs. While the concept of the online design school was provided, I learned to apply different stages of design thinking to the project, gaining 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 new to the field, saw the course as an opportunity 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 crucial 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 essential 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 essential—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. It evokes a sense of trust, making it a great choice for a primary color. 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 served as a bridge between my research insights and the envisioned final product, helping to refine structure and usability before moving into high-fidelity design.

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:

  • What is the cancellation policy?

  • Is there a limit on attending multiple courses at once?

  • How can you report a problem?

  • How can you receive advice on courses?

The test confirmed that many of the initial concerns raised by users were successfully addressed. Users particularly 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 due to unclear navigation labels, and others found the concept of previous graduates as advisors somewhat 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, ensuring a smoother user experience. The testing phase was a crucial 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.