Team
2 UX Designers, 1 Developer
Role
UX/UI Design
Timeline
Jun - Aug 2023
(4 weeks)
Tools
Figma
Society of Starfish is a non-profit that supports out-of-school youths due to various reasons. It aims to bring the youths back into formal education by providing free tuition.
I led the conceptualization of this pro-bono project, delivering a responsive web app design tailored to their needs within a month. I also collaborated with the developer to bring the design to life.
Recognizing the time-consuming nature of the manual process, I suggested a digital solution to improve efficiency. Given the organization's budget constraints, a web app was proposed as a cost-effective approach. Fortunately, I was able to connect with a developer to bring this solution to life.
1. It is difficult to accurately track student's attendance
2. It is tedious to manually tabulate data for reports.
3. It is hard to keep up with messaging students, guardians and social workers.
Through developing user personas and journey maps, I was able to empathize with users and ensured that the insights informed every stage of the design and development process.
What were the main concerns of teachers and student volunteers? We interviewed 3 teachers and 2 student volunteers over a 30 mins session to find out more about their woes. These were what we discovered:
To think of the possible solutions, my team sketched whichever ideas came to mind.
After the brainstorming, I then translated the ideas into wireframes. To facilitate stakeholder visualization, mid-fidelity wireframes were created.
To ensure brand consistency and accessibility, I adhered to the provided brand and style guide. While the original bright orange color did not fully meet WCAG 2.0 accessibility standards, I adjusted the color to improve accessibility while maintaining its vibrant look. I also limited its usage and conducted user testing.
To comply with PDPA, I created two user accounts after discussing with stakeholder: one for teachers with full access and another for student volunteers with limited access to the attendance marking feature.
Based on the feedback provided during usability testing with key stakeholders, I made several improvements to the screens.
During this project, I worked with a developer to evaluate the feasibility of various features, often prioritizing the minimum viable product (MVP) over perfection. This strategic focus enabled the team to address the core issues effectively, and the final design was handed off to the developer for implementation.
Given more time and resources, we could have added a student portal that allows teachers to post announcements directly. Additionally, we didn't implement a document upload feature, which would enable teachers to manage all relevant files within the web app, creating a comprehensive one-stop service that meets all their needs.
