Kvliah Webapp
Online learning platform for college student
Kvliah is an online learning platform that focus on college education field. As too many student that struggling on getting a good grade in college, especially in engineering major, Kvliah is estabilished to help those student by giving courses from trusted tentor that already have a good grade on the specific subject/major, with videos as the main media.
Project Period:
Q3 2020
Project length:
3 Months
Status:
Developed
Challenges
Make users “focus” on learning content
By looking into other specific learning platform that already exist on the market and also do some research on kvliah’s potential users, I found that it would be a bit hard for the user to navigate around the platform itself. This thing are caused by many factor such as content layout, crowded design element, too overwhelmed architechture, and a view more. So I decide to make a quite “clean-looking” design with the main purpose is to make the user can focus more into the learning content rather than being overwhelmed with the UI itself.
Styleguide
The importance of hierarchy
Since Kvliah already have it’s own logo, then it is a no brainer for me to pick the blue and yellow color on the go, with white as dominant thing because I’d like to keep the clean style as what I purposed this webapp to be. The simple card layering layout with touches of flat illustration helped me to give the pages a user-friendly look, but also give more hierarchy so the user can understand how to navigate throught it in the matter of seconds.
COLORS
TYPOGRAPHY
UI COMPONENT
ILLUSTRATION
Original illustration by storyset on freepik.com
Landing Page
Welcoming user
to their choice
When user arrive at the landing page for the first time, they must be seeking that help to get a good grade on a specific class. So, i put the array of some popular courses on the top section to increasing the possibilites of the first-timer user know thet kvliah will cover what they need. For those who are not sure yet with the platform, there’s several ways to make a reasonable choice futher down the page with call to action on almost every sections.
Dashboard
Show it at a glance
A solid presentation of the courses is important to the users. Besides that we wanted to provide the user with just the important information at a glance, so they doesn’t have to dig deeper in detail pages every time. Unless for those who using Kvliah platform for the first time, sure they will have high tendencies to look down into the detail.
Course Detail
Easy to navigate
With the main goal is to focusing on experience, I start it by putting the course’s hero image in the spotlight. The detail it self are separated into sheets system with celar navigation on the top, so it will not feels overwhelming for the users. The timeline list on the right side of the video also make the whole subject easier to navigate.
Checkout Page
Crystal clear step by step
Once the user have found the perfect course, they can get their first way into a good grade in a few simple steps. It comes with transparent pricing, including discount and also voucher sale calculation.
Mobile Responsive
Fit in any circumstances
Since most of the users are keen to open the webapp through their phone, I make a different approach for the mobile responsive design. Not just the re-arrangement, it takes the whole desigm amd layout optimalization so the webapp could act and feel like a native app on the mobile view.
Usability Testing
Yes, it is tested!
Before handing off all the design to developers, there’s a test that will be needed to validate and make sure that this design are friendly enough for the user. Apart from getting good feedback, we also get some suggestions from users. That is why user testing is very important, because actually the one who will use this webapp is the user themselves.
After gathering some feedback, i found that the overall design is working well. But still, it need some minor adjustment base on all feedback from user testing result.
In term of hand-off process to developer, i use Zeplin to collaborate with each other, because it provide the basic html and css really well, so developer can work faster with that fresh raw code.
Final Word
I am proud to have been part of the team working on the core design of kvliah.id from the ground up. Together we estabilished the core functionality of the extraordinary webapp.