Hi, I am Harshal 👋
A visual designer who understands people & create solutions they love.
/
/
Designing UI for the mentorship learning experience
WIREFRAMING · PROTOTYPING · UI DESIGN
1 DESIGNER | 1 MONTH
What is VF Corporation?
VF Corporation is an American worldwide apparel and footwear company. The company's 13 brands are organized into three categories: Outdoor, Active, Work and controls 55% of the U.S. backpack market with the JanSport, Eastpak, Timberland, and North Face brands.
About my role
I worked as a lead Visual & UI designer for a Mentorship program.
I was joined by the Lead Learner Experience Design (LXD), and Project Manager very closely.
Product goals
-
Provide a successful mentorship program to all employees regardless of brand, region, level, or organization.
-
Emphasize inclusive leadership as effective leadership so that all participants feel welcome.
-
Create a sense of benefit/value for the participants.
Some of the training and business problems we solve with the mentorship program
• Create consistency for mentors/ mentees
• Create clarity for what to do in a mentorship program
• Set clear expectations for participants.
• Diverse talent pipeline growth.
Wireframes
After creating the user flow, I started with a low fidelity prototype to explore if the features and a big picture of the application function were clear.
Welcome / Info / Screen
Welcome / Info / Fill up / Screen
Overview / Screen
Scenario / Profile / Choose / Screen
Quick Guide / Popup / Screen
Quick Guide / Profile info / Popup / Screen
Scenario_1 / Profile / Info / Screen
Scenario_1 / Chat / Screen
Scenario_1 / Chat / Choice Answer / Screen
Scenario_1 / Chat / Choice Answer / Screen
Scenario_1 / Chat / Choice Answer / Screen
Scenario_1 / Result / Screen
Scenario_2 / Choose / Screen
Scenario_2 / Chat / Choice Answer / Screen
Scenario_2 / Chat / Choice Answer / Screen
Scenario_2 / Result / Screen
Scenario_2 / Chat / Choice Answer / Screen
Scenario_2 / Result / Screen
Scenario / Congratulations / Screen
Scenario / Final Result / Screen
High Fidelity
After getting all the needed components, I moved to the final Learning module UI design phase. All pages were designed along with fully optimized responsive versions.
Interactive Prototype
Finally, I created a high-fidelity screen to propose the look & feel of the visual design
Learner Testing
Positive Feedback
We documented all details of each call and highlighted Learners goals, needs & motivations, and understand them better.
"Super Intuitive".
"Beautiful, fun scenario,". "I know they're fake scenarios but that makes you feel good."
Constructive Feedback
2/3 Tester clicked on Jen character multiple times before clicking next.
Update: On the basis of the feedback I removed the hover after complete the scenario.
Result
• End of program feedback survey results.
• 2000 Participants express that they have felt the benefits of the program.