Transaction and Payment Management in Profile Page
GetSmarter aimed to elevate the learner Profile Page on their website, a hub for executive education courses in collaboration with edX, a 2U company. Over time, the page had grown restrictive and required additional functionalities.
My Role and Responsibilities
I was tasked to design variants of the course card component to cater to all scenarios during the registration and payment process of a course. Ultimately placing these cards in the profile page interface also opened new opportunities for design revisions from the existing layout.
Credits
UX Design: Joe Vogel; Chrysanthe Nicolaides
Goals and Objectives
The existing design couldn’t cater for the addition of new features. The Profile Page needed an overhaul to incorporate enhancements, which included the bundling of courses that introduced a new layer of complexity. This led to a redesigned interface that seamlessly guides users in managing their courses and payments. The existing table design posed limitations, hindering the addition of a new CTA that would allow users to access courses directly from their profile dashboard.
Key enhancements to the page:
-
Direct access to courses from the profile dashboard
-
Implementation of two-factor authentication
-
Introduction of bundled courses
-
General UI refinements (reduction of primary CTA usage, etc.)
-
Review of the table view, favouring a stacked layout
Designs and Deliverables
The objective was a comprehensive overhaul, ensuring the new design could accommodate future enhancements and thereby ensuring the longevity of the design. A pivotal step involved the introduction of course cards, for which we defined each variant depending on the scenario.
Page Enhancements
The biggest evolution was the incorporation of payment details within these cards, enabling students to manage billing details, make payments, view payment history, and access invoices. These cards seamlessly connected the profile page with the Online Campus, granting the student direct access to their registered courses. The before-and-after mockups below showcase the transformation of this page.
In Conclusion
As companies evolve and practical needs emerge, design iterations become inevitable. The challenge of reimagining the interface proved captivating—an integral aspect of students’ interaction with the learning site. The revamped Profile Page serves as a one-stop overview for all course and payment-related matters, acting as a springboard for students in their learning journey.
