Preparing for college
VISION
STATS
Date
Apr - 2022 / Jul - 2022
Team Size
3
*I was the only designer
SUBJECTS
Stakeholder understanding
Agile Methodologies
Problem Research Analysis
Research Planning
Qualitative User Research
Quantitative User Research
Product Research Analysis
Competition Analysis
Co-exploration sessions
User Define
Co-define sessions
Information Arquitecture
Interaction Flow
Interaction Design
Conversational Design
Design Documentation
Efficiency
UI Kit Creation
Product Design
Context and the challenge
Unibetas is an online service who provides education for students who wants to enter the University in Mexico. A site with 800,000 monthly visits, a 0.2% conversion rate only. Users not doing the right flow. Great capacity to generate leads but little conversion.
My first thought? The tricky and poor navigation structure and insufficient responsive design (and it has 78% of entries from the cell phone). Insufficient information architecture, content and storytelling. Those were my first impressions of the site and analytics. Well, also inconsistencies across the different screens and user retention problems due to many reasons.
Course screen before the redesign.
This is some text inside of a div block.
The Journey
How was the journey? Direct participation of the client during all the process, based on the communication, short times, quick prototypes and clear definitions. Understanding of the context, competition and needs to create a disruptive experience.
I defined the roadmap, the strategy, deliverables and I began to analyze the current state of the website with the analytics. we defined with the stakeholders and teachers the user persona to whom the solution is aimed, the needs, objectives, influences and fears of the person.
I made a research on the topic of entrance exams and the users involved in all of this, and then I started looking at the current flowchart, content, information architecture and more. Defining our Persona was crucial to understanding their needs and goals. Align with their point of view and for correct communication, both visually and in writing.
Competences
I conducted a competitor analysis to assess their offerings, content, communication strategies, and their understanding of the students' mental model. This analysis involved studying the product strategy of our competitors and how they were meeting the needs and expectations of their users.
Additionally, I performed a functional benchmarking exercise to see how other leading academic institutions managed these areas. This included prominent organizations such as Open English, Platzi, Next U, among others. This examination allowed me to gather key insights to inform our product design strategy and ensure our offering was well-aligned with market trends and user expectations.
Some competences of Unibetas.
Communication
I analyzed the communication, the current storytelling, the voice and tone they use, everything. For this project it is very important to me to highlight the communication and content since it is crucial to increase conversions, at all times thinking from a storytelling approach from the user's need and uncertainty to not being able to enter the university (also the SEO), instead of the storytelling that the site had, focused on the webapp and what the webapp offered. That´s why it was necessary to create a Voice and a manual of the rules and tones.
Voice and Tone guidelines
Some of the screens of the onboarding
Arquitecture of the site and navigation
I did an online card sorting (the client it´s from México) with 15 students that the client recruited. In order to rethink the architecture of the site and create a more effective and efficient one. 100% of the students ended up creating a new and more logical architecture for them in this study. As opposed to the one the site had, being complex and easy to lose.
I made the new structure of the homepage, following an structure for a linear sales cycle
1. Create Awareness
This is the moment that someone finds your product/service and starts to navigate it (as opposed to clicking off immediately). The person is now aware of your product; it doesn’t mean anything more than that (such individuals might just be looking for some information), but it is the start of the sales cycle.
2. Product Research
Then, the student will start looking for information about a specific service. If you can show that your product is a solution to a problem that the potential customer has at that moment, so much the better. This is when you try to show buyers “what’s in it for them”.
3. Emotional Credibility
This is when we talk to the mid-brain that handles our emotional control. Creating the right kinds of emotion that will increase the subscriptions. For example, heightening the sense that only 3 of 10 students enter the university based on the statistics of the universities in Mexico, but with Unibetas that is not a problem.
The first 3 points of the arquitectura mentioned.
4. Product Credibility: OK, they know what is about the service we sell and how it will help, but how good is the offer? Customers want to see comparisons between others competitors and prices now. They want to know that our solution is among the best for their budget range and the amount of things that includes.
5. Involvement and Buying DecisionThe students have now decided you have the credibility, but they still aren’t sure if they want to buy. Now’s the time to give them a special offer or a discount coupon. This is where you finish establishing trust with them. The student has finally made his or her mind up and has committed to you.
Point 4: comparision over the different options to learn.
Point 4: testimonials to generate trust and credibility on the users
Different Plans
Unibetas has two plans, one super pro and one pro. The value proposal of each one was confusing. Based on some tests that I carried out with 4 users that the client got me, I found multiple problems.The students argued that there was too much information, they could not find the difference between the two plans, there is no way to compare but first they have to read all the information on one plan and then go to the other plan.
There is a lot of ambiguity and it does not specify the benefits well, leaving room for doubt. The benefits are repeated but with a different wording. Etc.
Unibetas plans comparative
Iteration of the plans
An easy and intuitive way for the student to choose their plan. I iterated the value proposal of both of them, ending with a clear and nice solution.
✔ A comparison between the plans and what each one includes
✔ Visual boost in super pro plan
✔ Trust and credibility at the right
✔ More detailed information with tooltip
✔ People behind everything and offering help anytime
✔ Clear and minimalistic design
The NEW Unibetas plans comparative
Mobile experience
As I mention in the beginning, 78% of the users come from mobile cellphones. Same experience, different platform.
Duollar screen and their different states
Home mobile
Course internal and navigation
Checkout and heuristic analysis
After you choose the plan, you go to the checkout process. For this instance of the flow, I performed a heuristic analysis, since I found multiple improvements. I found that the amount to pay does not appear, there is also no information regarding what course or the summary of what you are buying, the only thing that refers is the title that says IPN course, the issue is that in the meantime so much content goes unnoticed, hardly scannable.
The input fields do not have good contrast, failing accessibility, it does not give the user indications about where he is and where he is going to go, the interaction to place the expiration date and the numerical code is difficult to find and is not intuitive to the user. The design lacks confidence, among other things.
The checkout screen that I analized and iterated
Duollar screen and their different states
Iteration of the enrollment process and checkout
Here is the enrollment flow. It has a stepper format. First you pick the university, then the plan, goes on to complete the contact information, and is told why we need that info, that it is necessary in order to get in touch with the person and that Unibetas will send their account.
And the last step, you are told that once you complete the registration it can take up to 24 hours to receive the account, a summary of what you are buying, what plan and what it includes, in addition to the price, the payment method, and then, after this step, there is a popup giving feedback.From choosing the University to checkout. I redesigned the entire payment process, reinforcing trust, making it more usable and providing valuable information.
Duollar screen and their different states
Plans and checkout stepper
UI Kit
To create a consistent and robust experience, it was necessary to create a UI Kit that would be used both in the main web page and in the application. This UI Kit is made with an Atomic Design approach.
Duollar screen and their different states
Measuring success and the end of the journey
The measurement of success in a UX/UI design project for an e-learning platform is fundamental to ensure the achievement of goals and user satisfaction. To measure the success of this project, it is important to use different types of metrics that allow evaluating different aspects of the design and user experience. Some examples of metrics that could be used are:
1 - Usability metrics: These metrics allow evaluating the ease of use and accessibility of the platform, including navigation, clarity of information, and users' ability to complete tasks. Usability metrics include task completion times, task success rate, error rate, and user satisfaction.
2 - Engagement metrics: These metrics allow evaluating user participation and interest in the platform, including the time users spend on the platform, frequency of use, and user retention rate.
3 - Business metrics: These metrics allow evaluating the impact of the platform's design on business objectives, including user-to-customer conversion rate, increase in sales, and reduction of costs.
4 - Retention metrics: These metrics measure how many students continue with the course after a certain point in time, such as week 1 or month 1. This can help to identify areas of the course that may need improvement to keep students engaged.
5 - Completion metrics: These metrics measure how many students complete the entire course and how long it takes them to complete it. This can help to identify areas of the course that may be too difficult or time-consuming for students.
Using different types of metrics to evaluate the success of the e-learning platform allows obtaining a more complete view of its performance and continuously improving the user experience. Moreover, measuring success is fundamental to ensure that the platform achieves business objectives and provides an effective and satisfactory learning experience for students.
To end this case study, I list the internals I worked on worked:
- Home
- Blog
- Blog post
- Lives
- Course page
- Navigation
- Free resources
- Sign Up Flow
- Log In Flow
- Plans and checkout process
Duollar screen and their different states