Kewirus Learning Management System - Initial UI Concept (2019)

Kewirus Learning Management System - Initial UI Concept (2019)

Kewirus is a learning management system (web-based) that brings together anyone who wants to study business, with professional practitioners in their fields.

Why This Project Happened

There are concerns related to people in remote areas who don't have access to good resources that can enhance their business. And if there are any, the resources sometimes will be in English, and not many of them can understand it.

The founder comes up with a solution: a learning management system website that can connect professional practitioners with people who want to develop their business.

Problems Faced by The Client

The problem is, on his team, there is still no designer who can translate his idea (wireframe in PowerPoint) into something that can be understood by the developer. So, the developer executes his idea directly into a code without any proper design of the website. As a result, there are many not-needed components, unimportant information, inconsistent design all over the website.

Besides that, the founder needs to present the website idea as fast as possible to some investors. That's why he needs me to create the prototype because the production time is faster than developing it into a website.

My Role

To tackle that problem, I was recruited as a UI/UX Designer. I have some responsibilities to translate the founder's idea into a wireframe, and then convert it into a high fidelity design until a prototype that can be presented to the investor and easily understood by the developer. Once the prototype ready, I deliver it to the founder and developer team. The role is like being a bridge between the founder, and the developer.

My Design Process

As the project still in the early stage, I tried to finish the design as fast as possible. And because the founder already told me to clean the mess on the current website, I already got what I need to do.

1. Digest the Idea

The founder and I held some calls to discuss the idea. At the end of the call, I summarize the discussion and confirm it with him, to make sure that we are on the same page.

2. Understand The Developer Team's Difficulties

I tried to understand every difficulty faced by the developer team in the previous development. And yes, their biggest difficulty is there is no proper design that they can use as guidance to develop the website. In this step, I also asked about the technology and framework they used on the website. To make sure that every design I created later can be developed by them.

3. Wireframing on Sketch Book

Once I got the idea for each website screen, I create a wireframe using my sketchbook. This process helped me a lot to translate the idea into something more real.

Wireframe for Kewirus LMS using Sketchbook

4. Create High Fidelity Design and Prototype

With the wireframe for every screen finished, I start creating the high fidelity design and prototype based on it, on the Adobe XD. Trust me, if you create the wireframe first, your job to create the high fidelity design will be easier.

5. Deliver Prototype to Founder

Prototype finished along with the high fidelity design for each screen and delivered to the founder, so it can be presented to the investor.

6. Prototype Approved, Deliver The Design to Developer

Thank God, after the prototype was presented, the idea got approval. And the development phase started. I delivered the design and prototype to the developer using the Zeplin application. It will convert all of my design from Adobe XD into CSS code that will be needed by the developer.

7. Coordinate with Developer to Develop the website

During the development phase, I always coordinate with the developer to make sure there is no misunderstanding about the design and they can build the website properly. We used Trello for task management and Slack for the communication channel. This step will be run until all of the screens are developed.

Project/Class Activities Screen on Kewirus LMS

Submit Assignment Screen for Kewirus LMS

List of Modules Screen on Kewirus Mobile App

Dashboard Screen on Kewirus LMS


The problem of the previous development can be solved. The founder has a prototype to be presented to the investor, which ended very well with approval from them. Also, the developer now has guidance to do their work, since the design already explained what they need to do on the code and have better coordination with all of the team members.

Challenges and Conclusion

The biggest challenge on this project is, all of the team members worked as a part-timer with different work hour. It means, some moments usually made us have difficult coordination because of that. We tried to solve this challenge, by holding a weekly meeting to tackle all the problems we faced in the previous weeks and come with a solution. Even if needed, we can arrange a direct call to solve the urgent issue.

But unfortunately, after that good part of the earlier project journey, the next phase of the project is not that good. In the next phase, when the founder got another investment, the project needs to be pivoted. And the initial idea needs to be revamped. What I can learn from this project is, I should be ready with every possibility and can adapt to the situation and decision. And during the project, always give the best because we never know what will happen next. At least, during that time we already give our best.