Turion aims to revolutionize higher education by providing those who seek a college degree with an affordable subscription based plan. I worked as the design lead and took charge of redesigning the Dashboard, Catalog, Introductory Course, Subscriptions, and Platform Tutorial features based on the feedback.
Turion
Date
September - Feburary
Project Overview
2021-2023
As technology has evolved, education has also adapted to accommodate the online landscape. In today's world, many people prefer affordable alternatives such as certifications and bootcamps over traditional higher education due to their cost-effectiveness. At Turion, we aim to provide a more economical alternative to higher education, while ensuring that our users receive the same quality of education as they would at a conventional college or university. I was the lead designer in overhauling the previous design to promote optimal user experience.
Role
UXR
UX + UI Design
Tools
Figma
Figjam
Slab
Slab
Deliverables
Design System
User Interviews
Task Flows + User Stories
Grey-scale Wireframes
Usability Test
High-fidelity Mockups
Prototypes
User Interviews
Task Flows + User Stories
Grey-scale Wireframes
Usability Test
High-fidelity Mockups
Prototypes
4
2
Research
Handoff
1
Ideation
Design
3
Project Objective
To create a reliable and enjoyable learning environment, where students can successfully enroll and complete online courses.
Previous Design
When I was brought onto the project, I quickly realized that I needed to overhaul and streamline the platform in order to optimize the user experience.
- The course catalog page served as Turion’s main page. Without a proper dashboard, the platform seems more as a e-commerce site rather than an online higher education platform.
- As a platform that offers a viewer plan where students pay to view only lecture videos, users have to search throughout the site in order to find it.
- Course overview page does not offer enough information for the student for them to confidently enroll in the course. Additionally, the verbiage “Subscribe now” seems more like a social media platform or a newsletter and is not suited for a higher education platform.
Platform Overhaul
In order to validate my opinion in overhauling and redesigning the platform, I conducted a usability test to prove the theory and present findings to stakeholders.
1. Usability test findings
I conducted a remote user testing study with usertesting.com with the primary objective of evaluating the usability of Turion’s new student program system. The marketing team provided demographic information which I used to recruit 10 participants, with 5 individuals from each demographic group.
30%
User Confusion
3/10 users found confusion with the overview page, stating they are unsure if the program is accredited or not and would like that to be transparent within the page.
1/10 users described confusion on whether enrollment price is monthly/annually etc.
1/10 users described confusion on whether enrollment price is monthly/annually etc.
100%
User Frustration
100% of users had major frustrations in completing their first task of finding the Bachelors in Business overview page from the homepage.
40%
User Uncertainty
4/10 of users were unsure if they had completed the tasks that were provided.
Users completed or attempted to complete the task with an average of 16 clicks, with the majority of the catalog homepage, compared to 1-3 clicks on the other wireframes.
Users completed or attempted to complete the task with an average of 16 clicks, with the majority of the catalog homepage, compared to 1-3 clicks on the other wireframes.
What does this mean?
- Validates a need for a new homepage.
- The entire course catalog page lacks clarity which confuses the user in finding what they're looking for.
- Pricing confuses users due to inconsistent indication of pricing within the payment process and there is no mention of program type (degree, certification, accreditation).
Project Goals
Based on the usability test findings, I concluded that these following project goals as a necessity for an improved user experience.
Clean Layout
Create a user interface that is not cluttered, while still containing all relevant features and information so users can easily navigate through their course and catalog.
Seamless Subscription + Enrollment Process
Design a reliable and transparent step by step enrollment and subscription process so users know what they are subscribing to and what they are enrolling into.
Simple + Easy Navigation
Simple + Consistent UI
Create an easy to use and intuitive navigation with multiple entry points.
Implement and utilize a design system to promote consistency and effectiveness.
User Stories
Heading back to the product requirements and research, I identified three main tasks users would need to accomplish when interacting with the product. To ensure I designed with the user's goals in mind, I defined 3 user stories and mapped out the corresponding user flows.
As a user I want to sign up and subscribe to a plan.
1. Subscribing to a plan
Whether the user is using the platform with the intention to just browse lecture videos or whether the user is looking to enroll in a course, they have to subscribe to a plan first.
As a user subscribed to the student plan, I want to enroll in a course.
2. Enrolling in a course
If the student is subscribed to the student plan, they would need to enroll in a course before officially starting the course.
As a user subscribed to the viewer plan, I find a lecture that I am interested in.
3. Viewing lecture videos
If the student is subscribed to the viewer plan, they would only have access to lecture videos.
Brainstorming on Figjam
With the usability results validating the need to re-design the platform, myself and another designer started to brainstorm different layouts and designs as a starting point for the platform.
Design System
After conducting research on various existing design systems, we have determined that the MUI design system is the most suitable choice for Turion. MUI offers a comprehensive range of pre-designed components, styles, and layout templates that can significantly reduce the time required for designers and developers to create the platform. This will enable us to efficiently deliver a visually appealing and functional product to our users.
Usability Test - First Iteration
After translating my grey-scale wireframes into high-fidelity mock ups, I needed to gather feedback from potential users about the dashboard, catalog, courses and lecture videos. Additionally I needed to gauge and understand the level of findability of those pages so I asked users to complete these following tasks:
1. Please sign up on Turion.
2. Please subscribe to the Student plan.
3. Please complete the platform tutorial.
4. Please find a lecture video titled “Business communications”.
5. Please find and enroll in the course titled “Business 101”
2. Please subscribe to the Student plan.
3. Please complete the platform tutorial.
4. Please find a lecture video titled “Business communications”.
5. Please find and enroll in the course titled “Business 101”
Insights
60%
Of users successfully found the lecture video
6/10 users found the lecture video successfully. The remaining 4/10 users had difficulty finding the lecture video because they were in the middle of the page instead of the top of the page.
4/5
Tasks that had a 100% completion rate
This emphasizes that the one task that didn’t have a 100% completion rate, had an area of improvement.
80%
Liked the navigation
80% of the users shared that they liked the simple navigation on the platform and felt that it seemed like a straightforward experience.
Feedback Incorporation
Usability tests are used to measure product learnability, efficiency, memorability, user satisfaction and errors of a given product. However due to the limited amount of time to complete the project, I could only conduct one usability test with the high-fidelity wireframes. Therefore, I decided to focus on incorporating the feedback provided and find any errors or glaring issues with the design.
Solution
Although users can find the video lecture through the search bar on the dashboard (2), it seemed that this can be easily overlooked. I modified the mini catalog to include search capabilities for lecture videos along side courses (4).
Additionally, on the catalog, I added a tab format where users can browse for either courses or lecture videos (5).
This provides users with three entry points for browsing lecture videos and courses.
Additionally, on the catalog, I added a tab format where users can browse for either courses or lecture videos (5).
This provides users with three entry points for browsing lecture videos and courses.
Additional Changes
I added a customize dashboard feature on the left hand side of the action panel (1), where users can now organize and hide sections within the dashboard. By doing so, users can choose to change their dashboard to their own liking.
A calendar FAB icon is also added, so users can add events and appointments to their profile (3).
Within the catalog page, course cards are sorted alphabetically by subjects, to avoid crowding and clutter (6).
A calendar FAB icon is also added, so users can add events and appointments to their profile (3).
Within the catalog page, course cards are sorted alphabetically by subjects, to avoid crowding and clutter (6).
Course Overview
As per the feedback in the usability test, users really liked the layout of the course overview. They stated that they liked how the overview provided them with all the information they needed to know about the course prior to enrollment.
Therefore, these screens remain unchanged.
Therefore, these screens remain unchanged.
Challenges
There are a lot of ways to display a catalog. As most high education catalogs are displayed as text lists, I found it challenging to find a way to display it creatively in a more visual format without taking away any of the relevant information.
Catalog Page UI
We had to change engineering teams midway, which resulted in less time than anticipated. I had to work closely with the new team, providing support through weekly meetings, loom videos, and constant communication on Slack.
Additionally, downsizing from a team of two to a solo designer meant that I had to multitask and prioritize tasks carefully to meet deadlines while juggling multiple projects.
Additionally, downsizing from a team of two to a solo designer meant that I had to multitask and prioritize tasks carefully to meet deadlines while juggling multiple projects.
Development + Flying Solo
As I was brought into this project, the color scheme, typography and product feel were already decided. I have very little wiggle room in changing these factors. In order to maintain the brand, I had to keep these things in mind in order to maintain brand consistency.
Style Guide
Dashboard
The dashboard is the first thing a user sees after they sign in/up. Therefore it was vital to contain all the necessary functions and features that will help the user in accomplishing their tasks. I had to take into account all the possible ways a user may look for a course or lecture while still providing the dashboard with a cohesive layout. Never-less to say, testing was crucial in helping me determine additional entry points for course catalog and lectures.
Conclusion + Next Steps
As someone that believes in attainable and affordable education for everyone and anyone, I am extremely passionate about the work I've done at Turion and am excited to see it to fruition.
At the start of the project, user interviews were not carried out as the marketing team had already provided our team with their research and personas. However, as the project progressed, I came to the realization that despite the valuable insights gained from marketing research, it did not fully address the needs of the UX team. Unfortunately, by this time, we were on a tight deadline, and we had to continue on with what we have.
Moving forward, the next steps of this project is to conduct user interviews and more user research to determine our users and identify any existing and new challenges. Based on these insights, we will need to re-iterate the designs to accommodate feedback.
Overall, this project was a valuable learning experience for me, and although there is still work to be done, I am grateful to have been a part of it.
