AdaptiveU is a learning platform, which lets you create courses and add learning content. The product was revamped with new design guidelines for which my role was to create a seamless course-building experience.
The process
We constantly adjusted our process to accommodate the UX requests that came in from the product team.
Understand
Target Audience
Institutions and organizations that want to tutor or train their employees and customers. It’s a wide range of audiences so the flow and design should be kept minimal and easily understandable.
Goal
To design an effortless course creation flow that looks in line with the product’s design guidelines.
Painpoints in existing design
- Multiple lessons could not be created
- Users found it hard to rearrange the content while building a course
- Lack of flexibility
Structure
Understanding the course structure is very essential, Eg: A book contains many lessons and each lesson can contain many sub topics which comprise text paragraphs, diagrams, or Q&A sections.
A similar structure was proposed for course building. Just like a book, you have the course here in which you create lessons and under each lesson, you add sub topics which we call it ‘step’ here. Under each step, the users can add multiple contents like videos, files, etc.
Research
Course creation and content creation experience in multiple products were observed. Course creation flow and each component (eg: Add text, Add video, Add file) behavior was observed.
Observations
- Common course creation flow — Adding course overview first and then creating content.
- Adding all the lessons first and editing each lesson to add content to them
- Text and image-based content creation like blog tools had text elements by default and choose what content you should add which accounts to two clicks.
- Text editor design — On selecting the text the toolbar appears or shows it explicitly.
How do you decide what direction to go?
Brainstorm
Paper wireframes were used to brainstorm. A quick sketch of a few course creation flows and ideas were presented along with the pros and cons and brainstormed with the team.
Insights
- Always begin from the starting point of the user flow as you may miss out on some states — From clicking create course CTA to publishing course.
- Having text elements by default might be less flexible in rearranging components when more components add up.
- Placing the content components horizontally works better than vertical.
Ideate
After brainstorming, the initial course creation flow was designed. The below flow was considered in order to guide the user step by step in course creation so they learn the structure of courses. User interfaces were designed ready to be prototyped.
Prototype
A rapid prototype was created using Invision to validate and learn what works and what didn’t in the user flow.
Feedbacks
- The main feedback that I received was that there is a possibility that a new user trying to create a course might abandon it as it may create more cognitive load. Imagine as soon as you click the Create course CTA, you can start adding content, that would be the quickest. Most users might successfully publish a course.
- Both versions with text editor floating and explicitly shown were presented and having it explicitly was preferred.
- Icon exploration for rearranging components was presented and the one which was easily understandable was picked.
User flow improvisation
Based on the feedbacks, the flow was improvised. The flow starts with entering the course name and you are able to start adding content right away. Default lesson and step names were given and can be edited on hover. The main focus was given to adding content to the steps first.
This flow was iterated and prototyped using Invision. Additionally, if the user wants to add further information about the course such as course thumbnail, course description, and category, they can update it in the settings tab
Closing notes
Early feedback and validation are very essential and that’s what guided me to come up with a solution. Quickly prototyping and testing have given me a lot of insights in the early stage. Definitely, the flow can be improvised even more once we deploy and constantly look for improvements based on how the feature is being used.
Thanks for reading!