Edunexis is a Philippines-based edTech company that enables schools to improve lifelong learning skills (social, physiological, emotional, cognitive, contextual, and conative) through its learning platform, called Kuriocities.
UX Research, UX Design and Testing
Jul 2018 - Dec 2018 (6 months)
Team:
Me, UX Designer, Founder & CEO, Project Manager, Engineer / development team lead
Overview of the problem
The current teachers dashboard of Kuriocities had a poor user experience. The task success rate for the core features of the dashboard was only 30% with a major drop-off of 90% in the assessment feature. The overall interface and interaction needed a re-do. My task was to identify the root cause of these issues.
We created an IoT and service-based ecosystem, called
Laundry-as-a-Service (L-a-a-S), that focuses on creating a better laundry experience for University Students and Property Managers, while also creating a service-focused business strategy for GEA.
Outcome
I redesigned the dashboard and improved the task success rate from 30% to 96%. With the successful re-design of the dashboard, I was approached to design the learners app of Kuriocities as well. In the end, I redesigned the two systems of Kuriocities: Teachers Dashboard and Learners App.
We created an IoT and service-based ecosystem, called
Laundry-as-a-Service (L-a-a-S), that focuses on creating a better laundry experience for University Students and Property Managers, while also creating a service-focused business strategy for GEA.
The Design Process
01. Meeting with CEO and Engineers
We started this project by learning about Edunexis and Kuriocities. For this, we scheduled a meeting with the CEO. Next, we organized a meeting with the engineers to understand the current system (Kuriocities Educators Platform) they built. Here are a few questions we asked:
02. UX Auditing
As our second step, we (me, a UX Designer, Project Manager) conducted an in-depth analysis of the current Kuriocites Educators Platform. We did a heuristic analysis and cognitive walkthrough of the product to identify usability issues. We prepared some initial sets of questions to clarify our doubts about the product flow. These steps helped us map out the current user flow.
03. Understanding Target Users
04. Evaluation Research
To empathize with the actual users and understand their painpoints and expectations, we conducted evaluation research by asking five novice teachers to use the current system and perform seven tasks. We noted the time taken for each task and calculated the success rate.
User Testing
Task Success Rate = 30%
Current Screens
Key points from user testing
Challenges identified from the research
Discoverability
Most users had difficulty finding features. There were a lot of usability issues that led to not knowing certain features.
Clarity
Most users were not clear about the next steps they should take to accomplish a task. The flow for a task increase the cognitive load.
Poor UI
The content was not organized poorly. It looked cluttered and chaotic. The overall interface was outdated and difficult to follow.
The Problem Statement
How might we better organize the content of the teachers' dashboard to make the features more discoverable, and keep the flow subtle and clear?
My Thinking Process
To identify opportunities and define features, I gathered the findings from my user research (user's frustration and needs). From these, I was able to visualize the dashboard and define the user flow.
Current Design Revision + New Plan and Prioritization
Once I created the rough flow for new user journey, I (along with my Project Manager) revised the current design to pin-point / revise the usability issues. Then, we conducted a few meetings with the CEO to define priorities and plan our next steps.
After these meetings, I was able to set task-based goals based on the priority of each feature. By narrowing down my research into these goals, I was able to ensure that my design decisions were grounded in my user research and catering to the user needs.
Building the Information Architecture
We created sitemap before starting the low-fidelity mockup.
Iterations: Low-fidelity Screens
I started by doing a couple of whiteboarding sessions with my Project Manager to define the use-cases, sitemap, and possible structure of the screens. I quickly created the low fidelity screens and together with the client, the PM, and the other designer, we iterated on the design details for the flow of 'Creating new activity', 'Adding questions', and 'Assessing the learners'. We went through a couple of iterations to come up with the flow that required minimum time.
Given below are the overview of the screen iterations I went through.
issue: Reduce Cognitive Load and Discoverability
Create new activity
1. Need to distinguish activity introduction and detailed description.
2. Users want to keep track of where they are in the system/ website.
3. Breadcrumbs make it easier for users to track their location within the website.
Add questions to an activity
1. Users are not sure about the number of questions they will be adding to an activity.
2. User have difficulty in sorting questions and need to scroll more to edit/delete a question.
3. Users are able to sort questions, and edit or delete questions easily.
Dashboard
1. Users want to invite learners quickly and easily. Also, they want to distinguish self-created activities.
2. Users want to keep track of where they are in the system/ website.
3. Breadcrumbs make it easier for users to track their location within the website.
issue: clarity
Distinguished activity view
1. Users want to keep track of where they are in the system/ website.
2. Activity details is separate from activity list and users can remain on track.
Visual Design Guidelines
In the high-fidelity design phase, we started by collectively working on building a cohesive design system, while working building the product simultaneously. We kept adding components to the guidelines as we iterated over the designs.
High-fidelity Screens
After 3 months of collective effort and iterations, we came up with the final design solution of Kuriocities Teachers Dashboard. Here are the user flows for teachers experience.
issue: Poor User Interface
1. Quick and simple activity creation flow
A simple and step-wise flow for teachers to create an activity with distinguished and properly labeled form fields.
2. Add unlimited questions
Teachers do not have to limit the questions for an activity. They can add as many questions as they want. Also, they can view and edit each question in a few steps.
3. Drag and sort questions
In addition to creating, editing, and deleting questions, teachers can also easily sort the questions by dragging and placing them onto the right spot.
4. Activity list view is separate from Activity detail view
Users were confused because the activity list view and activity detail view was on the same page. The new designs separate them which makes it clearer for the users.
Prototype for the flow of creating a new activity and adding questions is given below:
Final Usability Testing
Although, I continuously tested and iterated on the design with the team members, I still wanted to make sure that the "activity creation" experience and "assessment" experience worked well for the users. For this, I conducted the usability testing with 5 teachers and 1 novice user to check if the flow made sense. Given below are the results:
Project Success + I was approached for the next project
We received a positive response from all the testers. On the successful completion of this project, the client approached again to help them build the "Learners App", which was the second part of the learning system of Edunexis.
Ps: I, along with my design team, created the "Learners App". Our clients were happy with the product and this helped is strengthen our relationship with the client.
Next Steps
Track metrics
The next step is to track the drop off rates and time taken by new users. Also, another way to improve the experience is through periodic open feedback from the user.
Advanced search
Currently, there is only a general search mechanism to search activities. We need to design advanced search feature to improve the search experience.
Key Learnings
•
Communication with the cross-functional teams.
I learned that including everyone from the beginning of the project helped us define the project scope and MVP. We can keep on track that our design aligns with the technical realities.
•
Keep iterating.
Rushing into the final design only brings new issues. I learned that it is wise to plan and prioritize content and focus on designing one feature at a time and keep iterating on it until we reach to a reasonable and clear flow.
•
Precision in your design .
It is a good practice to talk to the developers in the early stage and explain them the designs and interactions so that all of us stay on the same page. This way, we can improve our design-handoff methods as per the front-end team.
