Kahoot! is a game-based learning platform bringing fun to 1+ billion players every year at school and home. Users access "kahoots": player-generated multiple-choice quizzes via web browsers or the Kahoot! mobile app.
My brief was to update and refresh the mobile app home screen. This screen plays an important role for onboarding and activation of users. Emphasis on the UI design should apply within proposed solutions.
Students use the app weekly to join live games hosted by their teacher. An aim is to accelerate Kahoot!’s viral growth by players becoming creators, and hosts of Kahoot! games to play with fellow users.
Highlighted within the design brief were two key objectives. These two user goals centre around creation and self study. Focusing on these goals enables the updated app design to capitalise on areas for growth.
I gained a familiarity how the current mobile app works through self-discovery testing. In this process, I bookmarked positive design attributes. These were when I found the app to flow with ease. I noted typical conventions within the primary user journey. This was from the on-boarding screen functionality to the home screen.
I documented aesthetic design items that drew my attention. I compared visual elements of the current UI against the brand guidelines. I found the brand ethos singing out through colour and illustration.
I was a new user to this mobile app. I found using the app very intuitive to understand and navigate. I was able to find many positive attributes. These I would observe and refer to when making considerations in the next design stages.
It was important to additionally analyse the current user-onboarding journey and feature screens. From this I built a more holistic knowledge of how the user will flow to the home screen.
Within my discovery process I created the following design targets. I would use these targets as reference throughout the following design stages.
This ensures to keep the app's positive attributes in place. It highlights areas to amplify and extend where existing attributes add strong value.
Along with positive attributes I bookmarked all design elements subject to possible improvement. The focus was on UI, app features and visual elements positioned as on-screen content.
The user's eye is first drawn to the subscription label (K!+ AccessPass) instead of the main quiz titles. This is due to two main factors. One being the information hierarchy applied, with the subscription label positioned first. Another factor is the appearance of the subscription label itself. The white typography on a black background has a high contrast ratio.
These factors contribute in making the label dominant within the current card layouts. I decided to review the visual hierarchy of these layouts for further development.
This process of discovery through initiated research and analysis was critical. I gained a deep understanding of how the app currently functioned. I tested how key user flows operated. I observed how the associated feature cards or buttons performed.
I identified many improvable attributes specific to the UI design. An example is about how contrast and tonal variation of visual elements displayed. I found a big range of variations in the appearance of cards and buttons to key user features.
I created two high-level design targets. These were for reference throughout the following stages of my development process.
This helped focus my thought process and a clear understanding of the requirements. It created simple intentions to observe when conceptualising my design solutions.
The discovery process was critical for analysing and understanding the current product. I gained a first-hand user perspective of what the app felt like to use and of the home screen's features. I formed ideas around the attributes identified for improvement.
The design targets formulated from this analysis into my testing experience and findings. Having a clear set of targets informs and guides the process of designing. This focuses ideation around specific concepts and areas of direction.
Next I explored the improvable attributes highlighted from the discovery phase. I generated ideas to how these areas might develop aligning with the set design targets.
I observed how users were navigating the current on-screen content. I watched how different target users flowed through the app. I noted how they interacting with the current features.
Usability testing was key to observe and clarify the user goals and behaviours. I gained understanding of the different user flows present in the app.
This information was critical to establish before any amended positioning or workflow changes. I then outlined the prime flows and how different use cases related to one another.
Based on my research findings I saw an opportunity to restructure the current app. Content categorises around the four main ways of using the app.
I would priorities the positioning of 'Create' and 'Study' within the tabs bar. The new buttons have the same scale as the current 'Join' button.
This gives the features greater prominence and easier navigation for the user. The buttons have large affordances for emphasis and functionality.
I was curious to understand if a floating button could function as an alternative option. This may draw emphasis to a new feature with clear positioning and proximity to the screen's edge.
I designed the new button components to align with the current app's 'Join' button for style and sizing. These alternative approaches to navigation formed prototypes for usability testing.
I found users had difficulty with distinguishing the buttons from the on-screen content. I experimented with a range of different visual UI treatments. This included changes of colour to the background and individual components.
I concluded this method was not appropriate due to the clashing of visual elements.
Users understood this tabs bar prototype when tested. They navigated between the new tabs feature buttons and the existing on-screen content.
I decided to pursue using this kind of tabs bar for the initial new UI and mid-fidelity prototype.
With a new on-screen architecture tested I next considered the information hierarchy. This assigned importance to each identified feature. I formed a new order for content assigning a position on-screen and/or within the tabs bar.
Prioritisation of content enabled greater on-screen prominence to the 'Create' and 'Study' features. These items could intersect with 'Discover' content as currently in the app.
This way their use cases have enhanced opportunity for user engagement.
This prototype provides a functional and testable representation of the new home screen. This prototype employs a new UI, tabs bar and design of feature cards. Design includes responses to testing outcomes and ideation around research findings.
The new UI responds to the tone and contrast issues identified in the research process. Brand guideline colours with large contrast values separate elements from foreground and background.
This results in creating more depth on-screen amongst the displayed content. Feature cards now sit forward and have more visual strength.
Feature card designs emphasise the brand's bold expression and feel. Yet they now intend to 'turn the volume' up on the visual impact.
Illustrations are bigger and have more colour to draw the eye of the user to brand features and products.
The new quiz wireframe addresses the clash discovered between image and subscription labels. This simple division of information is an important change. Labels move to the top of the cards. This directs the eye towards the main central image and quiz title.
The result helps users in first understand what a product is, instead of the kind of subscription a quiz has. The image has full impact without any conflict to extra information.
With a new grid system applied this means more content of cards positions within the screen. This better represents quiz cards and indicates elements that are scrollable.
Typography and colour are critical to the design treatment. All wireframes have colour tested for accessibility. New card designs intend to direct users to the now re-positioned features on-screen.
These design decisions aim to creating more traction to the 'Create' and 'Study' use cases.
Beta-testing of the prototype with focus groups representing the target user. Different use cases isolated for comparative A/B testing. Focus on more granular details within certain flows and features. Helps better understand where friction exists or specific edge cases.
Further usability testing produced a wide range of valuable feedback. I found this a great direct way of discovering ideas from participants. I analysed the qualitative feedback for viability before developing certain suggestions.
Adding a dark mode control and feature instructions make a more user-focused product. These features develop and incorporate within the new prototype wireframes. New additions then undergo more testing for functionality and response feedback.
Next steps are further beta-testing new initiatives responding to the test user's suggestions. This will focus on amending any areas where friction exist within current user flows.
This process continues until comprehensive data exists to support functionality of a features. Once established the features can release.
