Process

3.

Personas, flow chart, wireframes, prototype, testing, inclusive design, and identity

Personas

I plugged six personas into the process to help leverage my user empathy

I went with such a high number because I wanted to be able to keep an eye on both mentors and mentees, on top of the categories of academic, personal, and professional contexts.

Mentors

Mentees may be looking for help with personal or professional growth

Yavette Curtis| UX Designer

Age: 38

Pronouns: she/her

Education: BA Human Computer Interaction

Goals

Pay forward the mentoring she received while in high school and college. Help bridge gender and race gaps in tech by supporting women and people of color.

Frustrations

  • Busy, frequently needs to reschedule

  • Not sure how to assess who would best benefit from her coaching

Ethos Elliott | Illustrator

Age: 43

Pronouns: they/them

Education: MFA Illustration

Goals

Help younger artists and illustrators develop business practices that are sustainable.

Frustrations

  • Unsure of how to connect to illustrators that are still in school

  • Low tolerance for clunky apps

Gregg Smith | Nutritionist

Age: 47

Pronouns: he/him

Education: MA Nutrition

Goals

Would like to donate some of his time to help low-income folks gain access to habits and foodways that maximize their health while minimizing their carbon footprint.

Frustrations

  • Has a hard time reading his phone

  • Most potential mentees are relatively wealthy

 

Mentees

Mentees may be looking for help with personal or professional growth

James Lafiatte| UX Designer

Age: 48

Pronouns: he/him

Education: BA Visual Design

Goals

Transition from visual design to UX design. Supplement his online UX training while networking.

Frustrations

  • Doesn't know any UX designers

  • Social anxiety

Swift McFadon | Illustrator

Age: 23

Pronouns: she/her

Education: Attending art school

Goals

Transition her hobby of drawing into a freelance career that can pay the bills.

Frustrations

  • Impostor syndrome, intimidated by professional illustrators

  • Uncomfortable asking for mentoring

Adriaan Hect | Drywaller

Age: 26

Pronouns: he/him

Education: High school diploma

Goals

Would like to get in shape and stop eating out regularly.

Frustrations

  • Feels embarrassed by his lack of cooking skills

  • Doesn't know where to start looking for mentors

 

Flow chart

I mapped out the basic user tasks that would be needed

Wireframes

I quickly set up some grayscale wireframes so I could get my ideas in front of a few friends and family members.

 

Prototype

Then I turned the wireframes into a clickable prototype so I could test it with friends. 

It's interactive if you want to mess with it.

 

Testing

I was excited by how much actionable feedback I got just by having some friends go through a clickable prototype. This was easily the most valuable step in the process for me.

 

"I don't find the first screen welcoming. But it does seem like the purpose is clear. I do get the impression that I already need to have a mentor or be a mentor to be part of this."

"I feel like this question is late. If I didn't want this, would I sign up in the first place? Can something somewhere explain that finding a mentor/mentee is the purpose?"

"I like to take screen shots of appointments and things like that so I would personally like something like 'your coffee is scheduled with ____' and then this information."

A or B?

I ran several different design options by my faithful testers. Sometimes the results were inconclusive, but I always learned a bit more about how users were experiencing the app.

Mentor list

"I like the list, because I like to skim more options than one at a time and then expand if I'm interested."

"I like them both, however I would find [the list] easier to use. "

Mentor card

"I like the swipe one just because it’s super easy to see more information at once versus having to click into the email style one to see the about info."

"Easier to see all info."

Sticking points

I wanted to make sure that the more difficult tasks got in front of testers. Selecting a meeting time and place felt like the two key ones to test.

Time

Overlapping the mentor/mentees available times with the user's actual calendar felt ideal. Graying out the existing calendar and highlighting available mentoring time slots helped clarify the task.

Place

Having users select a list of preferred meetup locations that another user could select between felt like a way to narrow down the conversation about location. Users within a specific organization would need a different experience.  

 

Inclusive design

BECOME A MENTOR

I did my initial wireframes in grayscale to eliminate color dependence in the UI for folks with color vision deficiency​.

I tested a broad color palette against WCAG's AAA standard of a contrast ratio of at least 7:1. This allowed me to make color decisions for the UI's look and feel.

She

They

He

​While working on personas I remembered to add pronouns to the app's fields (with nonbinary options) to make more space for all users.

Identity

Users were put off by my grayscale wireframes. Next time I'll have a disclaimer about that not being the finished design. But it did prod me to think about colors and branding.

 

Splash screen tests

I started by running some splash screens by folks. I played with two different color schemes and two different fonts for the rough logo.

 

I got two key unexpected insights from the feedback: First, the design with my illustration of two people having coffee on it was universally popular. Second, there was only negative feedback about the trendy red and blue color scheme. I had been worried that the blue/green scheme was too sterile or medical, but friends found it soothing and inviting.

Look and feel

Next I presented four variations of a more actionable UI's vibe and got more feedback using a "borda count" ranked voting approach.

Sometimes I'm suspicious of taking direct user feedback on designs too literally, as the request that they have an opinion often seems to create unusual opinions. I'd rather watch them in action and then ask for explanation. In this situation that wasn't feasible, but it was certainly still useful to hear what folks thought.

11

voting points

"I dislike whatever shape is behind [it]."

"Comforting and welcoming."

"Feels like you see a bit of personality or...character in it?"

2

voting points

"A big no for me."

"I want pretty much everything in dark mode all the time--too much white... hurts my eyes... would make me avoid the app altogether."

"More impersonal and blank."

12

voting points

"Feels oddly balanced to me."

"Feels not too dark, I don't love dark mode, but also not overly bright."

10

voting points

"Feels flat."

I was surprised by how unpopular the clean white design was. I'm still trying to wrap my mind around the value of dark themes and darker screen designs in general. I worry that they have the potential to be emotionally heavy even when they're easier on our eyes.

Color & logo

I went with the cool green/blue color scheme and worked out a palette that would allow for a darker theme.

Initially I went with Futura, but it wasn't feeling friendly enough for me, so I dug around for a softer font (Omnes).

UP NEXT