Award Winning German EdTech Website

Overview

Mathebibel is a German Award-winning Mathematics learning platform. Helping 1M+ teachers and students to learn Math in the German language easily.I worked on this project as a Web UI Designer. And my responsibilities were to redesign their website to increase conversion rate and user experience and also provide responsive versions and branding material. I worked in collaboration with the product owner along with the developers. My working tools were Figma, Tailwind CSS, Slack, Trello, etc.
‍

Challenge

The challenge was to design a UI that engage website users and provide a very good readability experience. And convey a targeted message so that they are convinced. And convert users into customers.Why because the problem was users of the website left the website within 2,3 minutes after landing.
‍

Solution

Based on the user's feedback and analysis I suggested a solution to redesign the whole website interface and sell website content in a Pdf. So if users wants to read the content without ads they can read it easily. And the website will generate revenue with the help of pdf selling. Moreover, when users are using the ad blocker.
‍

Research Findings

Conducted both Qualitative and Quantitative research for this project. To analyze the data and identify the pain points of the users from the interviews.

User Painpoints:

• Bad User Interface.
• Too many Ads.
• Content is difficult to understand.
• Too many popups for an email subscription.
• User receives spam E-Mails.
• Content search is difficult.

Key Findings:

• Users need a beautiful UI for a better reading experience.
• Need eBooks for the chapters.
• Show complex math formulas with the help of images or diagrams.
• Google ads are in a limited place.

Design Process

Using a common design process where we start from the discovery phase and understand the empathy of the user or the challenges they are facing. So I started with User Interviews and feedback collection on the existing designs.

• Sketched different low-fi versions of the website.
• Designed a style guide and rebrand the whole website.
• Converted low-fi designs into hi-fi designs.
• Created a clickable prototype and tested it with the users.
• Gathered feedback and made iterations in the design.
• Created a responsive version of the website.
• Developers handoff.

User Testing

Conducted A/B testing with 6 users for the landing page. The main goal for the first round of testing was to see if the readability of the content is satisfactory for the users or not…

‍Key Findings:‍

• 6/6 users found the new design is a massive improvement.
• 3/6 of users thoughts on the new design of math categories were very helpful for understanding.
• 4/6 of users liked the concept of Ebooks for separate chapters.

Results

After testing different versions of the designs with the users. We launched the final version and the results we gathered in which...– Reduced bounce rate by 30%– Increased the conversion rate by 15%.– Got 90% positive feedback on the user satisfaction survey.

Key Learnings

As a Designer is always challenging for me to work with new tools and technologies that I don't know.E-g in this project I was assigned to convert Figma designs into code using Tailwind CSS. So I accepted the work and start learning Tailwind CSS by doing. And learning this new framework from my client helped me a lot.

Client Feedback

Malik is a highly talented UX/UI designer. His designs are modern and clean. But what I liked most working with Malik was his perfectionism: He’s very detail-oriented and passionate. The communication was great and I am looking forward to work with him again in the future. If you want someone extraordinary in your team, he’s your man!

‍

‍

‍