Optimizing GitHub Student Pack experience | 340% increase in Student pack utilization
Educate provides students with 6 months of free access to 60 courses under the Github Scholarship Program. However, there's significant feedback about difficulties in finding these courses. Optimizing this discovery process is crucial to converting these students into paying subscribers.
Project Tags
Deliverables
2021
Product Designer
Design Audit
Visual Design
Documentation
User Flows
Design Presentation
User Testing
Year
Team
1 UX Designer
2 Product Managers
3 Front-end Engineers
1 Senior Engineer
Duration
4 months
Role
IMPACT 💸
Testing and Results
We showed the prototypes to 8 of our summer interns in the 3rd and 4th years of their undergraduate studies.
All of them were easily able to gain access to the GitHub student pack.
Learners found new Github page more valuable and easy to follow.
Personal Takeaways
The revamp of the page gave me a lot to learn about how UI elements can be organised to give a pleasing user experience to the user
I learnt how big problems may be solved by simple solutions. Quick wins (problems that require low design and engineering effort but give big impact) help users and businesses faster.
I learnt more about giving users appropriate feedback using design.
Student pack usage surged by 340% within 30 days following its launch
PROBLEM
Learners with student accounts were confused
Why do we need to fix this?
Business Goals
Increase the number of GitHub and annual subscriptions
User Goals
Improve the discovery of courses that are included in the Github student Pack
Make the the process of obtaining the GitHub student pack seamless
Customer support tickets were pointing to 2 issues
Discovery
“I don’t know which courses are included in the pack”
Confirmation
“I have subscribed to Github scholarship but I am not sure if it worked. Nothing is different”
Creating Intuitive User flows to make the Github courses Discoverable
The “Explore” and “Learning” pages are those where the user navigate to the courses they want to study. I created navigation patterns through these pages such that it becomes intuitive to users to discover Github student pack courses.
Fig. Optimizing User Flows for Github user personas through the learn and explore page.
Enhancing Discoverability of GitHub Student Pack Courses on the Explore Page
I added a tab in the ‘Explore’ page for users who were Github Student pack holders. A github icon was also shown on the course tile for distinction.
Fig. ‘Explore’ page for educative
Upselling subscriptions and confirmation in Course Homepage
Mention explicitly if a course is part of the GitHub Student pack on the course homepage.
Added a banner at the top to inform user that this course is part of Github subscription.
Added icon and text to reassure user that this course is part of the Github subscription
Option for the user to view the complete catalog of courses
Pain Point: Learners Unsure of their Access to GitHub Student Pack
Action: I provided feedback in 3 ways when action is completed
In the form of modal when the subscription was activated
Placing the status of the subscription in the profile dropdown menu (outlined in orange)
Adding a tile in “My Purchases” page that mentions the status and expiration date of the subscription
Users unable to complete action to subscribe to Github Student pack
“Data showed only 297 clicks were recorded in June 2021. User interaction with the page is too low”
Fig. Screenshot of Hotjar for Github webpage
Using Aesthetic Usability Principle, we decided…
After discussion with the product managers, we decided to revamp the UI of the webpage because the page required numerous UI improvements. We wanted to increase the credibility of the platform by designing a webpage that contained information that was useful, informative, and aesthetically pleasing.
Auditing Content and Visual Design to Identify Gaps and Issues
I audited and carefully assessed every section of the page. I questioned everything in the design and tried to come up with a UI that included all the relevant information required for the users to subscribe in a seamless manner.
Old Hero Section
Title too long
Illustration taking too much visual space cause the content to go down
Features written in a form of paragraph which does not cause users to pay attention
CTA is at the bottom causing the user to scroll
New Hero Section
I decided to put the most important information at the top to attract the attention of the users. Using Hotjar recordings, I noticed the interaction of the users with the webpage decreases with increasing scrolling
Small and relevant illustration to show relationship
Features in a list view that are easy to read
Trusted customers to establish credibility
Displaying instructions that are easy to follow - New Section
Since the customer support received several emails from users that they were not able to activate their GitHub subscription, I added this section to give clear and concise instructions.
This section features screenshots of webpages that users must navigate through to access their subscription. The familiarity will keep users at ease.
Helping learners to make a decision - New Section
I added a new section to mention the benefits of the GitHub subscription. It would help users to make a decision about being Github subscribers.
Old “FAQs” section
Redundant Video that does not provide new useful information
Questions and Answers arranged in a space and text heavy manner
Another primary action in the page is distracting
Updated “FAQs” section - Making information simple to consume
Old “Why Educative” section
Too much text with unrelated illustration
Poor arrangement of features
A coding widget appears to be redundant and too dense
Updated “Why Educative” section
Marketing manager, Product manager and I edited the content of “Why Educative” section so users would know the features unique to Educative so it helps us stand out from other platforms. This helps increase Educative’s credibility.
Full page including Dark Mode
Next Project
