SUMMARY
Project Description: Website redesign project (Jun—Aug 2021) for the Postgraduate program of Descomplica, Brazil's largest Edtech.
Goals: Improve the Postgraduate program's shopping experience and present the institution as a high-quality graduate education institution.
My Role: I was the sole UX designer, leading desk research, benchmarking, wireframing, prototyping, and log analysis. Branding assets were designed by the design team and usability tests were executed by an outsourced team alongside me.
Goals: Improve the Postgraduate program's shopping experience and present the institution as a high-quality graduate education institution.
My Role: I was the sole UX designer, leading desk research, benchmarking, wireframing, prototyping, and log analysis. Branding assets were designed by the design team and usability tests were executed by an outsourced team alongside me.
Process: Desk Research, Benchmark, Wireframe, Prototype, Usability Test, Development, A/B Testing, Continuous Optimization
Results: In the first consistent A/B testings (50/50):
• Direct sales conversion rate increased by 23%
• Booking rates increased 35%
• Lead capture rate increased 17%
After that, the new proposal became the official website and consistently performed at similar rates, compared to the previous website's performance.
Results: In the first consistent A/B testings (50/50):
• Direct sales conversion rate increased by 23%
• Booking rates increased 35%
• Lead capture rate increased 17%
After that, the new proposal became the official website and consistently performed at similar rates, compared to the previous website's performance.
Gif from the redesigned mobile website.
Gif from the redesigned desktop website.
PROJECT INTRO & CONTEXT
The largest Brazilian startup focused on distance education, Descomplica started out with courses to prepare students for university admission exams, a country-wide practice called "vestibular", then ventured into higher education back in 2020. Recently, the company has received the largest investment round ever raised by an edtech in Latin America, US$ 84 million to boost the company's higher education offerings.
After the investment round, the company was able to assemble a Conversion Rate Optimization (CRO) team, fully dedicated to the Postgraduate program's website. I was the sole UX designer in collaboration with two developers, a product owner, and a UX writer. There was also a design director and a tech director as team supervisors and, for a period of time, we had an outsourced team to carry out usability testings.
After the team formation, we were invited to redesign the Postgraduate program's website to improve the shopping experience and better present Descomplica as a higher education institution.
"We want to build Brazil's largest university and rapidly reach 1 million students through an entirely digital model." — CEO at Descomplica
To define the keypoints of the project optimization, we performed desk research, benchmarking, and usability tests. After validating and implementing the new design, we performed continuous log analysis (heatmap, screen recordings). In Addition, branding updates were incorporated into the project at the request of the company's design team.
Some project constraints made us not contemplate the entire user flow. The checkout system used by the company had limitations that made it impossible, for example, to have an 'add to cart' function on the website. This and other features should be incorporated in the future, in collaboration with other teams.
DESK RESEARCH
Because the project did not have resources for primary research, we started to analyze the data available from previous research made by the company. At the same time, we analyzed reports and guidelines from the Nielsen Norman Group with recommendations to improve user experience on higher education websites and reports for e-commerce. Finally, we also did a quick analysis of our customer's most frequent complaints, listed on Reclame Aqui ( Brazil's most popular website for product/service reviews).
Below are some of the most important data found in the desk research, which were taken into account for the decision-making process in the next stages of the project:
Previous Research
• The main reasons people enroll in Postgraduate Courses at Descomplica are to obtain new knowledge, to get a raise at their jobs, to get a new job, or to change the field of activity;
• Compared to its competitors, most people choose Descomplica for its price and for its online, easy to access graduate courses;
• Descomplica students are predominantly lower class.
• The main reasons people enroll in Postgraduate Courses at Descomplica are to obtain new knowledge, to get a raise at their jobs, to get a new job, or to change the field of activity;
• Compared to its competitors, most people choose Descomplica for its price and for its online, easy to access graduate courses;
• Descomplica students are predominantly lower class.
Report showing data from current Descomplica Postgraduate students.
Reports and Guidelines for Higher Education Websites
• As an education institutions, clearly identify the University on every page, especially if there are subsites, departments, and other institutions associated with the main institution;
• Make it easy for users to view a list of majors and programs;
• Emphasize your strengths and achievements;
• Provide information about job placement after graduation;
• Beware the perils of making your website cool.
• As an education institutions, clearly identify the University on every page, especially if there are subsites, departments, and other institutions associated with the main institution;
• Make it easy for users to view a list of majors and programs;
• Emphasize your strengths and achievements;
• Provide information about job placement after graduation;
• Beware the perils of making your website cool.
Article about University Websites from the Nielsen Norman Group.
Report and Guidelines for eCommerce
• Answer user's doubts;
• Allow quick product comparison;
• Provide honest reviews;
• Make payment process easy;
• Lower interaction costs.
• Answer user's doubts;
• Allow quick product comparison;
• Provide honest reviews;
• Make payment process easy;
• Lower interaction costs.
Article about eCommerce product pages from the Nielsen Norman Group.
Our Customer's most frequent complaints
• Difficulties in receiving the certificate;
• Difficulties in accessing a 2nd course (in combo/multiple purchases).
• Difficulties in receiving the certificate;
• Difficulties in accessing a 2nd course (in combo/multiple purchases).
Print from Reclame Aqui's website to where complaints about Descomplica were posted (the most popular website for product/service public reviews in Brazil)
BENCHMARK
After desk research, we started benchmarking, analyzing websites from direct competitors and reference companies in the education market. From the analysis, we were able to understand the similarities and differences between those and Descomplica, and decide what could be considered as a reference. Sitemap, navigation flow (from the homepage to the course page), course content, and brand applications were analyzed.
Prints from reference companies in the education market (Masterclass, Udemy, Coursera, Skillshare, Ebac.)
SITEMAP & WIREFRAMES
After completing desk research and benchmark, we defined the sitemap, followed by wireframes and prototypes.
The process was evaluated by both design and marketing leaders. The leader's opinions and hypotheses were all registered, some of them were incorporated into the project immediately, while others (more complex or conflicting with user interests) were registered in the backlog for future analysis.
After the mobile and desktop wireframes were approved, I designed the prototypes in the Figma app, which were then employed in usability tests. The insights from the usability tests were used to make adjustments before implementing the website.
The process was evaluated by both design and marketing leaders. The leader's opinions and hypotheses were all registered, some of them were incorporated into the project immediately, while others (more complex or conflicting with user interests) were registered in the backlog for future analysis.
After the mobile and desktop wireframes were approved, I designed the prototypes in the Figma app, which were then employed in usability tests. The insights from the usability tests were used to make adjustments before implementing the website.
The sitemap shows the site pages and connections: Homepage, Category Page, Course Page, Search Page, and About Page. For new customers, the main action is to find a course and buy it. A second one is to fill out a form to become a lead. For those who are already a postgraduate student, the main action is to access the platform.
Lo-Fi desktop wireframes showing possible sections and orders on each page of the site.
BRANDING UPDATES
In addition to UX/UI updates, the new website also updated some branding assets, such as logo, background color and new photography sets.
Examples of updated branding assets: logo, neutral colors (dark background) and brand promotional photos.
PROTOTYPES
Desktop Prototype
To appropriately access the desktop prototype, please click on the top right corner of the embedded window to make it full screen.
To appropriately access the desktop prototype, please click on the top right corner of the embedded window to make it full screen.
Mobile Prototype
To appropriately access the Mobile prototype, please click on the top right corner of the embedded window to make it full screen. If you end up in the desktop prototype, you can change it on the menu on the left.
To appropriately access the Mobile prototype, please click on the top right corner of the embedded window to make it full screen. If you end up in the desktop prototype, you can change it on the menu on the left.
USABILITY TESTS
The tests were carried out by NewUse, an outsourced UX Research company. I was responsible for reviewing the work, checking if research objectives, scripts, recruitment, and interviews were in line with our expectations. 27 tests were carried out with the following methodology and sample:
• Initial interview, usability test with free navigation, and final interview;
• 15 tests on desktop + 12 tests on mobile;
• Age groups: 22- to 24-year-olds (25%) + 25- to 34-year-olds (50%) + 35- to 44-years-olds (25%);
• 60% women + 40% men;
• All Class C or D (lower class);
• People interested in enrolling in an online postgraduate course in the following areas: Law, Engineering, Health, Technology, Management, Education, and/or Marketing.
All users who participated in the usability tests were instructed to freely expose their thoughts and opinions while performing the tasks. The interviewers made it clear that they were not Descomplica's employees and that the users were not being evaluated, only the prototype/website.
• Initial interview, usability test with free navigation, and final interview;
• 15 tests on desktop + 12 tests on mobile;
• Age groups: 22- to 24-year-olds (25%) + 25- to 34-year-olds (50%) + 35- to 44-years-olds (25%);
• 60% women + 40% men;
• All Class C or D (lower class);
• People interested in enrolling in an online postgraduate course in the following areas: Law, Engineering, Health, Technology, Management, Education, and/or Marketing.
All users who participated in the usability tests were instructed to freely expose their thoughts and opinions while performing the tasks. The interviewers made it clear that they were not Descomplica's employees and that the users were not being evaluated, only the prototype/website.
Outcomes
The Usability tests revealed several opportunities for improvement. Listed below are some of the outcomes:
• The most important decision factors for users are price and course content;
• Other factors mentioned were the class format, a recognition from the Ministry of Education, the opinion of former students, and the duration of the course. The prestige of the institution was evaluated as of minor importance;
• Users missed course-specific reviews (Descomplica only has testimonials about the institution, not about each course);
• The possibility to "Download classes to watch offline - it's very important! For people who take public transportation and use their commute to study."
• Users have shown that they want to better understand what is the experience of taking classes on Descomplica: "How to access the platform? What is it like to attend classes? What are the assessments like? Etc";
• Most users were uncomfortable with filling out a form to have access to the course syllabus;
• Some users missed other payment methods;
The Usability tests revealed several opportunities for improvement. Listed below are some of the outcomes:
• The most important decision factors for users are price and course content;
• Other factors mentioned were the class format, a recognition from the Ministry of Education, the opinion of former students, and the duration of the course. The prestige of the institution was evaluated as of minor importance;
• Users missed course-specific reviews (Descomplica only has testimonials about the institution, not about each course);
• The possibility to "Download classes to watch offline - it's very important! For people who take public transportation and use their commute to study."
• Users have shown that they want to better understand what is the experience of taking classes on Descomplica: "How to access the platform? What is it like to attend classes? What are the assessments like? Etc";
• Most users were uncomfortable with filling out a form to have access to the course syllabus;
• Some users missed other payment methods;
Most of the inputs that the usability tests provided were used to make adjustments to the prototypes. Some of them were related to the checkout process (new payments methods, multiple courses checkout), which we wouldn't have time to accomplish until the project completion. These requests were listed in the backlog for future optimizations by the checkout team.
Users clearly stated their desire to access the course programs without having to fill out a form. This demand was discussed among leaders, due to the fact that this access form is currently the biggest lead capture on the site. After the discussion, it was decided to deal with this request in the future, after the conclusion of this project.
Finally, all users had to give a score (from 0 to 10) for the experience of performing the requested tasks. The overall score was 9/10.Average Test Score
9/10
Average score given by the test participants
Quotes from the Usability Tests Participants
• "It's very intuitive, but I think it could have more information."
• "The only thing I would change would be to highlight the duration of the course."
• "I like how it looks, big buttons, easy to navigate by the menu. I didn't like having to register to see the Course Program."
PROPOSALS
Based on the research outcomes, new sections were designed, trying to meet the needs of the users:
Motivation to Get a New Job or to Get a Raise
A new section on the course page was created, informing the national average salary of the professional in the area, and the each state's average salary after the personal data form is filled out.
A new section on the course page was created, informing the national average salary of the professional in the area, and the each state's average salary after the personal data form is filled out.
Motivation to Obtain New Knowledge
Our team discussed with the pedagogical team if it was possible to have a summarized list of the learnings of each course in a checklist format.
Our team discussed with the pedagogical team if it was possible to have a summarized list of the learnings of each course in a checklist format.
Descomplica's Students Being Predominantly Lower Class
And based on the feedback from the usability tests, some English terms were replaced by Portuguese expressions.
Examples:
- Onboarding > 'Course Introduction'
- Coach > 'Professional Support'
- Checkout > Carrinho ('Cart')
And based on the feedback from the usability tests, some English terms were replaced by Portuguese expressions.
Examples:
- Onboarding > 'Course Introduction'
- Coach > 'Professional Support'
- Checkout > Carrinho ('Cart')
Best Practice to "Clearly Identify the University on Every Page, Especially If There Are Other Institutions Associated with the Main Institution"
The logos of Descomplica's partner universities were removed from the main header to clearly highlight the Descomplica institution.
The logos of Descomplica's partner universities were removed from the main header to clearly highlight the Descomplica institution.
Best Practice to "Make It Easy for Users to View a List of Majors"
A dropdown menu in the desktop version and a lateral menu in the mobile version were added to the main navigation, listing the institution's categories and courses. Additionally, a section with course categories has a critical role on the homepage, right after the hero section.
A dropdown menu in the desktop version and a lateral menu in the mobile version were added to the main navigation, listing the institution's categories and courses. Additionally, a section with course categories has a critical role on the homepage, right after the hero section.
Best Practice to "Make It Easy for Users to View the Course Syllabus"
An accordion component with the modules of the course syllabus was added to one of the top areas of the course page. This proposal was not completely implemented, because the institution is used to asking users to fill a form to get full access to the course syllabus as one of the main methods of generating leads.
An accordion component with the modules of the course syllabus was added to one of the top areas of the course page. This proposal was not completely implemented, because the institution is used to asking users to fill a form to get full access to the course syllabus as one of the main methods of generating leads.
Best Practice to "Emphasize Your Strengths and Achievements"
A section was added with the following information:
- The courses are certified by the Education Ministry;
- Descomplica has more than 100,000 postgraduate students, leading the digital marketing;
- Descomplica has been ranked one of the most innovative companies in the planet according to the Fast Company.
A section was added with the following information:
- The courses are certified by the Education Ministry;
- Descomplica has more than 100,000 postgraduate students, leading the digital marketing;
- Descomplica has been ranked one of the most innovative companies in the planet according to the Fast Company.
Best Practice to "Provide Honest Reviews"
Until I left the company, honest reviews were not added to the website. The pedagogical team had access to very few student reviews (about 4 out of 100,000 students.) Embed reviews from external tools (Google Reviews and Reclame Aqui reviews) were not accepted by the marketing leaders, who were concerned about mixed reviews affecting conversion rates. Therefore, a primary basic solution proposed was to design a section with general reviews of the institution, not course-specific reviews.
Until I left the company, honest reviews were not added to the website. The pedagogical team had access to very few student reviews (about 4 out of 100,000 students.) Embed reviews from external tools (Google Reviews and Reclame Aqui reviews) were not accepted by the marketing leaders, who were concerned about mixed reviews affecting conversion rates. Therefore, a primary basic solution proposed was to design a section with general reviews of the institution, not course-specific reviews.
A few proposals could be optimized and may be different from the current website as I am no longer in the team.
DEVELOPMENT, LAUNCH AND A/B TESTING
Development
After the adjustments based on the data from the usability tests, the development team could finally implement the design. Several components had to be adapted/simplified to enable delivery on time, but all adaptations have been registered and are being gradually implemented by the development team.
After the adjustments based on the data from the usability tests, the development team could finally implement the design. Several components had to be adapted/simplified to enable delivery on time, but all adaptations have been registered and are being gradually implemented by the development team.
A/B Testing
After the site development, we ran a comparative A/B test: 'previous design' versus 'new design' (50%/50%). A few weeks later, we had reached relevant statistics indicating the victory of the 'new design':
• Direct sales conversion rate increased 23%;
• Booking rates increased 35%;
• Lead capture rate increased 17%.
Direct sales conversion rate
↑23%
Bookings rates increased
↑35%
Ongoing Optimization
After the initial A/B testing was finished, the new design was approved and officially launched. From there, the CRO team started performing new tests and evaluating new hypotheses including data from the log analysis. Check out the case for the ongoing optimization process in this portfolio.
