1. Exercised content strategies by adding CTA to collect leads
2. Optimized the information architecture by simplifying the navigation menu
3. Unified color story by keeping UI components cohesive
Figma
Webflow
People don’t buy WHAT you do, they buy WHY you do it.
Simon Sinek
As a language teacher, I could probably survive well in the classroom by bringing something new to the table once in a while, thus EdTech is definitely the "force" with me. Among the EdTech tools I have used (Quizlet, Quizizz, Wordwall, you name it) , Kahoot is definitely a memorable one because of its game design. One time, I was trying to play it and so I googled the product and their homepage appeared as the first result. At first sight, I thought I was on the wrong website because the logo was not the Kahoot purple I used to see on their app. Then, I was trying to find the play button and after a quick scan, I found it next to the sign up button. So it took a while for a naive teacher to scramble to present the game to his student thinking that it should have been easier. Later I realized that they had a separate website for playing the game, my bad!
Despite this incident, I still like Kahoot because of its spirit of "by teachers, for teachers". As a language teacher and an active learner myself, I happen to be a user of another app of Kahoot's called "Drops" for learning languages. Later when I started to learn UXUI design, I thought to myself, "maybe I could redesign Kahoot's home page so there wouldn't be any play button incidents". So this is the beginning of my side project and I want to document some iterations here.
It is understandable to want to display all options so everyone's need can be met, but boy every option is trying to grab my attention, and I am just a teacher trying to find helpful resources for my students. Applying Fitt's law would be a good starting point to reduce the time required to complete desired tasks. Below is the original navigation menu
I narrowed down the menu options to just keep the essentials: features (school, at home, work), blog, and the play button. The reasons being:
The main target user of the product should be school educators and cooperate trainers, so the first layer should just show the categories: school and work, and the rest of the related content should be placed on the second layer or later hierarchy of the menu.
The play button is where users can join a game and should be placed in a more noticeable place.
The blog is an important source for content marketing and SEO, and so it should be placed in the first layer to attract more organic traffic
In the hero section, the original website uses card design to display the content. A card UI is designed to help users navigate through product categories at ease. The hero section has 4 cards packed with texts and the type face is a bit small. Below is the original hero section.
If we change the layout into a vertical display as below and use an independent section for each content category, it would allow the hero section to breathe and the readability would be better. When users click the top menu option, it can link to each content and users can stay on the same page without bouncing out.
The blog section is very important. You want to make sure people read the articles and make referrals to your website so you have more organic traffic. This is why I chose to place it in the menu section rather than in the footer as per the original design. Aside from the hierarchy, the original blog post design applies 4 Kahoot colors as the background. Each blog post also has a thumbnail which is usually a color photo. Placing the thumbnail and the bright-colored blog post right against each other makes the whole section look dense and overwhelming, and readability is also affected. Below is the original blog section.
In order to balance the color contrast, I used black with the white body text to form a basic contrast so it does not clash with the colorful thumbnail. Also, the author's info bar was moved down below the article title so the title would be the first to be seen. This way the article itself was the star.
Since we always want to have customers try the product, why not use CTA like "let me try". In addition, if any user scrolls down all the way to the footer, that tells us he/she might be interested enough to use the product (in Kahoot's context, that is learning), so a CTA "stay learning" should be necessary at the footer to attract leads.
When using the app, you can not miss the question options because they are upmost brightest colors of red, blue, green and yellow. The colors are memorable and together they do possess a cartoonish quality that gives the brand more personalty. I decided to follow along with these 4 colors. One problem is that the 4 colors are so strong they clash with each other. After a few experimentations, I found tinting them would solve the problem while still keep the bold personality.
The 4 Kahoot colors represent the answer options on the app, I wanted to extend the colors and apply them on the little monsters I created.
Next, I had the 4 colors repeated in micro animations to enhance CI (cooperate identity). I created an animation incorporating the 4 colors to strike a balance between the background color and the other visuals.
For the titles, I used Gochi Hand designed by Juan Pablo del Peral. The font does have that cartoonish quality Kahoot possesses, and it is a non-serif type still providing good readability. For the body text, I went with Roboto, a font created by Google, so generally the text look good across both desktop and mobile devices.
.jpg)
With Figma, I used the canvas with 1920px width, since I will be completing the project myself using Webflow. It would make sense to realize RWD for iPad and mobile devices directly through it.
A cohesive CI such as logo, color scheme, and key visual should be applied to the same product line, so customers can identify the product and make the connection to its service.
As the product expands and has related services (like Facebook to Meta), an organizational hierarchy should be taken into consideration when designing new CI.
A simple design can reduce the visual overload, however, it should also bear the responsibility helping users navigate it well. A balanced approach of simplicity and functionality to help the current Kahoot page can continue to be developed.
Since CTA is an important source of lead generation, it should be present in a more noticeable place, like the hero section, where the the scroll depth is usually optimal from the UX perspective.
