Useratti / Online design bootcamp
Dated: Sep to Oct, 2022
Platform: Website - Desktops, Mobiles
Built on : Adobe XD
What...
A website for an online design bootcamp with 4 main courses which are further divided into chapters and sub-chapters, accompanied by tests or assignments.
Why...
A dedicated website can make students' experience easier as the course content will not be dependent on the functionality of any other learning platforms..
My role
As a part of the Google UX Design Course, this entire project was designed by me which involved user research, ideating, defining, prototyping and testing.
User Flow
A representation of the main task a user will come across and have to complete in their curriculum with the screens, actions and decisions they will have to face along the way.
Navigation Menu
These three pages form the navigation menu which provides all the necessary information and links to proceed with the course.
Mobile Version
Test Attempt
Tests are conducted at set intervals withing the course. Students can choose to attempt each test at their convenience within a given time window. The tests can be accessed at the end of every course or from the test library.
Enrollment process
Before gaining access to course material, the user is required to login/signup and make a fee payment. The image user flow here represents the enrollment process and the screens that exists between the homepage and the course material page.
The Design Process
User Persona
Upon interacting with multiple people who have attended online courses, combining all their responses, the main issues and motivations of people who access such platforms was culminated into this user persona.
User pain points
A compilation of the commonly occuring frustrations that people face when attending online courses. These pain points will be a key factor in defining the problem.
Navigation 1
Freedom to navigate to any point of the user’s choosing is the biggest challenge in such platforms because they have a lot of content displayed in the same format.
Heirarchy
Heirarchy and importance of each course needs explanation and users are often confused about which order to follow.
Navigation 2
As part of the navigation problem, users often find difficulty going back to the main pages and accessing their courses where they left off.
Motivation
Users need to be sold and motivated to proceed through each course because abandoning the course is a popular trend in online courses.
User journey map
Noting down how a user would ideally complete a test paved a clear journey map of required actions to take. Translating the same experience into a digital format required careful consideration of all the information that students visit and revisit throughout the test time frame.
Sitemap
The hierarchies in my final designs were more interconnected but this was the most basic representation that started the process of what I intended to do with my website.
Paper wireframes
Wireframing process involved creating 4-5 wireframes of each screen listed in the user flow and marking the best features in each wireframe. The finalised wireframes involves combining all the marked features into one screen. This process helped me create and visualise a proper flow between screens.
Digital wireframes
The selected paper wireframes were transformed into Lo-Fi prototypes, ready for usability testing.
Usability study findings
A usability study was conducted on 5 participants with the Lo-Fi prototype. The users had to complete 3 tasks and their reactions, process and hesitations were all recorded and compiled using affinity diagrams and narrowed down to three main problems.
Login Process
Freedom to navigate to any point of the user’s choosing is the biggest challenge in such platforms because they have a lot of content displayed in the same format.
Navigation
As part of the navigation problem, users often find difficulty going back to the main pages and accessing their courses where they left off.
Course Tracker
Heirarchy and importance of each course needs explanation and users are often confused about which order to follow.
Digital wireframes for mobile devices
The digital wireframes created for desktop version was taken as a reference while scaling down the website to a mobile site. Special focus has to be given in making information and written text short and precise.
Accessibility considerations
The areas that need to be focused on for this product is mainly the micro-interactions, text heirarchies and the contrasts.
Maintaining strict heirarchies in text sizes and styles is essential to maintain uniformity in perception of each headings.
Maintaining high contrast between elements will always be a plus point for people who have difficulty looking at screens.
Buttons that need clicking enlarged in size during hover state to let users know that their click can lead elsewhere.
Prototype link
Please use the link below to try out the interactive version of this website.