New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

design - /mentors page #565

Closed
owocki opened this Issue Mar 7, 2018 · 59 comments

Comments

Projects
None yet
7 participants
@owocki
Copy link
Member

owocki commented Mar 7, 2018

Why

Mentorship is a proven model for growing developers skills, careers, and networks

What

Data Object

Mentor

See this spreadsheet for example

  • Github handle
  • Name (optional)
  • email
  • Yrs programming experience
  • Wants membership in (list of varchar)
  • offering membership in (list of varchar)
  • Available for new mentees? (y/n)
  • Time Commitment
  • Comments

Pages

First page - index page

A page that lives at /mentors. Page is a list view of mentors that are available to mentor developers. - Only lists mentors if Available for new mentees is y

This page can be accessed from /tools and from the footer.

Second page - detail page

The detail page for each individual mentor object. Only displays if Available for new mentees is y

Second page alt -- edit detail page

This page can be accessed from the menu in the top right of Gitcoin.

It allows editing of the Mentor object associated with my Gitcoin/Github Handle.. I can edit any of the fields in the data object from it.

Third page -- Email -- Mentor Match

Based upon the design of #563, this page will be an email notifying a user that there is a potential mentor match available.

Bounty

Please post a mockup of each of these pages. I expect that the core team will want to do two revisions on each page before they are finalized.

You are encouraged to leverage assets from https://github.com/gitcoinco/creative (especially the brand guide)

@owocki owocki changed the title design - /mentors design - /mentors page Mar 7, 2018

@mkosowsk

This comment has been minimized.

Copy link

mkosowsk commented Mar 7, 2018

MFW you posted this

giphy

Super looking forward to these designs! 👍

@owocki

This comment has been minimized.

Copy link
Member

owocki commented Mar 7, 2018

@mkosowsk your gif game => 🥇

@mkosowsk

This comment has been minimized.

Copy link

mkosowsk commented Mar 7, 2018

Thanks! I've been memeing since Internet 1.0. If you check out the YTMND power users you may see someone with a curious name that may or may not be me 😂

@andrueandersoncs

This comment has been minimized.

Copy link

andrueandersoncs commented Mar 8, 2018

What exactly does the deliverable for this look like? HTML files?

@vs77bb

This comment has been minimized.

Copy link
Contributor

vs77bb commented Mar 8, 2018

@owocki Is Gitcoin Bot on vacation or did @mkosowsk scare it/her/him away? 🙄

@vs77bb

This comment has been minimized.

Copy link
Contributor

vs77bb commented Mar 8, 2018

🙂

@owocki

This comment has been minimized.

Copy link
Member

owocki commented Mar 8, 2018

What exactly does the deliverable for this look like? HTML files?

just the designs.. in the past we've seen Sketch files or PSDs..

@owocki Is Gitcoin Bot on vacation or did @mkosowsk scare it/her/him away? 🙄

not sure; looking into it. meantime, heres the gitcoin link for this => https://gitcoin.co/issue/gitcoinco/web/565

@mkosowsk

This comment has been minimized.

Copy link

mkosowsk commented Mar 8, 2018

@vs77bb I'm surprised you'd say something like that, as you know I have a great relationship with the robot community 🙄As a matter of fact, just ordered a Roomba 980, can't wait to give her a test run 👍🏻

@owocki I'm not familiar with the nuts and bolts of Gitcoin Bot, but here are some actions I took on this ticket that may have tripped the poor robot up

  1. Posted an inline gif, Gitcoin Bot might not like this?

  2. Posted very clickly after your initial post, think <1 minute... sorry but mentorship has a special place in my heart!

  3. Also edited my post shortly after I posted it, looking for the most choice 👌🏻meme

@gitcoinbot

This comment has been minimized.

Copy link
Member

gitcoinbot commented Mar 8, 2018

Work has been started on the 0.25 ETH (178.02 USD @ $712.09/ETH) funding by:

  1. @cmac2454

Please work together and coordinate delivery of the issue scope. Gitcoin doesn't know enough about everyones skillsets / free time to say who should work on what, but we trust that the community is smart and well-intentioned enough to work together. As a general rule; if you start work first, youll be at the top of the above list ^^, and should have 'dibs' as long as you follow through.

On the above list? Please leave a comment to let the funder (@owocki) and the other parties involved what you're working, with respect to this issue and your plans to resolve it. If you don't leave a comment, the funder may expire your submission at their discretion.

@cmac2454

This comment has been minimized.

Copy link

cmac2454 commented Mar 9, 2018

gitcoin_mentors_1

