Kikori
Making experiential education accessible to educators around the world
Kikori is a community driven platform that globally empowers educators with experiential, social, emotional learning (eSEL) capabilities. Their mission is to equip educators with the means to holistically connect with their students and meet their unique needs.
To further support this goal, Kikori sought out to redesign their existing web app.
Roles
User Experience (UX) Designer
User Interface (UI) Designer
Researcher
Team
Olivia
Hawah
Glynis (Dev)
Project Duration
May - August 2023
10 Weeks
Deliverables
Competitive analysis
User interviews
Persona
User Journey & task flows
Site map
Low-fidelity wireframes
High-fidelity mockups and prototypes
Design system
Usability tests and findings
Challenge
Create an intuitive way for educators to be onboarded and interact with the dashboard and be able to find activities, playlists, and other essential features of the product.
The problem was that the current web application mimics the mobile application which led to multiple issues regarding space utilization and usability. On top of that, many new and existing users often fail to utilize the many key features available on the platform.
I needed to dive deeper into understanding why many of the essential features of Kikori was underutilized. I began by attempting to understand the main users of the platform and how it compares to its competitors.
Problem Diagnosis
I began by centering our research on the competition space, after conducting a stakeholder meeting, in order to assess how other platforms are addressing similar issues. A total of 4 direct and indirect competitors were analyzed.
Market Research
User interviews, involving educators - both new and existing platform users, were conducted via video conferencing tools. Participants answered questions and performed tasks on the current web app, providing qualitative insights. This helped us better understand their interactions, challenges, and motivations.
We then took the qualitative data and created an affinity map to identify patterns, themes, and help draw insights to inform our design decisions.
User Research
Redesign the web application in an intuitive and effective way that helps facilitate the use of Kikori’s key features.
Increase the count of active new accounts while expanding and maintaining the existing user base.
Limited time and budget.
Being able to navigate through the use of a menu was important to users.
Users wanted more accessibility and ease of navigation to key features.
Most utilized part of the product is the activities page but led to confusion as it was similar to the playlist section.
Findings
Using the data gained from user research I created a consumer profile representative of the target audience.
Creating a persona helped bring some clarity to the motivations and concerns a typical consumer might have, which would become a crucial reference point as the designs and functions developed.
Defining the Users
By creating and analyzing the journey map of our persona, I was able to identify some key emotional and operational moments that Kikori needed to address in order to achieve their goals for this redesign.
The Journey
“How might we design a web app that is quick and efficient for educators to want to use as part of their curriculum?”
I created a site map and user flow, using the collected data, to help organize the key contents within the prototypes. This not only helped us understand what needed to be in the later prototypes but also kept the information and function structure uniform while portraying the potential journey a user may take while interacting with the prototypes.
Building a Foundation
Rapid sketching allowed us to explore the design patterns utilized by competitors that could transition into Kikori to maintain familiarity. This would also help me in deciding what direction to go in terms of design, usability, and functionality.
Visualizing the Data
In response to user feedback and market research, I created multiple low-fidelity wireframes for stakeholder review, enabling quick assessments of different designs and overall user journey.
Envisioning a clearer Integration
Mid-fidelity prototype testing gave some insight into how users would expect on completing the selected tasks. By examining how they interacted with the prototype and having communication with them about their expectations and their pain points, I knew what adjustments needed to be made. These adjustments would create a research-proven foundation for the later iterations.
Findings
The onboarding tutorial created an immediate friction point for users after sign up.
Users experienced difficulty in distinguishing between the activities and playlist pages due to the designs resemblance.
The vertical left-side navigation effectively contributed to an intuitive navigation experience.
Users expressed relief in response to the minimized need for excessive vertical scrolling due to the use of horizontal scrolling carousals.
After analyzing the data gathered from testing I updated the prototype and increased its fidelity with a design system. Also after a suggestion made I decided to get rid of the gradient background and go a more traditional route as per the market research to increase accessibility. The high-fidelity prototype would provide stakeholders and users the experience closest to the real product before implementation.
Implementation
Lessons Learned
I went into this project assuming that the challenge would only be to redesign the dashboard and overall layout of the web app. However, I quickly learned that many users didn’t realize the full potential of the app due to the lack of intuitiveness and direction. This realization lead to a comprehensive overhaul of information presentation and navigation.
Users identified the tutorial to be a friction point and expressed a preference for a plug-and-play experience characterized by intuitive navigation and familiarity, which aligns better to their busy schedules.
New users quickly would give up on the existing web app after sign up because of the ambiguity between some pages and lack of clear navigation cues due to the imitation of the mobile application.