Guru Inovatif 3.0 Development
Guru Inovatif is an online learning platform for Indonesian teachers. As a UI/UX designer for Guru Inovatif, my team and I have been working hard to improve the user experience of our platform.
We’ve noticed that many users, especially parents, find it difficult to navigate the dashboard and often end up closing the tab in frustration. To address this issue, we’ve decided to simplify the dashboard and focus on each product’s core features.
Phase
Research — Wireframing — Design — Testing — Web Development — Iterate
Teams
10 people (UI/UX Designers, Web Developers, Digital Marketing, Product Development, and Product Managers)
My Roles
UI/UX Designer. However, because from preparation, kickoff, to launching we are involved in planning, designing, and also maintenance, our work is equivalent to a product designer.
Tools
Figma, Notion, Google Spreadsheet, ChatGPT, Clockify, Discord, and Zoom
Project Type
Real Project
The Challenge
We are facing a condition where there is no documentation of past designs, no clear flow from a business and platform perspective. In addition, market research has never been conducted to create a platform from a business perspective.
Phase 1 : Research
In order to build a solid foundation. It’s essential to start by designing a spectrum persona, creating a customer journey map, developing a user flow, establishing information architecture, and creating an atomic design system for the platform
Spectrum Persona
The spectrum persona helps us understand our target users, while the customer journey map visualizes their interactions with the platform
- Based on Age
Grouping personas based on age helps us gain insights into their experiences and expectations when using online learning platforms. We categorized them into four groups: under 20 years old, 21–25 years old, 26–35 years old, and over 35 years old. - Based on Occupation
Grouping personas based on occupation allows us to comprehend their roles and responsibilities in the educational process, as well as their specific needs when using online learning platforms. We identified seven primary groups: teachers, education personnel, lecturers, professionals, students, parents, and the general public. - Based on Geographic Location
Geographic location grouping helps us grasp disparities in technology access, internet connectivity, and usage habits among different user groups when accessing online learning platforms. We identified six main regions: Sulawesi, Sumatra, Papua, Maluku, Java, and Kalimantan, including Bali, NTT, and NTB.
Note : spectrum persona cannot be publicly shared to maintain confidentiality.
Customer Journey Map
Alongside designing spectrum personas, we developed a customer journey map to enhance our understanding of users on guruinovatif.id. Here is an example of a customer journey map specifically focused on the online course feature.
User Flow
We created a user flow to guide seamless interactions on guruinovatif.id. This carefully mapped out the logical progression of tasks, enabling users to effortlessly navigate features such as signing up, exploring courses, enrolling, accessing learning materials, and tracking progress.
Information Architecture
Our information architecture for guruinovatif.id ensures a well-organized and intuitive platform. Through thoughtful categorization and content structuring, users can easily navigate and access the information they need. Here is an example of an information architecture specifically focused on the User dashboard for school program.
Phase 2: Wireframing
When creating wireframes for Guru Inovatif’s dashboard redesign, our UI/UX team opted for high-fidelity (hi-fi) wireframes, despite the longer processing time required compared to low or mid-fidelity wireframes. We found that hi-fi wireframes allowed us to validate ideas and ensure a smooth flow throughout the entire team before moving on to the design phase, ultimately speeding up the UI design process. Below are some examples of the hi-fi wireframes we developed for the project
Phase 3: Design
In the third phase, which is the design phase, we further divided it into two sub-stages: constructing the Design System and creating High-Fidelity UI Designs.
Design System
To streamline and expedite the UI design process, our UI/UX team established a design system named “Edunix.” This design system incorporates atomic designs, which are composed of atoms, molecules, cells, and organisms.
UI Design
In accelerating the development of our High-Fidelity UI design, we benefited from the prior creation of High-Fidelity wireframes and, of course, the components within the design system.
Phase 4: Delivery
During Phase 4of the project, as the UI/UX Designer, I facilitated the handoff of the design to the Web Development team. This involved inviting them to access the Figma file while providing comprehensive explanations regarding the design flow. By ensuring effective communication and collaboration, we successfully transferred the design assets and specifications to the development team, fostering a seamless transition from design to implementation. This approach allowed the Web Developers to accurately interpret and execute the design vision, resulting in a cohesive and visually compelling web interface.
Phase 5: Testing
In this phase, we divided it into two segments: internal testing and external testing
Internal User Testing
We conducted internal testing collaboratively with all our team members (exclude UI/UX) before the public launch. This phase also involved bug fixes by the web development team and minor design enhancements by the UI/UX team.
External Testing
Following the project’s public launch, we conducted extensive user testing and utilized surveys (questionnaires) as our primary testing methods. Given the user demographic, which predominantly consisted of individuals with limited technical proficiency, we opted not to employ design prototypes for testing purposes. This testing assess several metrics, including Learnability, Efficiency, Memorability, and Usability.
- Learnability : how easy it is for users to learn how to use a new product or system
- Efficiency : measures how quickly and easily users can complete tasks using a product or system
- Memorability : measures how well users can remember how to use a product or system after some time has passed
- Usability : measures the overall ease of use and user satisfaction with a product or system
To conduct this test, we crafted a survey and distributed it through our platform, ensuring that only our platform users would serve as respondents. Subsequently, we analyzed the survey results using various formulas processed within Google Spreadsheet.
As a follow-up to the survey, we conducted In-Depth Interviews with selected users via Zoom meetings to gain deeper insights.
In addition, we leveraged the Heatmap and Recording feature on Hotjar to monitor user behavior.
Phase 6: Iterate
In Phase 6 of the project, we embraced an iterative approach to enhance the UI/UX design. Through careful analysis of user feedback and data analytics, we identified areas for improvement and refinement. Collaborating with stakeholders and team members, we implemented iterative modifications to layouts, interactions, and visual aesthetics. This iterative process ensured a seamless and intuitive user experience, aligning the design with evolving user needs.
Conclusion
In conclusion, my journey as a UI/UX designer in developing the Guru Inovatif platform has been incredibly rewarding. Through thorough research, a user-centric approach, and iterative processes, I successfully created a user-friendly and intuitive interface. Prioritizing learnability, memorability, error rate, efficiency, and overall usability, I addressed the challenges faced by our target users, particularly parents, in navigating the platform. Collaborating with web developers and stakeholders, I effectively translated the design vision into a visually captivating and fully functional web interface. I take great pride in the positive impact my design has made in simplifying the educational journey and enhancing the overall experience for parents and students. This project has provided me with invaluable knowledge and experience that will continue to guide me in future endeavors, as I remain dedicated to pushing the boundaries of UI/UX design and creating meaningful digital experiences for users worldwide.