Project name:
ZilLearn Duration: August 2020 - Present at ZilLearn Overview: ZilLearn is a learning experience platform for learners and an advanced course creation platform for creators. Team: With Nick, Jerome and Jerena Role: Interaction, Visual design, Rapid Prototyping & User Testing |
1. Established a design system and kit
As ZilLearn platform have the intention to undergo a big UI rebrand, I was honoured to be part of the process of creating a design system and kit. The design kit was to maintain consistency in the look and feel throughout the platform.
2. Design development
My very first project in ZilLearn was to redesign the Course introduction of ZilLearn, where learners are able to review what the course consist of. I started by mocking up some basic wireframes to gather feedback from the Design, Product and the users on the overall layout and structure.
As ZilLearn platform have the intention to undergo a big UI rebrand, I was honoured to be part of the process of creating a design system and kit. The design kit was to maintain consistency in the look and feel throughout the platform.
2. Design development
My very first project in ZilLearn was to redesign the Course introduction of ZilLearn, where learners are able to review what the course consist of. I started by mocking up some basic wireframes to gather feedback from the Design, Product and the users on the overall layout and structure.
The challenge was to design a course introduction layout that is scalable for short and long course content.
"How will this design look like in App?"
"How will this design look like in App?"
Web, mobile web and app version of Course Introduction
3. Design documentation
Once I have designed the high-fidelity screens of the Course Introduction, I went on to add some design documentation to allow the engineers to inspect the file and export the HTML and CSS code. The documentation explained the different states of each screen and the general UI behaviour of the screens.
Once I have designed the high-fidelity screens of the Course Introduction, I went on to add some design documentation to allow the engineers to inspect the file and export the HTML and CSS code. The documentation explained the different states of each screen and the general UI behaviour of the screens.
Design documentation in Figma
4. Design implementation and User Acceptance Testing (UAT)
You must be wondering what's left after high-fidelity screens? The design does not end here as the design team will continue to support our front-end developers by addressing any design questions. After the design implementation, the design team is involved in User Acceptance Testing (UAT) to ensure the design implemented is pixel perfect.
5. Results and Takeaways
Since the implementation of the new Course Introduction, we have received positive feedback from users about the simple and intuitive layout, saving them a large proportion of their time.
Some key takeaways from this project are:
You must be wondering what's left after high-fidelity screens? The design does not end here as the design team will continue to support our front-end developers by addressing any design questions. After the design implementation, the design team is involved in User Acceptance Testing (UAT) to ensure the design implemented is pixel perfect.
5. Results and Takeaways
Since the implementation of the new Course Introduction, we have received positive feedback from users about the simple and intuitive layout, saving them a large proportion of their time.
Some key takeaways from this project are:
- "Mobile first" mentality as the app design will allow for progressive advancement in design for Web or a tablet.
- Design doesn't end after development as we have to document our designs to provide a good user experience to our front-end developers (not just for our end customers :)