Knowlex
Overview: Knowledge is probably the greatest power of all. Affordable education has become possible over the years even thanks to technology.
Role: UX Researcher, UX/UI designer
Toolkit: Figma, Adobe CC, FigJam, Pencil and paper
UX Research
Overview
• Background
Knowlex is an end-to-end app where users can exchange knowledge for other knowledge in three simple steps:
- Teach what you know about
- Earn credits
- Purchase lessons you want to learn about
*Since early stage, the idea was to create a flexible system, where users who don’t want to teach can still earn credit in alternative ways or eventually just pay for it.
• Research Goals
We want to investigate how people relate to EDtech platforms, so that we understand how users can swap different kinds of knowledge through a tech product.
• Methodologies
Competitive Analysis
User Interviews
Competitive Analysis
Click to enlarge
User Interviews
• Overview
Five people were interviewed: 2 Teacher/Student users; 2 Student users; 1 Not really a user. All interviews have been conducted remotely by using Google Meet
• Affinity Mapping:
Click to enlarge
Research Findings
Finding the right angle
In-depth training and soft skills
Power of community
The need of social contact
Timing your freedom
Studying at your own pace
Having too much as having nothing
There’s a need to categorise
Persona #1
Nick Green
31y/o Administrative Consultant - Massive use of EDtech products
FREQUENTLY-USED APPS
Bio
After taking Bachelor and Master Degree in Law at the University of Bristol, Nick got immediately a job as Consultant for a huge company and he’s now willing to follow that career path. He’s expected to constantly improve his soft skills as well as boost his knowledge concerning Administrative low. That’s why he makes massive use of EDtech apps. He recently got married. Being able to easily study from home in his spare time is game changing.
Goals
• To squeeze learning new things into work tasks and his private life
• To go back home right after work and possibly avoid the commute for eventual in-depth training.
• To have access to a Community where he can get immediate feedback on classes and projects
Frustrations
•Scheduling his time around education tasks is sometime too demanding and he ends up not giving enough time and attention to the assignments
•He’s afraid to get lost or fall behind, especially when he feels he’s at beginner level for a specific training
•Sometimes he feels overwhelmed because there are too many courses he wants to follow
Persona #2
Christina Mottershead
35y/o - Visual merchandiser manager - Skeptical User
FREQUENTLY-USED APPS
Bio
Christina has been working in the retail industry for 5 years now. She’s been dreaming of a career change recently and would like to become a Project Manager instead. She’s facing a hard time in her life, because she should quit her current job in order to have time to attend classes. At the same time though, she will need money not only to pay for the course fee, but also to actually live while she’s busy with classes.
Goals
• To always have face-to-face meetings with professors/mentors when learning new things
• To take a course in Project management
• To get certifications when studying in order to straighten up her CV
Frustrations
• She fears that, without a real deadline, she would end up with procrastinating and eventually failing
• She feels quite discouraged in taking the project Management course by the cost of it
• She worries that she could feel alienated when not meeting in person colleagues and professors
UX Design
Prioritisation
• Project Goals
While Business goals were mainly focused in gaining as much users as possible by making clear how the application works, I had a deeper vision of what users wanted and I was able to identified where the two of them aligned.
Click to enlarge
• Features Roadmap
After a first draft of P1 features, I’ve realised I had to reduce the effort to just as enough features as MVP needed. In the final version I’ve included basic features such as signup, settings and search as well as special ones like become a teacher or credits system
Click to enlarge
Information Architecture
I’ve built a sitemap considering primary, secondary and tertiary navigation.
Firstly, I’ve developed the primary navigation by defining which main actions users might have taken: teach, learn, credits and my classes. Secondly, I’ve explored and expanded each one of the those sections.
Click to enlarge
User Flows
I’ve immediately identified my two user flows:
• Become a teacher
• Redeem your credits
The idea here was that for users to be able to actively use the application, they needed to teach and learn
*Ideally, there is a third potential user flow I would have liked to explore: Earn alternative credits. However this was MVP, so I’ve decided to go for the main ones.
Task Flows
After designing user flows, it was quite straightforward to build up task flows. What I did was to expand in depth and explore users actions even further:
• Submit your application to give classical guitar lessons
• Use your credit to purchase a Spanish lesson
#1 Submit your application
Click to enlarge
#2 Use your credit to purchase a Spanish lesson
Click to enlarge
Wireframes
For the first flow, I’ve developed homepage and application form, which I’ve divided in 4 main steps: General information, Past experience, skills and additional information.
For my second flow, I’ve focused my attention on student profile, categories and teachers, booking system and checkout.
UI Design
Brand Identity
First of all, I’ve explored potential naming solutions and marks for my logo. Eventually, I’ve decided to go for the sphinx, symbol of great intelligence and wisdom in the ancient Egypt. The name Knowlex contains the words knowledge and exchange.
UI Library Components
I’ve created a colour palette with 1 primary, 2 secondary and 3 neutral colours. The choice for typography has fallen on Mulish, a sans-serif font with a decent x-height for legibility.
With those elements added to my low fidelity wireframes, I made my way into high-fidelity wireframes.
High-fidelity key-screens
Usability Test
Prototype
I’ve mainly worked with components and variants throughout the entire project. For that reason, it was quite straightforward to build up the prototype.
In order to keep the flow nice and neat, I’ve mainly used the same mild transition effect for every screen except for Intro and Get started transitions, where I went for a more bouncy effect to give the idea that something new is about to start.
Additionally, I’ve built a loading animation to make the prototype experience more realistic
Outcome
Overall, usability test was quite satisfying. The general flow proved to be viable. I made a few fixes that aimed at facilitating the flow even more.
Click to enlarge
Iterations
• To improve Create an account experience, I’ve added an activation message: a dedicated overlay with validation code to input
Click to enlarge
• To improve Application form flow, I’ve created a loading animation and a supplementary message that states the successful upload.
Click to enlarge
• To improve Checkout experience, I’ve differentiated info about Your credit and Value of lesson in terms of colours. I’ve also added Remaining Balance details
Click to enlarge
Test Project Prototype
Key Takeaways
• Challenge
- To find the right angle together with an interesting story to tell when dealing with a widely explored industry such as EDtech
- To make a huge effort in prioritisation when creating an MVP
- To think about detailed aspects users might need when designing an application form
• Lesson learned
- The effort of keeping it simple can make a difference in the final outcome, starting form flowcharts up to the prototype experience
- The importance of a well-designed UI library, that is built up using components, variants and frames
- Designing in a consistent way can truly help speed up the whole process