COLAB13 - Web App

Sprout

Sprout is a tool that connects individuals with available mentors depending on their skillset, area of expertise, and experience level to provide support and mentorship regarding career aspirations, professional development, and networking.

Problem Background  

Sprout evolved from an observation amongst our peers and those within the tech sector, that there is some degree of difficulty when entering a new field and beginning your career. There is a lack of mentorship opportunities (both mentor and mentee), and the initial ‘break’ into tech is often done without the help of a mentor.

Research shows that individuals believe that successful mentorship is vital to career success and satisfaction for both mentors and mentees. According to Forbes 76% of people think mentors are important, but only 37% have one. According to a survey via Economic Times,  79.4% feel that one of the best ways to transition to a position in a new industry is with the help of a mentor. People with mentors are happier at their current jobs than those without.

Research Insights & User Pain Points

Most mentorship sites have an overwhelming amount of options which can cause even more stress on finding the right mentor that fits mentees’ interests.

While conducting our own user research, 72.4% of individuals we surveyed stated that they want a mentor but currently don’t know how to mentor and don’t understand how a mentorship works. 69% of individuals surveyed also stated that they have never used tooling like an app or website for seeking mentorship.

Landing on the Solution

Based on our target users’ pain points, we knew we wanted to work on a mentor app with the following features:

  • Search by area of expertise, experience, and skills.
  • Match mentors and mentees based on personality, interests, and goals.
  • Provide a bio and background information on all mentors so that mentees can make an informed decision when choosing which match to contact.
  • Provide assistance to encourage the mentees to contact the mentors.

Lo Fi & Hi Fi Mockups

Iterative Design Learnings

After we tested our prototype with users, we learned that the navigation on the home screen was confusing. Users could not find the link for mentors to sign up and create a profile. Also, users often selected the mentor profile option during the onboarding form by mistake, thinking they were clicking it to seek a mentor. So, we updated the buttons on the home screen making the hierarchy more clear. We also updated the architecture of the onboarding form and made the copy clearer to understand.

Implementation Details

Our app is hosted on Netlify: https://sproutmentorship.netlify.app/

Frontend:

  • React.js
  • React Router
  • Framer-Motion
  • SCSS
  • Material UI

Backend:

Firebase to store our data in our backend.

Technical Challenges

Some of the problem spaces we encountered for this app involved scope within the early stages of development.  When streamlined some of these features as a group during our weekly problem sprints. Originally we had ambitious user authentication and internal chat service goals. But upon reflection, we decided to narrow the focus and improve the user journey. We asked ourselves, "are we recreating an existing app?”

Working with Material UI allowed us to scale up components quickly, but there was a learning curve involved in order to customise styles that went beyond simple CSS classes. This required reading/understanding the MUI documentation for inline style. 

Scaling

  • Currently, data is being handled on the client/frontend. If we were to expand, a more robust and secure backend system would be needed to protect user information.
  • User authentication would need to be added in order to flesh out the unique, reusable, continuous experience this project would need to have.

Key Takeaways

  • Every feature holds an array of challenges that can often take longer to resolve and cannot be anticipated with even the best planning.
  • What might have worked in past projects, won't necessarily hold true for your current problem.

Features:

1. Search/Filter

  • Users can search mentor profiles by a filter on the home page and through the /results page.
  • Filter uses three criteria - profession, experience level and skill type.
  • This gives users the option to preview the mentors before they sign up.

2. Separate user experience for mentor and mentee that includes account creation for both types of users.

A. Mentor account creation

  • User completes a form that includes information about their employment, skills, mentorship goals and personality type with the option to upload a photo. Once completed, the data is sent to our database (Firebase) and returned on the mentor profile page.
  • We have used React Router to create a separate unique page for each mentor user.

B. Mentee account creation

  • User completes a form that includes information about their employment, skills, mentorship goals and personality type. Once completed, the user is shown 3 matches and their unique profiles, which contain email contact information. This list will also be emailed to the address provided by the user. 

3. Unique matching algorithm that matches mentor to mentee based on personality type, skills, profession, experience level, mentorship goals and selected activity.

Future Steps

  • User authentication
  • Mentee profile creation
  • In-app messaging
  • Calendar feature to book mentorship sessions

Learnings

Product Manager Learnings:

Tirrell Cooper

It truly takes a team effort on one accord to build a product. Creativity and uniqueness are a couple of values that product teams should have. I pitched an idea of what our product should be, but the collaboration amongst the team really drove what it should look and feel like and whom it could be perfect for.

Creating a culture where my team members felt empowered to share their ideas was very critical for us as we had to pivot a couple of times as we dealt with challenges.

