top of page


  • Discuss synthesis of User Testing

  • Competitor Analysis

  • UX Recommendation

  • UI Style Guide

  • Mid-fidelity mockup

  • High Fidelity Mockup

Timeline & Team

  • October - November (4 Weeks)

  • UX Designer x3 




Many users who visit Mavensdotlive do not commit to taking classes because the website does not clearly represent the brand and classes offered


Mavensdotlive offers a website platform for education courses. The current issue with the Mavensdotlive website is that users aren't taking action. Thus, Mavensdotlive decided to collaborate with UX designers to adopt UX knowledge on their website renewal project. 


Insights from the 13 user tests


To see what made users stop navigating the website, Mavensdotlive conducted user testing with 13 users. From the test result, we found the repeated responses as above.

"It has limited information about the class and instructor on the card."

Insight 1

Gaps between online learning platforms


By analyzing a similar platform, our team could get helped to understand the competitors’ strengths and weaknesses compared to the Mavensdotlive website and find a market gap.

Mavensdotlive-Competitor Analysis 1.png


How might we encourage users to stay on the site for longer and revisit it frequently?



Card soring + A/B Test 


I decided to use card sorting to re-organize the navigation since the current website has many categories that need a systematic structure. By using card sorting, I made the navigation structure correspond to the users' expectations and grouped the categories to be understandable for the users.



The Style Guide


The existing brand colors were Black and White. The existing CTA button’s text color was Red, and we proposed changing this to purple to increase contrast. Our team agreed on adding a yellow to the palette because we want our users to feel that taking a class is enjoyable and can be fun on our platform. Also, our team agreed on the Poppins typeface because it matches the Mavensdotlive web interface. It’s simple, readable, and easy to navigate.

Mavensdotlive-UI Style Guide.png


High-Fidelity Mockup Proposal

Mavensdotlive-High Fidelity Mockup 1.png
Mavensdotlive-High Fidelity Mockup 2.png




Due to the time differences between team members in different countries, it was a bit challenging to establish a meeting schedule that suited everyone's availability. Despite this, we had to ensure that all the necessary tasks were completed within a strict timeframe. As team members, we were mindful of each other's time zones and collaborated to find a schedule that worked for everyone. Apart from using Zoom video calls, we also utilized WhatsApp and Figma comments as means of communication. By working closely together and leveraging all available tools, we were able to successfully complete our tasks as a team.

Take away

  1. We can work better by accepting each other’s feedback and sharing ideas without fear.

  2. Everyone’s ideas and processes are valuable to get user-centered solutions.

  3. We learn that it is important to put a certain amount of time into each process and take the deadline seriously.

bottom of page