๐Ÿ’— Living Heart:full

Making mentorship accessible for the many / MentorWith


MentorWith is an online platform for skill mentorship that connects young professionals to subject matter experts and experienced mentors to help them build their skillset and navigate their career paths with confidence via online one-to-one mentorship sessions.

Scope of Work

โ†’ Visual Identity Design
โ†’ Web App UI Design
โ†’ Website UI Design



My role as founder of the idea was to lead the product vision, pursue idea validation with an MVP, then design and build it with WordPress. In addition, I was also responsible for designing all visuals and crafting the content and messaging used.


How might we facilitate skill mentorship online?

We all know mentorship is something that happens mostly organically in life and the workplace. But when it comes to skill development, many of us aren’t that lucky. Most skills in demand in today’s world, whether technical or interpersonal, are not taught in schools or higher education. What if we looked to the industry?

What if we promoted a sharing economy for skills and enabled knowledge transfer between those who already have the skills and those who need it? What if we established a formalized & scalable framework for online mentorship to help bridge the technical knowledge gap in the industry and increase youth employability?

So who needs mentorship?
And who can provide it?

Discovering User Needs

Over the course of 4 weeks, me and my co-founder interviewed over 40 potential target personas (from both subject matter experts and young professionals) to uncover the challenges they face when developing their skills or planning their next career steps.

We discovered that those still starting their careers preferred learning via face-to-face interactions to self-learning online. More than 50% mentioned they had no access to surrounding mentor figures in their immediate circle.

To move forward with the idea and try to explore the possibilities, we went through a phase of business modeling and value proposition design to help crystallize a solution to test. We then proceeded to develop an identity, landing page website and an MVP built with WordPress to get things moving.

Designing the Visual
Identity & Style Guide

As a graphic designer, I took charge in developing the visual identity, ideating a logo concept and creating a style guide to build the initial product. I followed a combination of a symbol and a letter as my direction in creating the logo, in efforts to represent the concept of mentorship as well as point to our name, MentorWith.

The final satisfactory result was to combine the M with a representation of knowledge transfer between people.

Next was to craft a style guide to follow in terms of typography, colors and visual illustration style. I chose a bold purple color to reflect youthfulness, trustworthiness and boldness. To design the user interface, we decided to use an open source design system (Ant Design) to be the foundation to use instead of starting from scratch.

As for the visual style and illustrations, I used a fun and free illustration pack called OpenPeeps, designed by Pablo Stanley. The hand drawn style and playful vibes seemed to convey the youthful element we were looking for.

Imagining the experience

As for how the platform works, we ran several workshops as co-founders to ideate on what the mentoring experience could look like as a marketplace model, where users can search and book times with the mentors they choose via one-to-one mentorship sessions.

User Journeys

User Flows

Following from the over-arching user journeys, we broke them further down into specific user flows in order to finalize and close off any gaps in the user experience.


Then I proceeded to refine the screens by applying the elements of the style guide and visual identity.

3rd: Designing the website

Finally, to validate the idea, communicate our value proposition and get user feedback as soon as possible, I used WordPress to build an MVP version of the product (soon to launch). Then using Elementor, a handy easy-to-use drag and drop editor plugin for WordPress, I recreated the landing page designs I had previously designed in Figma. I also worked on content creation, our messaging and tried to present the core value proposition to appeal to our target user personas.

Create a website or blog at WordPress.com