# Fix UX of the apply as a mentee page

**URL:** <https://sef.discourse.group/t/fix-ux-of-the-apply-as-a-mentee-page/407>\
**Category:** ScholarX\
**Created:** [June 3, 2022, 1:07pm UTC](https://sef.discourse.group/t/fix-ux-of-the-apply-as-a-mentee-page/407 "2022-06-03T13:07:37Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![YaiyaSam](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/yaiyasam/32/620_2.png) [@YaiyaSam](https://sef.discourse.group/u/YaiyaSam)\
**Post date:** [June 3, 2022, 1:07pm UTC](https://sef.discourse.group/t/fix-ux-of-the-apply-as-a-mentee-page/407/1 "2022-06-03T13:07:37Z")

</div>

I was assigned to change up the ui of the mentee application page to improve the usability aspect since the current workflow seems to have made it a bit confusing, I assume mainly because of the placement of the apply button and not being able to select the mentor from the mentors table itself.

I suggest getting rid of the apply button completely and adding a “select mentor” button for each mentor row in the table, which would direct the user to the mentee application form once clicked. The primary mentor input field in the form would already have the selected mentor’s name but it would still let the user select a different mentor if they want to.

This is what the current ui looks like.

 ![image](https://global.discourse-cdn.com/free1/uploads/sef/original/1X/053730d9ffcbafa6d8c7593a3ed78620d1db3cbc.png)

And this is what it would look like after making the changes.

 ![Screenshot (95)](https://global.discourse-cdn.com/free1/uploads/sef/original/1X/463e4eda26d8f0ad1538aa7746eea1cd5ab8ad72.png)  
 ![image](https://global.discourse-cdn.com/free1/uploads/sef/original/1X/7652a123027a807b42d0d79eb39878cdc8eecd48.png)

---

<div class="post-metadata">

**Author:** ![piumal1999](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/piumal1999/32/274_2.png) [@piumal1999](https://sef.discourse.group/u/piumal1999)\
**Post date:** [June 11, 2022, 10:00pm UTC](https://sef.discourse.group/t/fix-ux-of-the-apply-as-a-mentee-page/407/2 "2022-06-11T22:00:28Z")

</div>

Hi, I’m just adding an earlier wireframe we had for this scenario.  
(There are 2 apply buttons. First one is on the mentor list view. It opens an empty mentee application. The second one is on mentor details views and It opens a new mentee application with the chosen mentor as the primary mentor.)

 ![SX February-Mentee - New](https://global.discourse-cdn.com/free1/uploads/sef/original/1X/f12972294c1d2cb6acbc633e081cc7dbaa5d5826.jpeg)

@anjisvj do you have any other suggestions?

---

<div class="post-metadata">

**Author:** ![anjisvj](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/anjisvj/32/9_2.png) [@anjisvj](https://sef.discourse.group/u/anjisvj)\
**Post date:** [June 12, 2022, 3:01pm UTC](https://sef.discourse.group/t/fix-ux-of-the-apply-as-a-mentee-page/407/3 "2022-06-12T15:01:25Z")

</div>

Good job! @YaiyaSam This is good but the problem is that “Select mentor” button is redundant. Can we do something like the above wireframes?

---

<div class="post-metadata">

**Author:** ![YaiyaSam](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/yaiyasam/32/620_2.png) [@YaiyaSam](https://sef.discourse.group/u/YaiyaSam)\
**Post date:** [June 13, 2022, 1:30am UTC](https://sef.discourse.group/t/fix-ux-of-the-apply-as-a-mentee-page/407/4 "2022-06-13T01:30:01Z")

</div>

I thought we already talked about it at the meeting we took last week. We can get rid of the “Select Mentor” button, but it basically does the same thing done by the apply button in the mentor details view (in the wireframes piumal shared). I imagined someone would want to select the mentor from the list and straight go to the application. But yes, I’ll remove that button.

---

<div class="post-metadata">

**Author:** ![YaiyaSam](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/yaiyasam/32/620_2.png) [@YaiyaSam](https://sef.discourse.group/u/YaiyaSam)\
**Post date:** [June 18, 2022, 11:59am UTC](https://sef.discourse.group/t/fix-ux-of-the-apply-as-a-mentee-page/407/5 "2022-06-18T11:59:52Z")

</div>

Sorry about taking so long. I was kinda busy with some other stuff and was quite struggling to figure out a solution for the issue I am facing right now.

I am having trouble setting the default value for the primary mentor field in the mentee application form. It seems to be working up to where you show the selected mentor’s name in the input field, but gives some error when I go on and submit the form.

This is what I get in the console `async-validator: ["'${name}' is required"]`

I just sent a draft pull request. This is what I have for now.

> <https://github.com/sef-global/scholarx-frontend/pull/345>
>
> \## Purpose
> 
> The purpose of this PR is to fix #340
> 
> \## Goals
> 
> Fix UX of the… mentee application page

---

<div class="post-metadata">

**Author:** ![anjisvj](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/anjisvj/32/9_2.png) [@anjisvj](https://sef.discourse.group/u/anjisvj)\
**Post date:** [June 18, 2022, 3:20pm UTC](https://sef.discourse.group/t/fix-ux-of-the-apply-as-a-mentee-page/407/6 "2022-06-18T15:20:26Z")

</div>

can you try `required: mentor ? false : true` for that form validation in [line no 157](https://github.com/sef-global/scholarx-frontend/blob/16f37d763e6637b304aa4b31a0f3770193a7723a/src/scenes/Home/scenes/RequestMentors/scenes/Application/index.tsx#L157)?

---

<div class="post-metadata">

**Author:** ![YaiyaSam](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/yaiyasam/32/620_2.png) [@YaiyaSam](https://sef.discourse.group/u/YaiyaSam)\
**Post date:** [June 24, 2022, 4:45am UTC](https://sef.discourse.group/t/fix-ux-of-the-apply-as-a-mentee-page/407/7 "2022-06-24T04:45:45Z")

</div>

Sorry i just saw this. Didnt get a notif for some reason. I just tried it and it does send the request now but the mentor id in the request url says undefined.

---

<div class="post-metadata">

**Author:** ![anjisvj](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/anjisvj/32/9_2.png) [@anjisvj](https://sef.discourse.group/u/anjisvj)\
**Post date:** [June 24, 2022, 5:22am UTC](https://sef.discourse.group/t/fix-ux-of-the-apply-as-a-mentee-page/407/8 "2022-06-24T05:22:40Z")

</div>

can you try console logging the mentor when visiting there? Maybe you don’t get the mentor object.

---

<div class="post-metadata">

**Author:** ![YaiyaSam](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/yaiyasam/32/620_2.png) [@YaiyaSam](https://sef.discourse.group/u/YaiyaSam)\
**Post date:** [June 24, 2022, 6:12am UTC](https://sef.discourse.group/t/fix-ux-of-the-apply-as-a-mentee-page/407/9 "2022-06-24T06:12:25Z")

</div>

I do get the mentor object. Apparently you cant set the value with default value or value props for a given form item…you have to use the initialValue prop in the form. Now it works!
