top of page
Website desktop.png
Homepage – 2.png
Website mobile.png


UX/UI Designer

Designed an application and a responsive website to help teenagers train technical skills so that they can have a productive summer time and future job plan

Project Summary

This dedicated mobile app and the responsive website with two different use cases focus on Social good for teaching technical skills to teenagers. Designing for social good takes that concept a step further by creating solutions that lead to “collective social good.” As a UX designer, I address problems going on in my community and drive positive change in society. 

The technical skills tutor application for teenagers requested by a nonprofit social worker team in the FLIK community is a platform that helps them to find their interest in technical skills and train them in their spare time to get ready for their future job, a summer job or even their daily routines without spending money to train the skill. 



Solo Project 


12 days


Adobe XD


Google Workplace

My Role & Responsibilities

User research 

Hand sketch and digital wireframes ideating

Usability studies

Lo-Fi & Hi-Fi prototypes

Interaction design

Accessibility design

Dedicated mobile app

Don't want to follow the Design Thinking Process?



Teenagers are struggling to find out their interest in their future job;

they are also not taught how to start and find a place to train technical skills. So this may affect to waste their summer time without any plan for their future interest. 


Based on the chat with the client, as a social worker, she was concerned about how teenagers could have more organized plans to get ready for their future job and train in skills to make their summer times more productive. We used secondary research done by social workers and industry experts and also had a chat with some of the teenagers to have a better idea of the client's hypothesis. Hence, our research led us to pain point discovery as below.

Pain Points


Lack of Time

Students cannot always dedicate time to attend technical classes because of far distances and the inability to learn skills online.

Lack of Information

Students cannot find their favorite workshop classes close to their living area since there is no compact information


Less Awareness

Teenagers are not able to find their interest to work and learn, since they have less information and no experience


Project Goal

- Design a mobile app for teenagers to discover their interest in technical skills and offer workshops for them to train

- Design a responsive website to connect the industry and public committees to young people to have more information     about job opportunities and the current needs in various industries

Success metrics

- Increased satisfaction among teenagers to have a better insight into their future plan to up to 30%

- Increased engagement between expertise in industry and teenagers for a better understanding of market needs

Defining a Persona

Sally is introduced as the target user based on the teenagers needs and goals.

         Problem statements

Sally is a student who loves to learn new skills for her future job and find an art skill that she is more interested in training in her free time during studying because she wants to have a productive summer with art working and gain knowledge of her future interest to be a doctor

“Whenever Im exhausted of studying theories in classes and courses, I wish I could learn some skills in break time to refresh my mind, save time, and get ready for summer jobs ” 



Get prepared in a skill she likes for summer

- Likes to know basics about various skills to decide easier on her interest to chase

- Likes to have a summer job and earn money


- She should dedicate more time to each skill to see if its fit for her

- As a dedicated student, she just has free time during a break in school and on the way home

Crazy Eight Brainstorming

Crazy 8 for this concept helped me ideate and think about the diverse perspectives of this platform, and how it can be useful for teenagers in learning technical skills.

         Key Points


Ask the users to search their interest


Taking a quick quiz to find their field


Let the user know about the market


Give suggestions based on their search


Give options for paid and unoaid jobs


Quick daily offers

crazy eight_edited.jpg









User Flow

The happy path defined for sally to create the wireframe is shown as below


Details are provided after selecting each option



Selecting one option in the listing 

A search bar with filters is available

Selecting one of the field through the categories


Registering and starting the online course sessions

# Navigation Bar

Sally can explore through the favorite list and her dashboard and build a profile by clicking on each item on the menu bar.

Also, the search bar is available on all pages above the menu bar.

Wireframes for web and mobile screens

         Paper Wireframes

Search bar with filters is one of the navigation flows for the user to follow

While the user is not sure about their field of interest, they can take a simple quiz to find it out

Providing suggestions based on their previous search and also their quiz result


Daily offers based on job market and user's interest can be a good option for a quick action


Navigation bar as the easiest way to have access to main pages

WhatsApp Image 2022-09-08 at 1.41.03 PM.jpeg

         Digital Wireframes

Before talking about the usability testing and the iterative process that I went through, let's take a look at the final prototype

Homepage – 1.png
One selection – 1.png
Homepage – 2.png
One listing selection.png

Usability Study

Usability Testing on Lo-Fi Prototype

It was time to have some interviews with the first lo-Fi prototype. I conducted the user interview among three teenagers in high school. It was really a hard process to find participants in this age group and convince them to participate. 

