The graph shows the % of students in Washington state who do not get access to the resources to learn skills.
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.
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.
How might we help underprivileged high school students discover job opportunities?
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.
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
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.
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.
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 -
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 from user research
- 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.
- 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.
- 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.
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.
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.
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.
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.
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.
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
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