Course Page Redesign
Overview
This project started with a very narrow scope initially and as I began to dive deeper we had to expand the scope further.
Initial Brief
We need to solve few known issues in course page and its components for both web and mobile platforms, that should require less tech efforts.
Re defined brief
Apart from known issues let’s figure out what other things we can solve here for the user!
My Role
Lead Designer, UX and Visual Design
Platform
Mobile & Desktop
Few requirements from initial brief
- The current design for course schedule doesn’t give much information to a user about the session
- We need to remove the week structure from the schedule
- We need to add gamification nudges on the page and session components
This brief sounded like a small task to do but it required a much better understanding of the major problems on the first place.
So I decided to take a step back to figure out the pain points of our user, so that further I can prioritise the designs tasks and redefine the scope of this project
How our paid user sees course page?
Once a user purchase any course from crejo, it gets added to their “my course” section which they can access from the top navbar.
Identifying the problems
Since I had already used the website and had major idea about it, I decided to do in-depth analysis of the page first. I wanted to understand the functionalities, overall architecture, and navigation.
Through the analysis, I was able to identify some clear usability issues and pain points.
1. There’s no way for the user to know what’s their next session or information about the previous one
Once user lands of the enrolled course page the schedule listing starts from week 1 and list goes till week 12 with 2 sessions in each week. User can access what’s inside a week if clicked on the accordion. If the user wants to access session recording of their recently attended or missed session how can they access that? In current design they have to click on accordion to expand each weeks card which is not a great experience..
2. Missing sense of progress
Due to the huge session cards with hardly any info, it’s difficult for the user to have any sense of progress in the course. Users were unaware of many useful information from this page that could help them to have a glance of the entire course
- How much course is finished?
- How many sessions are left?
- How many I have attended?
- How many sessions I was present in?
- What is the course end date?
- Where will I get the course completion certificate?
3. No clear actions after a session is done
After a live session ends it’s really important for a child to practice those learning offline as well in order to retain the information. In case of extracurricular learning such as dance it becomes more crucial to practice few times after the live session so that you’re prepared for the next session.
In current expanded session card design all the resources were just listed majorly as textual information that was not sufficient enough to convince a children to watch those resources again.
4. Too much information on expanded card
Once the session card is expanded user can see all the items and information provided for that session. Majorly there were inconsistency in terms of how similar group of component behaves on the page. In our paid courses we provide few items to the user once sessions is done. Example for a dance course we provide these items
- Choreography Song
- Practice Video
- Teachers Feedback
- Session Recording
- Fun moments (screenshots from session)
5. Missing flow for a user to upload fun moments on Canvas
Canvas is another product by crejo.fun where childrens can create their profile and upload their creations related to courses.
Fun moments are snapshots taken during the entire session which user can see later on. And we needed a flow from schedule to help user upload their fun moments on canvas profile.
Based on the above pain points, here are some features & functionalities that I think one can expect from the design solution
- Need to introduce schedule timeline
- Need to have a canvas upload flow for fun moments
- Should create an entire page for completed sessions
- Give users all the resources after a session under one context
- An overview of course is necessary(start date, end date, session left etc)
- Session attendance should be clear
- Option to reschedule a session before 24hrs
- A dedicated place for course certificate
- Scalable design components to accommodate future gamification nudges
- Session rating component needs to be added for attended session
Let’s look at the design solutions
While designing we had to add contextual information to the entire page and separating session page from previous accordion helped us do that.
There is difference in fonts in old and new design, as in new design I have used updated fonts from new design system.
Designs for Course page
Page view for first time paid user (no sessions attended)
The page now looks well structured, visually the user can scan required group of information now. We have also included an option to reschedule the session for any upcoming session, based on customer frequent request to reschedule through our customer support team.
In previous design it was really difficult to find next upcoming session. Now its on top priority on the page
Upcoming Session Card with multiple states
As we decided to bring a section specifically to show user’s upcoming session, we had to make some states for it to such as
- Session is going to happen next day
- Session is starting is few minutes
- Session is live now
Previous session missed by the user
If a user missed any session they still can access few resources like session recordings, practice video, performance video. Although teacher’s feedback, fun moments wont be there on the sessions page.
Course completed indicator
Included an indicator when all session of a course are completed by the user
Course certificate widget
Previously there was no visibility of how and where users are going to get their course completion certificate from. In new design I have created a static widget for certificate, which will show how many sessions are left to get the completion certificate. Once the course is completed this widget will have original certificate with a download option.
Mobile web Designs
I have designed the mobile components fairly similar to desktop screens. One big change is that overview component and certificate widget were shifted to another tab for mobile designs.
Session’s page designs
As mentioned earlier there was a need to create a separate page for after session resources in order to reduce the information overload in session accordion design.
Previous session resources were accessible after user expanded the session card which consisted 2 sessions from that week.
New Page for completed sessions
In the new page Information were grouped together to make user’s journey easier after a session is completed. Few of the major changes are:
- Now videos resources appears like videos with a better thumbnail design
- MP3 choreography song will now have a separate widget, previously it played similar to videos with integrated youtube links
- Teachers feedback now has a dedicated component on page itself (previously it used to open in another browser’s tab as PDF)
- Sessions rating component at the bottom
- Fun moments from the sessions are now presented in front, also now user can upload them to canvas from this page.
If the user was absent in a session we won’t show feedback, rating and fun moments.
Upload on canvas
Users can upload single or multiple fun moments from their session to the canvas profile
View fun moments
User can access all the fun moments including videos and images on a overlay. Also they can upload while viewing them
Session’s page mobile designs
Conclusion
With this project I learnt that its fine if you feel to take a step back and start with more questions. Take little more time to identify crucial problems.Until the problems are clearly on the table it’s difficult to deliver a great solution.
We started with a smaller scope then we ended up creating an entire new page for sessions which had very little space earlier on the course page. But having this big change allowed us to think vast in terms of our future design tasks related to sessions and course page also.