A product manager must be an infinite learner. It’s essential to learn from everyone. Everyone on the product team should bring forth some value to you. The more you learn, the more there is to learn. But the more you know, the more successful you can be as a product manager.

Designer Learnings:

Megan Flagg

I've gained a much deeper understanding of how to communicate about the user experience design process as well as my design decisions with other members of my team, as well as how important regular communication is across departments.

I've also learned a lot about the Agile process and how to prioritize a lot of tasks in a very short timeframe. And to be comfortable showing, discussing, and getting feedback on work that is in process as we iterate as a team.

Designer Learnings:

Jo Sturdivant

  1. Adapting to an Established Team: Joining the team in week 6 of 8 was challenging, as I had to quickly adapt to existing workflows, dynamics, and goals. This mirrors real-world situations where you often integrate into teams mid-project, and flexibility is essential.
  2. Work-Blocking for Efficiency: With only two weeks to complete the project, I learned the importance of a structured work-blocking system. This approach allowed me to manage my time effectively and meet deadlines under pressure.
  3. Making Data-Driven Design Decisions: Unlike my past projects, I had to rely on research conducted by others. This was a valuable experience in using pre-existing data to guide design decisions, helping me focus on the core insights without starting from scratch.

Developer Learnings:

Stephen Korzenstein

Balancing ambition with technical limitations and time constraints was critical in being able to build a sustainable workflow.

Being realistic about what can be accomplished in our brief 8 week period helped from burning out in the dev process. Being able to break down software components into granular parts helped my teammates to better understand the scope, timing and difficulties of the development process, and enabled the delegation of tasks.

Working alongside other devs, product managers and designers in a tight knit team provided invaluable access to their processes and thinking, and allowed me to better empathise with their needs. I felt very lucky to watch our designer build our Figma file in realtime. An openness to ask for help or offer help - we were very lucky to have a few coding reviews, setup by our mentor which gave us insight into our own process from a more senior engineer.

Developer Learnings:

Vanady Beard

&

As the back-end developer, I learned how important it is to create efficient and reliable systems that support the entire application. This experience also taught me the importance of optimising the database and ensuring the backend is scalable and easy to maintain.

Developer Learnings:

Stephen Asiedu

&

As a back-end developer, I've come to understand the importance of being familiar with various database systems and modules. This knowledge enables me to build diverse applications and maintain versatility in my work. I've also learned that the responsibility for making the right choices rests on my shoulders, guided by my best judgement.

Developer Learnings:

Jennifer Collins

&

Communication was the biggest challenge and the biggest learning. I learned very early on the importance of effectively communicating ideas to the entire team as well as the other developers. Being able to communicate any problem areas and feeling comfortable discussing them was also another learning.

The collaboration between the team was really rewarding. It was helpful to brainstorm ideas as we developed the app and determine what features would work within the scope of our MVP. This type of collaboration helped contribute to the overall success and was important as we learned AGILE methods. Collaborating with another developer also helped reinforce the knowledge I have and gave me confidence to try new things.

Trusting your own skills and contributions to the team is an important part of the process and something that I will continue to work towards.

Developer Learnings:

Maurquise Williams

&

  1. Process of Creating an MVP: Developing a Minimum Viable Product (MVP) taught me how to focus on delivering core functionalities balancing between essential features and avoiding scope creep.
  2. Collaboration in a Real-World Tech Setting: This experience taught me how to collaborate efficiently in a fast-paced tech environment, keeping the team aligned and productive, even while working remotely across time zones.
  3. Sharpening Critical Thinking and Problem-Solving Skills: This experience honed my ability to think critically and solve problems efficiently. By tackling challenges and finding quick solutions, I sharpened my decision-making and troubleshooting skills in a dynamic, real-world setting.

Developer Learnings:

Jeremiah Williams

&

All in all this experience was very awesome I learned that in coding with others being transparent is key

Developers Learnings:

Justin Farley

&

I learned how important communication is when working with a team. Communication provides understanding, advice, ideas, and much more. While working with the product team, I’ve found that communication keeps everything flowing smoothly. Working with a team also showed me that every member brings something different to the table and we all have to work together in order to align and meet our end goal.

Full Team Learning

With each team member having different backgrounds and experiences, we quickly learned the value of communication and what it takes to work together on a cross-functional team.

Our team working sessions were a key part of our growth and improvement, and working collaboratively throughout the process helped guide the product through each stage of its development.

It was important for our team to work together, but also be empathetic to the difficulties of working in different places as well as an online environment. Daily check-ins were a big part of us staying on track and keeping each other motivated.