Home
About
01 Nintendo ūüĒí
02 Impact Theory ūüĒí
03 Discover Bank
04 Reddit
05 Microsoft
06 Coding With Kids

Kenny You

I'm your Product Designer coming to you live from Seattle, WA.
All jokes aside, I truly have the greatest privilege of being invited into people's stories and championing them through user-centered products.
Hello!

I am known as Kenny (some people even call me Special K). To many people my story may seem pretty wild, but to me, I think everything happened just the way it needed to for me to be here in this moment.

To give the SparkNotes version: My parents immigrated from South Korea in '97 to Utah and I was born there two years later. We moved shortly after I was born to eastern Washington. When I was 8 years old, my parents were deported back to South Korea. I ended up following my parents and living in South Korea for about 3 years. My parents, who have always wanted the best for me, sent me back to America by myself to embrace opportunity, success, and independence. At the age of 11, I moved into an American family household. They required nothing from my family, instead they promised that they would raise me like I was their own son.

After 7 grateful years, that same family retired and is happily living their life on an island (what a dream). At that time, I was a junior in high school where I found another family through my church that was willing to take me in until I graduated from high school. After graduating, I attended the University of Washington, Seattle and majored in Human-Centered Design & Engineering.

Fast-forward to today, I am working as a UI/UX Designer at Nintendo! Life took some turns along the way to get to where I am now, but I'm ever so grateful and humbled by everyone who believed in my life along the way. And the craziest part is...

This is just the beginning for me.
Working within the Nintendo Design System, PM me for details!
Initiated and led the creation of the Impact Theory Design System and led the redesign of Project Kyzen. PM me for details!
Coding with Kids Logo

Coding with Kids

Coding with Kids Thumbnail

Overview

DubsTech's 8th Protothon brought us to redesign the Coding with Kids website in May of 2020. Coding with Kids 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 5 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.

Our team placed 1st for this design track out of 280 participants.

My Role

User Experience Designer: Through user surveys I created a user persona and assisted in developing a user journey map. In regard to prototyping, I specialized in design systems, core interaction design, and maintaining overall design consistency.

Tools

Figma, Adobe XD, Zoom, Slack, and Google Slides
Team
Generous Yeh
Charlotte Chen
Sandy Ko
Isabella Samantha
Timeline
May 2020 | 24 hours
Introduction
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.
Target Audience
Who we are designing for determines the very direction of solution.
Target Audience
Parents wanting to register their child for courses, but have limited coding knowledge or experience.
Process
Below was our end-to-end process within our website redesign.
Design Process for Coding with Kids
User Research
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 Coding with Kids website ourselves.

Coder's Ladder & Pathway Challenge

Coder's Ladder and Pathways
◦  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

Course Registration
◦  Hick's Law 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 Coding with Kids website is structured. Our team moved onto researching the competition to draw upon successful methods for our redesign.

Code.org Course Layout

Code.org
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

Khanacademy
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 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

Khanacademy
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 Persona Kris

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 Journey Map for Kris

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.
Design Process
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.
Design Principles

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.
Information Architecture

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.
Low-Mid Fidelity Wireframe
Low-Mid Fidelity Wireframe

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.
Low-Mid Fidelity Survey
Final Designs
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 playful and welcoming 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.
Color Scheme

Typography

Another teammate and I took the opportunity to decide which font the newly designed website should be implemented with. We landed with Poppins, 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.
Typography

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.
Landing Page

Survey | Question 1

Directs users to the survey from the beginning in order to reduce confusion on course selection and registration.
Quiz Part 1

Survey | Question 2

Helps to understand where the child is at in coding experience with more detailed responses.
Quiz Part 2

Survey | Question 3

To make learning more enjoyable based on the child's interests.
Quiz Part 3

Survey | Question 4

Ensures the course load will be manageable to the child's schedule and learning capacity.
Quiz Part 4

Survey | Question 5

Everyone has a different learning style that works best for maximum learning.
Quiz Part 5

Coding Level and Recommended Courses

Displays the child's recommended coding level and courses based on the survey responses.
RecommendationsRecommendations

Course Registration

If the recommended courses seem like a good fit for the child, parents are then able to register for them.
Registration

24/7 Live Chat and FAQ Page

For those that require personalized assistance, we implemented both a live chat feature and FAQ page.
SupportFAQ Page

High-Fidelity Prototype

Check out our interactive prototype!
Next Steps
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

Coding with Kids Award