Building a website for an online design school
An educational case study in user-centered web design
UX researcher | UX/UI designer
2024
Introduction
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.
A screenshot of the competitive audit and notes on comparable design solutions.
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.
For the homepage, I included all the important information users need. I considered new users, students, and instructors. I added elements to build trust, highlighted the school’s values, and provided a quick, clear overview of what students can achieve. At the same time, I ensured that courses are presented clearly and can be accessed easily, without excessive scrolling or effort.
Each course has its own dedicated page with detailed information. Users can read descriptions of the modules covered in the course, presented in clear text. I also created tags and labels to make the page scannable and provided key details, such as dates and skill level, in a list format, as research showed these were the most important pieces of information users look for first. In addition, I designed a review system to gather feedback and build trust for new users, with comments serving as testimonials. I also included a support feature so users can request help when making decisions or report any issues or missing information on the page.
I designed different account pages for new users, current students, instructors, advisors, and other relevant roles. This wireframe shows the structure of a new user’s account. They can access and edit all their account information, and they also receive beginner-level course suggestions. The page includes links to former student profiles and school introduction pages to help them explore the school further and make informed decisions about the courses they want to take.
Prototypes
-
Hero Section
The hero section of the homepage presents a clear message introducing what the school does, along with a call-to-action button that leads to the course list page. I designed the heading menu to provide the most important information users look for, without overwhelming them with too many options.
-
Values and Trust on the Homepage
Below the hero section, users immediately encounter a clear and concise value proposition, followed by trust-building elements. I selected these values based on the key questions users typically have when first visiting the website, such as the level of courses offered, class format and certificates.
-
Course Catalogue
This section is part of the course list page. Users can search for courses by filtering with course levels, keywords, or by using the search box in the header. I also provided an “All” option so users can view the full list of courses. The design is kept simple and straightforward to avoid overwhelming or confusing users. The dark button shows the hover mode.
-
Course Detail Pages
This shot shows the upper section of the course detail page. I used tag form for quick scanning and paragraph form for more in-depth details. . I focused on communicating only what the course offers and requires and avoided the common practice of repeating homepage values on every course page. This course-specific approach was later tested with users to assess its effectiveness.
-
User Dashboards
I designed different profile pages where users can easily access and edit their information. Each user has both a personal account view and a public profile, allowing them to find and connect with one another. The communication system was kept simple, limited to private one-on-one chats.
-
New List Item
Description goes here
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.