Stephanie Briones

Open Mentor

Visual Design UX Design HTML CSS

Open Mentor is a side project that I started with my partner in early 2016. We're building a place for mentors and those wanting mentorship to connect and grow together. OM is fully open source, and if you'd like to help out, you can take a look at the list of todos on GitHub and see if there's anything you'd like to work on.


The main page of Open Mentor is a list of all mentors. You can filter mentors here by skill, and also by name.


The opposite side of a mentor's card contains links to their various social media accounts, (GitHub, Twitter, LinkedIn, Dribbble) to learn more about them.


I wanted to make a set of avatars that weren't the generic user silhouette that you see in every icon set. I also didn't want to use initials. I wanted something that could be part of the design from the start, not an afterthought.

I started with a photo from Unsplash of a mountain range with a lot of different shapes, peaks, and plateaus. I cut out circles from the image to make unique patterns, and then used color to add more variety. This gave us 24 unique avatars to randomly assign new users until they upload their own profile image.


For the branding of Open Mentor, I wanted something light and fun, but at first everything I was coming up with was too serious.

It wasn't until after working more on the UI and creating the avatars that I found the right shade of blue, which was brighter and more cheerful. Currently, the logo is using one of the green avatar patterns, the initials OM, and a blue background.

User Flow

Take a look at or follow the Open Mentor Repo on GitHub.