Fix UX of the apply as a mentee page

Development ScholarX
1

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
image1347×621 12 KB

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

Screenshot (95)
Screenshot (95)1208×473 13.5 KB

image
image1244×582 19.9 KB

2 Likes
2

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
SX February-Mentee - New1920×461 38.2 KB

@anjisvj do you have any other suggestions?

1 Like
3

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

4

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.

5

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.

6

can you try required: mentor ? false : true for that form validation in line no 157?

7

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.

8

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

9

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!

1 Like