Kalyani Katariya
UI/UX Designer and Researcher

Computing Kids

A learning platform designed to bring together students, teachers and working professionals

Overview
Computing kids is an EdTech startup working to improve digital skills for underprivileged kids in the Seattle region. My role was to collaborate with the CEO and technical developer to develop the first MVP design including a sitemap, journey map, personas, low fidelity wireframes using Balsamiq and high-fidelity wireframes in Axure.

Goal
Digital Skill for All (DSFA) is a learning platform designed to bring together students, teachers, working professionals, and employers to one place to collaborate, educate, and succeed in the Washington state area. I worked as a UX designer for the project. The goal of the project was to provide underserved youth, ages 14-24 with computer science job skills and entry-level technology job opportunities currently in high demand in the Seattle area.

Design Question
How might we help underprivileged high school students discover job opportunities?

Solution
We designed the web portal which helps students to -
Identify the career interest and skills of high school students. Explore entry-level jobs, career events in Seattle easily.

​Impact
The platform provided an easy to use, quickly searchable and relevant employment, internships, and entry-level jobs in the technology industry in Seattle to high school students.

My Role: UI/UX Designer

Tools: Figma, draw.io, Slickplan, Uxpressia, Axure RP9

Timeline: Oct 2018 -Aug 2019

Client: Computing Kids

Process
Computing Kids
Research
Computing Kids

Personas

I created four user persona to focus on my target audience to understand the background of high school students. The person would help to understand the end-user goals. The data and statistics in the report would be helpful to back the product decisions. 

The identified goals improved the product value and understanding user frustration would help to create a smooth user experience. I used the personas to guide design decisions on important features for the web platform. 

Customer Journey

The customer journey is a series of interactions that Cathy will have with the web application to explore her needs. The journey also shows the emotional experience while interacting with the web app. It helped the team to understand the motivation, feelings, and questions Cathy encountered at every step of her interaction with the app. It also helped to identify opportunities to enhance the overall user experience.

Computing Kids

Site maps

We created sitemaps to show the categorization of information as well as the flow of how different types of users can get to certain pieces of information, which is helpful before making the functional specification and wireframes. I used Slickplan to create the sitemaps.

The idea was to develop a job portal for the highschool students in the Seatle area. The portal will also list of training available in the area to enhance the tech skills to get the job. ​There are 3 types of users for the portal -

  • Students 

  • Employers

  • Training providers

Users will be able to browse these careers, companies, courses, etc., but there will be features that are not accessible unless the user registers and log in to the portal.

Insights
The graph shows the % of students in Washington state who do not get access to the resources to learn skills.

The graph shows the % of students in Washington state who do not get access to the resources to learn skills.

Insights from user research

  1. ​​Computing is changing every part of our lives, from how we interact with each other to how we do our jobs. It is the number one source of all new wages in the US economy and there are currently 500,000 open computing jobs across the United States. The important thing about digital skills is that they can be used in any job role.

  2. From the user research, we found out that high school students are internet-savvy so the learning curve to use the web application will be lower.

  3. Based on data we categorized career interests and skills. They can be classified into must-have skills (such as HTML, CSS, etc.), should have skills, then there are good to have skills. Based on this, the jobs can be populated for students.

Wireframes

At the next stage, I started working independently on the wireframes. Wireframes helped to define the specifications and clarify the user stories for the developers. Below are a few wireframes I worked on during the project. I used Balsamiq to create low fidelity wireframes.

Design

UI Design

The team decided to create two separate web applications. One would provide the technical training providers information in the Seattle area and another was the job portal. I had the opportunity of redesigning a few core web pages for the tech providers' resource directory. The client shared feedback on the initial design. Based on the feedback, I was asked to revise the design. The following are the old screens and the new designed screens.

Computing Kids

Old Home page for 'Digital Skills For All'

Design issues with the home page

1. The searching for courses with categories and filters along with the keyword was confusing for the user. It was not clear how they get applied to search results and how to make the best use of filters together to get the desired results.

​2. Nearby providers feature (searching the training providers by location) was not fitting on the landing page. 

​3. The color scheme was dull for the website.

Computing Kids

The old course details page for 'Digital Skills For All'

Design issues with the course details page

​4. The course details page was not providing the required information quickly; for example, the 'register course here' was placed on the pushdown menu and was not easy to locate.

5. The page was covering unnecessary and redundant information such as course duration - duration per session, syllabus - course contents.


Computing Kids

New home page

Redesign of the home page

1. I merged the search and categories feature. which reduced multiple filters. Also, the additional filters will appear only when the search results are populated. This would suggest that the searched results can be filtered further.

​2. I changed the color scheme to dark blue and white. Limited the use of other colors.

​3. Nearby providers feature (searching the training providers by location) was merged with the course search. So that the user does not have to go to another page and make the course search more relevant. 

Computing Kids

The new course details page for 'Digital Skills For All'

Redesign of the course page

4. The 'register course here' was placed on push down menu I changed that to the button at the top of the course details. Easily visible.

5. I removed all the redundant information such as course duration - duration per session, syllabus - course contents and revised the fields. 

                                     Redesigning for Mobile

The old home page and course details page redesigned for mobile are as shown below.

New home and Course details page for mobile

Reflection

Learning

  • Not all users that were a part of this project understood user experience and it's value. Explaining them the concepts and taking them along the UX process helped me learn how to communicate the design to non-UX background users.

  • If I would have more time on this project I would have loved to conduct the usability test with the designs and iterate the design based on the results from a usability test.

  • I used many new tools during this project like Uxpressia, Xtensio, Balsamiq, Axure RP which helped me to improve my UX research and design skills