Here's what the page is looking like so far. I'm mimicking the Issue Explorer list design for consistency but I'm open to other ideas. I've also added some filters to the side similar to an online store so that you can filter mentors for something you're specifically looking for.

@mkosowsk

This comment has been minimized.

Copy link

mkosowsk commented Mar 9, 2018

Looks awesome! 👍

Some thoughts:

  1. Probably worth it to put some thought into Email Address Obfuscation to trip up spambots. I've seen things like "Click here" for email address that obscures the email and when clicked shows the email address, would this work for our purposes?

  2. I think it's probably worth it to have Experience (Years) in the Mentors table... open to discussion on this tho 🤔

  3. There was a Google Sheet floating around that was perhaps a precursor to this issue called "Mentorship Interest Matching DB". This had two columns that I think would of interest here:

A. Available for new mentees? (Boolean)
B. Time Commitment (Hrs/week)

Very happy to see this one coming along! And because Mentorship has such a near and dear place into my heart, I would like to pre-emptively call dibs on working on bringing these designs to life through Code (assuming I get #506 into a ready state by then!)

@cmac2454

This comment has been minimized.

Copy link

cmac2454 commented Mar 9, 2018

Probably worth it to put some thought into Email Address Obfuscation to trip up spambots. I've seen things like "Click here" for email address that obscures the email and when clicked shows the email address, would this work for our purposes?

Would it be better if we only showed the email in the details page through the obfuscation? I could use that real estate for some of the other parts you mentioned then.

@mkosowsk

This comment has been minimized.

Copy link

mkosowsk commented Mar 9, 2018

Would it be better if we only showed the email in the details page through the obfuscation? I could use that real estate for some of the other parts you mentioned then.

That makes sense to me! But I would defer to @PixelantDesign 👍

@owocki

This comment has been minimized.

Copy link
Member

owocki commented Mar 9, 2018

great start! excited for this :)

Would it be better if we only showed the email in the details page through the obfuscation?

i agree.

But I would defer to @PixelantDesign 👍

agree here too :)

@cmac2454

This comment has been minimized.

Copy link

cmac2454 commented Mar 9, 2018

A. Available for new mentees? (Boolean)

Is this part necessary? The original design statement said this:

Only lists mentors if Available for new mentees is y

So we shouldn't have to display it because that should be assumed. Am I getting that right?

@owocki

This comment has been minimized.

Copy link
Member

owocki commented Mar 9, 2018

So we shouldn't have to display it because that should be assumed. Am I getting that right?

yes

@cmac2454

This comment has been minimized.

Copy link

cmac2454 commented Mar 9, 2018

gitcoin_mentors_index
Latest rendition with some of the requested changes and some new formatting to handle real estate. Gold skills are non-development skills.

@owocki

This comment has been minimized.

Copy link
Member

owocki commented Mar 9, 2018

some thoughts:

  1. can we add the user's github avatars on the left hand size to humaize this list a little bit?
  2. i advocate for alternating each row's background-color a little bit so it's easier to follow the data left <> right across the screen
@cmac2454

This comment has been minimized.

Copy link

cmac2454 commented Mar 9, 2018

@owocki I'm glad you mentioned those because those were my next ideas for the design!

@cmac2454

This comment has been minimized.

Copy link

cmac2454 commented Mar 9, 2018

screen shot 2018-03-09 at 11 54 20 am
Avatars added, row background colors alternated for easier readability

@PixelantDesign

This comment has been minimized.

Copy link
Contributor

PixelantDesign commented Mar 9, 2018

Looking good @cmac2454!
Have you considered putting skills at the top of the left column? When thinking about finding a mentor, a user is likely to be interested in what they're trying to learn vs. where their teacher works.

Would love to see what onboarding into this looks like!

@cmac2454

This comment has been minimized.

Copy link

cmac2454 commented Mar 9, 2018

Have you considered putting skills at the top of the left column?

@PixelantDesign I was thinking about that. Maybe skills first, experience second, org third?

Would love to see what onboarding into this looks like!

Are you referring to the application/creation process from the perspective of a Mentor?

@owocki

This comment has been minimized.

Copy link
Member

owocki commented Mar 12, 2018

@PixelantDesign I was thinking about that. Maybe skills first, experience second, org third?

makes sense to me

Would love to see what onboarding into this looks like!

this is the page i intended Second page alt -- edit detail page from the spec to be.. i can't speak for @PixelantDesign , but i too am excited to see what this looks like!

@cmac2454

This comment has been minimized.

Copy link

cmac2454 commented Mar 12, 2018

Questions about the flow of becoming a mentor:

Will it be available under the drop menu next to the username in the top right? (e.g. "Mentoring settings" options)

