Design an engaging skill training app that focuses on connecting teenagers and young adults with tutoring and mentorship in technical skills for trade masteries.
Trade Skilled is a service that focuses on a fun, achievement styled, training system that allows teenagers and young adults the opportunity to train technical skills in trade masteries. This service utilizes either discovery through AI image recognition or proactive searches to connect individuals with appropriate training and skill development.
Get to know the users
I conducted interviews and created empathy maps to understand users who could benefit from a trade skill training service. One user group that was identified were young adults and teenagers with busy schedules or were interested in learning technical skills.
I also noticed a need for support for users with who were technologically savvy but may not have hands on experience as well as users who were more interested in digital interfaces than face-to-face style education.
Individuals with tight schedules may not be able to partipate in their preferred training as they cannot shift their school schedules.
Users with mobility restrictions, or other impariments that prevent them from attending on site training.
Some individuals may be curious about the world around them and wan to learn more about it. By offering micro credits for specific tool based training they can train small skills that earn points towards an eventual degree
User journey map
Mapping Alex’s user journey informed areas for improvement and support to students with tight schedules. It also showed possibile instances where additional care can be taken to design for clients limited mobility to attend on site eductaion.
P & P Wireframes
Started with paper wire frames to outline the initial look and layout of the TradeSkilled app. I used references from other apps and services to define the look, but tried to maintain a unique layout so as to highlight the important features.
Built out Wireflow in Adobe XD to generate an interacitve prototye to test with users. Focus was given on how areas flow together with seamless navigation and IA.
Based on user research some of the wireframe felt a bit crowded and busy. I used consistent fonts and colors to highlight important information. This allowed the extra secondary information to blend back a bit and reduce visual load.
The image capture feature was hard to explain to users. Adding a more descriptive confirmation window helped inform the users what the AI was doing.
Users wanted more description on micro skills. One area that was lacking in the Low-Fidelity prototype. I built out a more complete design and added explanations on how Micro Skills function
Achievements and Course progress
Adjusted layout and organization of the profile page to better sort information. Also applied a consistent color scheme and icon style to keep consistency between different elements and reduce overwhelming users with too much information.
Generated consistent UI and color pallete to match the trade skill industry and synchronize with an aesthetic that excites and engages users.
Responsive Web Expansion
I stated expanding the TradeSkilled app to a responsive web design by creating a site map. This allowed me to group the functions and areas in a way that mirrored the native phone app, but also expand in portions that could be better navigated in a larger web UI.
The app makes users feel engaged in learning trade skills while also giving them multiple options on how to persue skill training, either with full time courses or smaller bite sized skill breakdowns.
While designing the app I learned a lot more about how accessibility options can further increase the usability for all users and make a complete product feel more thoughtful and welcoming.