Participants were interviewed in a moderated way, but without my opinion and response to their questions to let them explore the prototype. Also, I used "Task success rate"  and "User error rate" measures as the KPI to determine whether the application results can be interesting for them to follow or not.


After the usability testing, I categorized the feedback in an affinity map and implemented them by their priority for the first mockup in the prototype to make a better user experience.

Surprisingly, the result was what they were looking for, but one of their concerns was that they were not sure how this platform would guarantee their work placement after completing the workshops. 

Another takeaway that I understood before starting the task was that they were unsure about what could be more helpful to train and what they would like to continue.

Screen Shot 2022-12-20 at 1.04.39 AM.png

         Refining the Design based on the priorities of the feedbacks

One selection.png
One listing selection.png

It was not clear and straightforward for the tutor to manage all of the users who wanted to continue the practical workshop after the online session.

So, by providing a step as the entrance test after the online course, it's more organized that students with interest will attend the workshop.


As a suggestion by one of the attendance, A public profile similar to LinkedIn is provided for them to make it for potential tutors and recruiters.


One of the participant's key concerns is whether the tutors have to guarantee the learners' future jobs after taking their courses in their workplace or not. Although this is a challenging issue depending on the number of learners or their capabilities, I cannot have an exact answer before executing the application in the real world.


Ideation for the Respomsive Website

Progressive enhancement technique   ----->  Considering the use case of the website as the platform for expertise and industries for connecting with teenagers, I conducted a crazy eight brainstorming to ideate the best features and solutions. 

         Key Points in Ideation


Donation; essential need


Anouncing activities in community


Related news in industries

Site map

For this website, I am using the hierarchical model to contain all data I need in the website as below;

A Donation part is provided for people to let the tutors and sponsors take more action to educate teenagers in technical skills. In another branch of the tree, the community section is dedicated to teenagers and members to connect to experts and industries. The event part, which is one of the important parts of the website, is used to announce events, job fairs, and gatherings in this regard. 

Final Product


Use Case #1 for teenagers
Mobile Application for training sessions

Elevate for teenagers to      --------->

Explore various skills and find the one that matches their interests

Find workshops and job opportunities related to their skills

Connect to experts and communities in the industry

Homepage – 2.png

HOW MIGHT WE decrease teenagers' confusion about their interests?

They can find out their interest by taking the simple QUIZ in the application

Homepage – 2_edited_edited.jpg
Homepage – 3.png
Category listing – 2.png

HOW MIGHT WE make teenagers aware of training classes in their locations?

They can filter their search by location and find related classes around their area

One listing selection.png
Online courses.png
Online courses - Course two.png

HOW MIGHT WE solve teenagers' problem of not having time to dedicate to training new skills during school?

They can use the application anywhere and start the basics of the online classes and find in-person classes close to them

HOW MIGHT WE provide the platform for teenagers to show their talent to potential recruiters?

They will create a profile on their page, which is shown to the public and trainers


HOW MIGHT WE organize teenagers' interests in one platform?

They can manage their current training classes and future interests in related tabs provided in the app

Use Case #2 for tutors
Responsive Website for donators

Elevate for people and trainers to       -------->        can support teenagers and donate

Mobile screen

Website mobile.png
Website desktop.png

HOW MIGHT WE support teenagers by building connections with the industry to train and find jobs?

The website is dedicated to the suppliers in the industry to make connections between people interested in starting their career




As my first experience designing for different platforms with different use cases, I ended up with a holistic package to cover more types of target users, which was a great challenge.


The importance of responsive design is another point I achieved during this project to give the user options to choose more widely about the device used to interact with the platform.


How essential it could be for a UX designer to design for social goods since I am targeting a specific group of society to solve an issue among them, considering the fact of human-centered design.

I Could've Done Better


Strong Competitive Audit

Dedicating time to the competitive research could have helped me to provide more logical reasons in decision making

Second Target Users' Interview

Tutors and donators are my second type of target users that I could conduct user interview and more research on them


Target User Validation

I could continue interviewing with potential users for both use cases after the UI design to get more feedback on the final mockup


Next Step

And lastly, I believe that this app is concept of helping teenagers in their future jobs and skills with a considerable amount of challenges that are not yet solved. 

So as the next step for this platform, another usability study among target users will be conducted to discover new pain points and solve the issues of the current mockup. 

Then, the development team will start building the application to make it ready to launch and prepare it for the market.

bottom of page