Would we like the mentoring onboarding/details to be treated more like a personal settings page (e.g. "turn on" mentoring and alter settings) or like a Tools page?

On a different note, I can't upload screenshots to this comment thread for some reason, but I can upload a screenshot of the email template to imgur if you're interested.

@PixelantDesign

This comment has been minimized.

Copy link
Contributor

PixelantDesign commented Mar 12, 2018

@cmac2454

@PixelantDesign I was thinking about that. Maybe skills first, experience second, org third?

I think that works.

Are you referring to the application/creation process from the perspective of a Mentor?

I was initially thinking for a user looking for mentor. I do think an ftux for the mentor is important as well but probably out of scope for this ticket.

One question I had was the time commitment column, is that instructor's committment or my time commitment as someone seeking a mentor?

Thinking about commitment and time, a statement is a good way to get users committed and follow through on their goal. This could be generated from an ftux that captures this information. Another commitment device that has been shown to work is simply sharing that statement either via email or a tweet (obviously out of scope for this but just some ideas there). Here is an example, please don't feel like you have to use this, just ideas to help spark thinking around this.

screen shot 2018-03-12 at 11 18 57 am

I wanted to also mention that we have a UI Kit which I'm not sure if you've seen or not, but might be helpful as you are designing the screens. I'm in the process of introducing Muli into our font family so you'll start seeing this throughout the app.

Last question - what is the thinking behind blue vs. green tags?

Looking good!

@cmac2454

This comment has been minimized.

Copy link

cmac2454 commented Mar 12, 2018

@PixelantDesign Thanks for the feedback! I'm definitely utilizing the UI Kit as I design this and I went and got the Muli font so I'll keep an eye out for it on the site and work on integrating it into designs.

One question I had was the time commitment column, is that instructor's committment or my time commitment as someone seeking a mentor?

That number comes from the number of hours that that individual is willing to commit to being a mentor per week. I do like the idea you put in the header as well, with a sort of statement for what they want to learn, a possible deadline and the amount of time they can commit. I think that'll also help if they have a smaller commitment than a mentor would find feasible for their task. I can look at incorporating something of that nature into the design.

Last question - what is the thinking behind blue vs. green tags?

I realized that some individuals had asked for and provided some non-development skills (e.g. business-oriented) so I wanted to denote those with a different color for browsing readability. That way if a user is looking for someone who has business skills but they are unsure of what they are looking for, they can just keep an eye out for the appropriately colored tags. I think it also helps discern which mentors are more development-oriented vs other categories. We could add more colors to the palette for more categories if we were interested (e.g. Regulus Red for Design, etc.)

@cmac2454

This comment has been minimized.

Copy link

cmac2454 commented Mar 13, 2018

@owocki @PixelantDesign Do we want the Mentor Details page to live on its own or do we want those details to live on the Profile page and be edited and displayed there?

@owocki

This comment has been minimized.

Copy link
Member

owocki commented Mar 13, 2018

i was thinking it'd be it's own page that would link off to the profile detail page.. cc @PixelantDesign

@owocki

This comment has been minimized.

Copy link
Member

owocki commented Mar 19, 2018

those both look pretty good to me!

Becoming a Mentor

we may have to adjust to use our form-styles a little more consistently and maybe add an image / title / subtitle up top, but otherwise looks good.

New Mentor Match Email

It might be neat to surface which skills you and the match have in common.. but otherwise this looks good.

@cmac2454

This comment has been minimized.

Copy link

cmac2454 commented Mar 19, 2018

Skills surfaced on email

Working on fixing mentor page to be consistent with form-styles

@cmac2454

This comment has been minimized.

Copy link

cmac2454 commented Mar 19, 2018

@PixelantDesign

This comment has been minimized.

Copy link
Contributor

PixelantDesign commented Mar 20, 2018

Looking good @cmac2454!

Have you considered using a drop down for years of experience and hours a week to commit to mentoring? That way user have a number or ranges to work with, it'll be easier to complete and we won't get wildly different answers for the numbers.

I might move the last question to it's own line "Are you available to mentor now?"

My only other comment would be to double check header, font, and default button styles defined in the ui toolkit.

@cmac2454

This comment has been minimized.

Copy link

cmac2454 commented Mar 20, 2018

@PixelantDesign

Have you considered using a drop down for years of experience and hours a week to commit to mentoring?

I did! I wasn't sure how granular or general we wanted to be, so I'll spin up a version with drop downs.

I might move the last question to it's own line "Are you available to mentor now?" My only other comment would be to double check header, font, and default button styles defined in the ui toolkit.

Will do and will do.

@cmac2454

This comment has been minimized.

