Background
.svg)
With the advancement of modern technology, education has also evolved to provide learners and educators with online tools equivalent to classroom experiences. Engagement has become a priority over time. Different tools are used by institutions, educators, and learners to provide and consume content, making things more complicated.
Product Discovery workshop
Day 1
- Conducted user interviews to understand the current pain points, gaps, and opportunities of the Training Management System (TMS) and Learning Management System (LMS) products.
- Explored the existing scenarios of both TMS and LMS products to gain a deeper understanding of their usage and user experiences.
Day 2
- Combined personas from the TMS and LMS products, creating a unified set of proto-personas.
- Crafted need statements based on the insights gathered from user interviews, created concise statements that represent user requirements.
- Conducted voting on the need statements to prioritize them based on user feedback.
- Validated the need statements and mapped out the customer journey to gain insights into user interactions and pain points.
- Engaged with users from the first media and KAS to ensure a diverse perspective.
Day 2 second half
- Engaged in affinity mapping to group related ideas and identify patterns and themes from the need statements.
- Conducted feature brainstorming sessions to generate ideas for potential features or enhancements.
- Utilized storyboarding techniques to visualize user interactions and potential user flows.
- Performed assumption busting to challenge and validate assumptions made during the workshop.
Day 3
- Focused on creating a service blueprint to understand the end-to-end user journey, identify touchpoints, and uncover potential dependencies.
- Mapped out dependencies between different features or components of the product.
- Prioritized features based on their importance and impact, creating a feature prioritization list.
- Created a product backlog, listing all the desired features and functionalities for future iterations.
- Developed a high-level user flow to visualize the user journey through the product.
By following this structured approach, I have gathered valuable insights, identified user needs, generated ideas for features, and established a roadmap for the development of a scalable product combining TMS and LMS capabilities. This workshop provided a solid foundation for the subsequent stages of product development and ensured alignment with user requirements.
Product Goal
Addressing this with a dynamically all-in-one eLearning platform to reduce manual processes and make course management and delivery of content more efficient for training providers and learners by having a simple process that help users to automate processes and being govt approved when required.
Research Plan
Kickstarting with a research plan, the ultimate aim is to understand the how educators manage the ongoing management activites and how educators plan, perceive contents and their possible needs, and the feature required to run a seemless process. (Research method: Indepth user interviews and Secondary Research and competative analysis)
Userflow + Information Architecture
With that, the possible user flows are being mapped out after the discovery workshop, before conceptualising the main screens, we went on producing a combaining information architecuture and Userflow to validate them with Project owners.
Caption: Combination of User Flow and Information Architecture
Deliver
After concluding the ideation phase, we took the finalized ideas to our board and began working on them. As designers, we diligently crafted mid-fidelity wireframes, mock-ups, and prototypes based on the agreed-upon concepts. These designs were then put to the test through usability testing, where we gathered valuable feedback from users.
With the insights gained from the usability testing sessions, we iterated on the designs multiple times, incorporating necessary improvements and addressing any identified usability issues. This iterative process allowed us to refine the designs, ensuring they were intuitive, user-friendly, and aligned with the desired user experience.
Once the designs were polished and finalized, we handed them over to the development team. The handover process involved providing the developers with all the necessary documentation, assets, and specifications required to implement the code accurately. This included detailed design specifications, style guides, graphical assets, and any other relevant materials.
By handing over the finished designs to the developers, we ensured a smooth transition from design to development. The developers could rely on our comprehensive deliverables to accurately translate the designs into functional code, aligning the final product with the envisioned user experience.
Through effective collaboration and a structured handoff process, we aimed to seamlessly bridge the gap between design and development, enabling the successful implementation of our designs and the realization of the project's goals.
.png)
Caption: A Mid Fidelity Wireframe on list of coure runs page
.png)
Caption: A High Fidelity Wireframe on Payment Option for registering course run
Caption: An interactive prototype of admin creating a new course run
Testing
The hi-fidelity prototype was tested with a small group of users on a objective (to find out the usability of the admin solutions)- test overall usability, of the proposed solution. By conducting Scenario based task usability test, users were asked to complete three tasks while they were requested to think out loud, listed below:
- Task 1: Being an admin you have been requested to create a new course run. How will you do it?
- Task 2: Since being an admin you have responsibility to approve the list of users expressed interest on the course run, so you need to view the details of the person Daniel Tan and then approve him to the course run. How you do it?
- Task 3: Now you need to create a new user called Jonson and assign him as a trainer to a risk management course run. Let's do it?
Their were another rounds of usaility testing for admin to iterate in the solutions which needed improvements.
Iteration
During the usability testing phase, valuable feedback was gathered, and areas of improvement were identified. These usability issues were carefully documented and addressed during the iterative design process. I made it a point to conduct multiple rounds of usability testing, ensuring thorough evaluation and refinement of the design.
To achieve this, I conducted more than two rounds of usability testing for each persona, carefully selecting participants who represented the target audience. By testing the design with different individuals who embodied the characteristics of the intended users, I gained diverse perspectives and insights into the usability of the website.
The usability testing sessions provided an opportunity to observe users interacting with the design and gather their feedback and suggestions. These insights were then used to iterate on the design, making necessary improvements and refinements to enhance the overall user experience.
By conducting multiple rounds of usability testing and incorporating the feedback received, I ensured that the design not only met the requirements and goals of the project but also addressed the specific needs and expectations of the users. This iterative approach allowed for continuous improvement and optimization of the design, resulting in a more user-friendly and effective website.
Once the necessary refinements were made based on the usability testing insights, the design was ready for the handoff to the development team. The documentation and assets provided to the developers included the updated and improved design, addressing the usability issues that had been identified and resolved during the iterative process.
By emphasizing multiple rounds of usability testing and incorporating user feedback, I aimed to create a design that truly resonated with the intended audience and provided them with a seamless and satisfying user experience.
Handoff
Throughout the project, I utilized Zeplin as the primary tool for delivering designs to developers, ensuring a smooth and efficient handoff process. I recognized the importance of providing developers with comprehensive information and went the extra mile to produce a proper handoff. This included clear instructions, specifications, and guidelines for various design elements and considerations.
Firstly, I provided detailed guidelines for visual design elements such as colors, typography, icons, and visual styles. This ensured consistency and coherence across the website, allowing developers to accurately implement the intended design aesthetic.
Interactive elements were another crucial aspect, and I provided comprehensive instructions for components like buttons, links, dropdowns, and menus. These instructions helped developers understand the intended behavior and functionality of these elements, ensuring a seamless user experience.Form elements and data validations were addressed through detailed design guidelines. I provided specifications for input fields, checkboxes, radio buttons, and dropdowns, enabling developers to implement proper data validation and user feedback mechanisms.
Error states, an important consideration in user interfaces, were covered as well. I provided clear instructions and visual representations for handling error scenarios, such as highlighting invalid form fields and displaying error messages. This facilitated effective error handling and improved the user experience.
To account for loading and empty states, I included design specifications. Developers received guidance on indicating loading activity and progress to users, as well as instructions for displaying appropriate content when there is no data to show. This ensured a consistent and informative experience for users in different situations.
Animations were also addressed in the handoff process. I provided guidelines for transitions, micro-interactions, and page animations, allowing developers to implement engaging and intuitive motion throughout the website.
Copy guidelines were included to ensure consistency in tone of voice and messaging. Clear instructions were provided to help developers maintain the intended style and tone of the content across the website.
To illustrate user journeys and navigation, I provided detailed flowcharts and diagrams. These visual representations allowed developers to understand the intended flow and structure of the website, enhancing their ability to implement the design effectively.
Accessibility information was another important consideration. I provided guidelines to meet accessibility standards, including recommendations for contrast, keyboard accessibility, and alternative text for images. This aimed to ensure an inclusive and accessible experience for all users.
Finally, responsive design breakpoints were included in the handoff. Specifications were provided to guide developers in adapting the layout and elements of the website to different screen sizes and devices, ensuring a consistent and optimized experience across various platforms.
By providing thorough documentation and instructions for these various elements, I aimed to facilitate a smooth and successful collaboration between designers and developers. The comprehensive handoff ensured the accurate implementation of the design, resulting in a high-quality, user-friendly, and visually appealing website.
My Contributations
Throughout the project, I took on various responsibilities independently. These included creating a comprehensive sitemap to organize the website's structure and content. I also established the information hierarchy and content organization through content architecture. To guide the visual direction, I curated a moodboard that captured the desired look and feel of the website. Identifying the priority of each page was crucial, and I determined their importance to guide the design process.
In order to visualize the layout and functionality of the website, I created low to mid-fidelity wireframes and prototypes. These served as preliminary designs for the website. To ensure usability and gather feedback, I conducted usability testing sessions. The insights gained from these sessions were then presented to stakeholders and team members.
With the feedback received, I refined the wireframes, incorporating the insights and suggestions. This iterative process aimed to enhance the effectiveness and user experience of the website. Additionally, I evaluated whether additional usability testing was necessary based on the refined wireframes.
Once the wireframes were refined, I prepared the necessary documentation and assets for the development team in the handoff process. In sprint planning, I prioritized tasks based on project requirements and deadlines. This allowed me to focus on the next priority and move the project forward.
Throughout the project, I continuously iterated on the design, incorporating feedback and identifying areas for improvement. This involved prototyping and testing the design to ensure a smooth user experience. By following this structured and iterative process, I was able to deliver an optimized website that met the project goals and requirements.
