The Mentor Method
Background
The Mentor Method was purchased without design files. We had the code, the original development team and exported pngs of a selection of the screens. With a fully build application and active clients, we were starting from scratch.
As a first step, I pulled colors used within the application. I went through screenshots and began to slowly map out where
My Role
As the sole designer on The Mentor Method initially, I lead and drove this process.
The Problem
Our problem was complex. We were not just lacking a design system but the foundational branding and vision needed to build the future of this application. Simultaneously, we had a product with active users which included admin and custom branding. Both the custom color and existing branding lacked accessibility considerations.
Research
For the branding, I went through a long explorative process. I met with developers and data scientists, conducted user interviews to understand how The Mentor Method fits into their mentorship experience, and did my own deep dive into the stages of mentorship to get a complete grasp of what needed to be built.
Our Solution
We knew that the process would need to be incremental.
I began by slowly improving what currently exists by adjusting the colors and their usage. I recreated common elements as components in the UI using the principles of atomic design.
Before we could reach the next level, we had to begin diving deep into the vision for this project. I lead multiple visioning sessions with our project manager, product owner and our technical lead.
This was an exciting part of the process! I dove deep into mood boards and inspiration, used AI as a jumping off point and created a brand that could elevate and transform the product.
Ultimately, I decided based on the improvements made to the product, our vision, our future goals for the product and the competitive landscape of mentorship software that we needed to convey a product maturity and confidence. This lead to conversations
The bigger challenge was our design system. At this time, my experience with design systems was limited. Such a massive pivot, especially with the state of our code, created both design and development debt that we've been slowly working through as we refactor. The transformation of the product has been both internal and external as we reach higher states or parity between the code and the design.
As part of the process, we switched to a modified Material UI to expedite development and deliver improved experiences to users faster. Material was was already the framework used to create our color and typography styles so the transition has been incredibly smooth.
Challenges
This project forced a lot of growth in my own skillset. The complexity of components from it's first iteration to today are impressive.
Future State
These enhancements to the branding and design system are still a work in progress - they will evolve and grow with the product. In the future we have plans to develop the illustration style of the product and continue to make the design system easy adopt, easy to learn and flexible.