Copy link

cmac2454 commented Mar 20, 2018

Updated designs

Dropdown example

@owocki @PixelantDesign Any thoughts, questions, concerns?

@gitcoinbot

This comment has been minimized.

Copy link
Member

gitcoinbot commented Mar 21, 2018

Work has been started on the 0.25 ETH (105.58 USD @ $422.33/ETH) funding by:

  1. @cmac2454

Please work together and coordinate delivery of the issue scope. Gitcoin doesn't know enough about everyones skillsets / free time to say who should work on what, but we trust that the community is smart and well-intentioned enough to work together. As a general rule; if you start work first, youll be at the top of the above list ^^, and should have 'dibs' as long as you follow through.

On the above list? Please leave a comment to let the funder (@owocki) and the other parties involved what you're working, with respect to this issue and your plans to resolve it. If you don't leave a comment, the funder may expire your submission at their discretion.

@PixelantDesign

This comment has been minimized.

Copy link
Contributor

PixelantDesign commented Mar 25, 2018

Hi @cmac2454 thanks for sharing the updates!

I think it might make sense to align the mentor form page with what @KennethAshley is doing with the grants form. You'll be able to leverage the structure, grid, type sizing, etc. Take a look here. Image wise you could use what Kenneth is using or create a new graphic more specific to mentoring in general.

@KennethAshley could you share your sketch file with @cmac2454 once you've nailed down the changes to the grants form?

@owocki this might help speed up development a bit too if we can reuse templates.

@cmac2454

This comment has been minimized.

Copy link

cmac2454 commented Mar 25, 2018

@PixelantDesign I took a look at @KennethAshley designs and I'll be looking at updating mine to be closer to his style. I may also create a new graphic like you suggested. I'll be interested in seeing the Sketch file and happy to help with the development of templates if needed.

@cmac2454

This comment has been minimized.

Copy link

cmac2454 commented Mar 27, 2018

Updated the mentoring onboarding with the format from previous designs from KennethAshley.

Design A

Design B

Design C

@owocki @PixelantDesign @KennethAshley Any feedback and/or pointers are welcome!

@owocki

This comment has been minimized.

Copy link
Member

owocki commented Mar 27, 2018

i like the cap. nice touch.

@owocki

This comment has been minimized.

Copy link
Member

owocki commented Mar 27, 2018

@cmac2454 can you post the Sketch files for this? I am going to open up a frontend coding ticket for this today.

@cmac2454

This comment has been minimized.

Copy link

cmac2454 commented Mar 27, 2018

@owocki They're Illustrator files, I hope that's okay.

Email Template

Onboarding

Mentor Browser

@PixelantDesign

This comment has been minimized.

Copy link
Contributor

PixelantDesign commented Mar 27, 2018

I think version B works @cmac2454

@owocki for the build ticket, I recommend we leverage the form that @KennethAshley is building on #380

@owocki

This comment has been minimized.

Copy link
Member

owocki commented Mar 27, 2018

#725 coding task

@cmac2454

This comment has been minimized.

Copy link

cmac2454 commented Mar 27, 2018

@owocki @PixelantDesign Any other design changes or desires?

@cmac2454

This comment has been minimized.

Copy link

cmac2454 commented Mar 29, 2018

Commenting to prevent gitcoinbot from removing me.

@cmac2454

This comment has been minimized.

Copy link

cmac2454 commented Apr 2, 2018

@owocki Can I submit work for this or do you need anything else?

@owocki

This comment has been minimized.

Copy link
Member

owocki commented Apr 2, 2018

looks okay to me. cc @PixelantDesign in case she has any feedback. go ahead and submit

@cmac2454

This comment has been minimized.

Copy link

cmac2454 commented Apr 2, 2018

@PixelantDesign Submitting work for this issue, please let me know if you have any further feedback.

@gitcoinbot

This comment has been minimized.

Copy link
Member

gitcoinbot commented Apr 2, 2018

Work for 0.25 ETH (95.85 USD @ $383.4/ETH) has been submitted by:

  1. @cmac2454

Submitters, please leave a comment to let the funder (@owocki) (and the other parties involved) that you've submitted you work. If you don't leave a comment, the funder may expire your submission at their discretion.

@PixelantDesign

This comment has been minimized.

Copy link
Contributor

PixelantDesign commented Apr 3, 2018

Looks good. Thank you @cmac2454!

@gitcoinbot

This comment has been minimized.

Copy link
Member

gitcoinbot commented Apr 4, 2018

The funding of 0.25 ETH (93.58 USD @ $374.31/ETH) attached to this issue has been approved & issued to @cmac2454.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment