OVERVIEW
CodingWithKids is an organization that teaches coding to K-12 students through afterschool programs, summer camps, and online classes. Their students range from 5 years old to seniors in high school. They
have a curriculum that spans from simple lessons in Scratch to more complex exciting topics such as game programming, web development, Python, robotics, and more.
The goal of this project is to improve the experience for parents that are not familiar with Computer Science to discover and register for courses/programs for their children.
DURATION
1 Day
(May 2020)
ROLE
UX Designer
TOOLS
Figma
KEY SKILLS
Concept Ideation
Prototyping
COLLABORATORS
Yeju Kim
Cindy Yang
PROBLEM
User Experience of Current Website
So much stuff! Having content is nice and all, but parents will need to spend so much time figuring out what’s best for their children. Now imagine an uninformative parent is just trying to find the right course to register for her child…It’s going to be so painful!
While a lot of parents know the importance and benefits of having their children study Computer Science, some of them are not familiar with Computer Science themselves so they do not know where to start and often struggle to find the right courses for their children.
How might we help uninformed parents discover and register the right courses for their children?
SOLUTION APPROACH
We should redesign the current website with a clearer and more intuitive navigation system to help parents find the right courses for their children.
FLOWCHART
LOW FIDELITY WIREFRAMES
HIGH FIDELITY FEATURES
The home page is a lot simpler and suggests users to take a short survey to help them find right courses for their children. There's also now a search bar to help users filter and find what they need more quickly.
Survey wireframes allow users to take a short survey on their child's skills and interests, and generate a list of recommendations based on their answers so users can easily register for the programs/courses.
Registration wireframe provides an FAQ section to help answer popular questions users may have regarding courses and registration. Program Details wireframe showcases completed student projects to visually help users identify course outcomes.
Live Chat Support allow users to get their questions answered quickly from the team.
ALL HI-FI WIREFRAMES
RETROSPECTIVE
Reflection
Having to understand pain points and create a high fidelity website redesign from scratch within the time constraint was definitely a stressful yet fun experience. The competition was back when my teammates and I just started learning about UX/UI, and we struggled to establish a plan/timeline on what we needed to tackle and design. Luckily we got guidance from one of the mentors at the protothon and were able to finish the project within the time constraint. Even though we did not win any awards, we got lots of valuable feedback where I learned how to become a better UX designer.
What I Would’ve Done Differently
Establish a Design Roadmap: I would establish a consolidated plan so we can have an understanding of what we should do ahead of time.
Conduct Usability Testing on Low Fidelity Wireframes: We had such little time left that we had to transition from low fidelity wireframes to high fidelity wireframes without much testing. If we had more time, we would’ve conducted usability testing on the low fidelity wireframes and get feedback before moving on to high fidelity wireframes.