HACKATHON 1ST PLACE WINNER 🏆
A platform to connect students with
second-hand digital devices
CONTEXT
I participated in 4 day Hackathon challenge on creating a MVP design for a prompt Digital Equity & Accessibility. I was assigned to a multidisciplinary team comprising 3 UX designers, 3 researchers, and 3 developers. Our project idea, 'Give2Learn,' emerged from compelling research data revealing that students lack the necessary technology to successfully engage in their academic work. In response, we embarked on designing a charity website that facilitates the donation of used digital devices, enabling donors to easily donate used devices and teachers to apply for these devices on behalf of their students, fostering equal access to educational resources.
Role
User Experience
UI Design
Interaction Design
Branding
Prototyping
Duration
4 days
May 2023
achievement
1st Place Winner 🥇
We are the 1st place Hackathon Winner!
Execution, collaboration, and visual design part played a vital role on our success. And we achieved 100% vote from users that the website was super easy to use.
I found the app very simple and easy to use
strongly agree
strongly agree
01
Problem & Insights
1 out 5 students likely do not have technology needed to complete schoolwork
The “homework gap,” or the fact that many students need, but don’t have access to, the internet and devices to complete their homework, is one of the main reasons for causing digital divide in schools.
Disconnect & language barrier between non-finance & finance teams
80%
Students require devices to complete assignment
71%
Would donate a tablet or computer to charity
30%
Students do not have enough devices to use in class
86%
Would be more likely to donate if they were provided information about the students tech needs
02
How might we enable more users to conveniently donate their devices and help students in need?
Simple format of 3 step process
From survey and user interviews, we learned that donors often give up donating their devices if the process is too complicated. To save donors' time and energy, we created simple 3 step process for users to enter in the device information and clear instruction of what to expect, and donors should able to complete their task without making the account.
Informative and engaging landing page
86% of donors said that if they knew the used devices are going to students need, they are more likely to donate. We designed a homepage with informative contents around raising awareness of digital device and Give2Learn's mission of helping students in need and testimonials from school teachers who have helped their students through the charity.
Application status tracker for teachers
To ensure teachers about their application is under review and status of on devices, we designed 'My Application' page where teachers could track their application status and add more device requests if needed more.
03
Meet our users
04
Design Process
Task and time management
Due to tight schedule of Hackathon, our team divided and conquered on our tasks. Right from day 1, while research team conducted more thorough research with users, design team started with sketching and creating low-fidelity prototypes. These were then used to walk through the design concepts with developers, enabling to start building HTML frameworks and testing technical feasibility.
Low-fi wireframes
Design Trade-offs
After passing of low-fidelity wireframes to developers, we discovered couple of design concepts that weren't feasible due to tight timeframe.
We originally had a form fill-out design that would populate more input fields depending on user selection which wasn't feasible during hackathon sprint. We redesigned the form fill-out steps into different pages and changed visual button selection to drop-down selection.
Original wireframe
Updated wireframe
05
Visual Identity
Playful and optimistic
The design on Give2Learn website needed to fit our mission of supporting children. I chose Nunito font and color palettes that resonated playful and optimistic vibe of children. I also crafted logo that resembles hand drawned visual.
logo
typography
colors
#FEBE2D
#FFF8D2
#4B9EFF
#99C4F8
Simple and straight forward
To make it as easy for users to donate and apply, I wanted straightforward structure that users can easily navigate: a homepage directly leads device donation and application with informative information, and straight-forward form fill-out steps.
Homepage
Part of donation flow - Users deciding how to ship devices
06
What did I learn?
Realistic execution of product
Considering 4 day timeframe, there are design concepts that seems simple but realistically time-consuming for developers to execute, I learned to compromise non-crucial parts of design and focused on delivering the working MVP.
Synergy of diverse strengths
We had a pretty large team and it was very interesting to see everyone came from diverse backgrounds such as PM, scrum master, journalist, and visual design. Everyone carried different strengths and we effectively contributed on where we had strengths, resulting in efficient collaboration and creating stronger product.
Thank you for taking the time to read!