top of page

Designing UI for the mentorship learning experience

WIREFRAMING · PROTOTYPING · UI DESIGN

Cover-1png.png

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 JanSportEastpakTimberland, 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.

Wireframe_Main_Slide.png

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. 

High_Fidelity_Mockup.png
Cover-3.png
Cover-2.png
shadow.png
frame.png

Interactive Prototype

​

Finally, I created a high-fidelity screen to propose the look & feel of the visual design 

Laptop_Desktop_Mockup.png

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.

​

bottom of page