Coding with Kids
Overview
DubsTech's 8th Protothon brought us to redesign the
website in May of 2020.
is an online coding academy for children of all ages. However, there is an overwhelming number of programs, topics, and workshops for the parents and children to navigate. For this design competition, our team of user experience designers came together to enhance the course discovery and registration experience for parents and children, as well as implementing a way for them to seek personalized support, if needed.
My Role
: Through user surveys I created a and assisted in developing a . In regard to prototyping, I specialized in, , and maintaining .
Tools
Figma, Adobe XD, Zoom, Slack, and Google Slides
Below is the challenge statement that was within our design process for reference every step of the way to remind us our purpose. Additionally, I've added the solutions we've come up with to keep in mind reading onward.
The Challenge
"How can we improve the course discovery experience for parents and children?"
The Solution
◦ Implemented a survey to understand the child's interests, experience, and learning style.
◦ Courses tailored to survey responses with visual aids to represent the course in order to reduce technical language for those with limited coding experience.
◦ Designed a FAQ page along with a 24-hour live-chat support for those that require personalized support.
Who we are designing for determines the very direction of solution.
Parents wanting to register their child for courses, but have .
Below was our end-to-end process within our website redesign.
All well-designed products are founded on user research. Below, are the steps we took in understanding the story we were being told.
Empathize
To better understand the challenges our users faced, we decided to take a look at the original website ourselves.
Coder's Ladder & Pathway Challenge
◦ Age does not always directly correlate to experience or skill level.
◦ The levels within the Coder's Ladder have no reference point. (i.e. What does level 10 require?)
◦ The programs offered within the Coder's Pathways do not explain how and why they are ordered as such. (i.e. Why does building a mobile application come before programming languages?)
Course Registration Challenge
◦ states that the amount of time it takes for a user to make a decision is directly correlated to the number and complexity of choices.
◦ The number of courses and sessions to choose from was far too abundant.
Competitive Analysis
After understanding how the website is structured. Our team moved onto researching the competition to draw upon successful methods for our redesign.
Code.org Course Layout
Code.org provides topics that are too generalized, similar to the Coder's Pathway from Coding with Kids. We did note, however, the visuals included with each course topic.
Khan Academy Course Layout
Khan Academy displayed the foundational topics, but parents that do not have any coding knowledge will not know which topics are suited for their children.
Code.org Support Page
Code.org also provides a page to search answers based on topics or keywords, however, this was not personalized in our minds to meet our design challenge.
Khan Academy Support Page
Khan Academy has organized sections for specific help. The two sections we drew from was the FAQ and live-chat support which was further down the page.
User Persona
Once we empathized with our users, I and another team member created a user persona. Kris was our ideal parent for this design process and we used her background to lay out a user journey map.
User Journey Map
The journey map below displays Kris's journey in using the current Coding with Kids website. We indicated the pain points throughout her journey that we wanted to focus on. You'll notice the greatest pain points lie within the middle of the journey. The beginning and end of the process really focus on the desire and goals the parent or child has in choosing the optimal course. However, to connect these two end points, we honed in on the phase of "Deciding Courses." This phase essentially makes sure that what users hope for become a reality in the end as they begin courses.
User Interview
Although we did not have connections to parents or children from the Coding with Kids platform, one of our team members did have a friend that previously worked for Coding with Kids as a coding instructor.
We asked him what he thought of a survey for parents/children to answer in helping us understand more about the child. He enjoyed this idea and asked us to come back with question ideations.
We immediately began brainstorming a list of survey questions that summed up to 20 questions. Our interviewee suggested that we limit the survey to 4-5 questions, due to the amount of time it takes to answer all the questions.
Moving on from our user interview, our team was ready to brainstorm for designs. Our research showed us that there were three core design principles that would really guide our way to the final designs.
Design Principles
We want to ultimately focus on the children's success in learning to the fullest potential. Learning must be fun, otherwise, children will be prone to lose interest very quickly. Lastly, we want children to think beyond the norm and push their creative side in problem-solving. These principles polished our solution into becoming a more well-rounded design.
Information Architecture
Once we understood the core of our design solution based off of our user research, we began laying out the information architecture for our new website. The goal of our page layout was to attract users to the survey questions as soon as possible. Thus, we made the survey link at the forefront of our landing page and the company information following directly below. From the survey, users will be led to a placement evaluation and recommended course selection based on the survey answers. Lastly, clicking on anyone of the recommended courses will lead to the desired outcome of registration.
Low-Mid Fidelity Wireframe
Afterwards, our team formed low-mid fidelity wireframes in order to determine where major and more minor elements should be placed on the page. We came up with two designs for the landing page, both fairly similar to each other, the right wireframe being an iteration to the left wireframe. Iterating is key in UX Design because no design is perfect and having discussions on what is best for the user will always lead to changes. Although there is no definite end-solution, there must reach a point of moving forward and that usually is decided with the consideration of time in our case. You'll notice the link to the quiz which was talked briefly above and we took visual hierarchy principles to ensure that users do not miss the core of our solution.
Survey Implementation
Once the general idea of the page structure was set, we moved to designing the details of our first solution, which was the survey questions. In order to keep the survey process a little more entertaining, our team ideated designs and opportunities for interaction. Additionally, I thought that a progress bar was an important feature to add so that users would not get discouraged by an unknown number of questions. It is rather an overlooked feature in many designs, but the concept comes from Nielsen's Ten Usability Heuristics: Visibility of System Status. In short, users must know where they are in the process of interacting with a system or product. A progress bar is a great example of such.
Our final designs came to life through various iterations of low-mid fidelity prototypes from above. The first part of our high-fidelity prototype implementation was determining the color scheme and typography for the website.
Colors
In general, we wanted to keep the colors and for children. Throughout most of the website, orange was our primary color and that was because Coding with Kids' website color was the same orange. We wanted to maintain this branding as much as possible. Next, we implemented a yellow that would be analogous to the orange for a brighter learning experience. Lastly, we chose a light blue to complement the other two colors used for accents.
Typography
Another teammate and I took the opportunity to decide which font the newly designed website should be implemented with. We landed with , which in recent years has become a very popular san-serif font choice for user interfaces primarily because it has a clean and modern look. The font size are labeled below each font weight to indicate the system and consistency in which we applied our text.
Screen Mockups
Below are the final screens that we redesigned for Coding with Kids.
Landing Page
Directs users to the survey from the beginning in order to reduce confusion on course selection and registration.
Survey | Question 1
Directs users to the survey from the beginning in order to reduce confusion on course selection and registration.
Survey | Question 2
Helps to understand where the child is at in coding experience with more detailed responses.
Survey | Question 3
To make learning more enjoyable based on the child's interests.
Survey | Question 4
Ensures the course load will be manageable to the child's schedule and learning capacity.
Survey | Question 5
Everyone has a different learning style that works best for maximum learning.
Coding Level and Recommended Courses
Displays the child's recommended coding level and courses based on the survey responses.
Course Registration
If the recommended courses seem like a good fit for the child, parents are then able to register for them.
24/7 Live Chat and FAQ Page
For those that require personalized assistance, we implemented both a live chat feature and FAQ page.
High-Fidelity Prototype
Check out our interactive prototype!
For my second participation ever at a design petition, I was extremely humbled and grateful for another opportunity to grow. Although, this Protothon was hosted virtually due to the circumstances, as we all know, much of our work did not seem to be negatively affected.
We utilized Figma as our collaborative prototyping tool and Zoom for communication. Every one of us was able to fulfill our own tasks simultaneously. It was quite convenient at times, because one person was able to share their screen for the rest of the team to view, rather than physically having to gather around one person.
Overall, collaborating virtually was new for all of us, but I was still able to learn from each one of them nonetheless. Ultimately, I learned to establish roles and goals with teammates of different backgrounds and experience levels.
If I had more time with this challenge, rather than 24 hours, I would have liked to spent more time on user research. I felt that this portion of the human-centered design process was a bit rushed. Being able to survey and interview users, I believe, would have been tremendously insightful in tailoring our survey questions.
Final Presentation
Check out our final presentation!
Award
