Skillseed

My Role:

Product Designer

Project Type:

Responsive Mobile First Website

View Prototype:

View Figma prototype

Timeline:

November 2022 - February 2023 (11 Weeks)

Tools Used:

Figma, Optimal Workshop, Notion, Zoom

The Problem:

Professionals lack confidence when choosing which skill to learn next.

After polling several of my friends, I discovered a common struggle among potential learners: deciding which skills to pursue next. The vast array of options can be overwhelming, leading to a lack of clarity and confidence when starting the learning process. Without assurance that a particular skill is worthwhile or valuable, many of them hesitated to commit to learning.

The Solution:

Provide users radical clarity

1) AI Powered Skill Quiz

  • Custom skill recommendations individualized for each user
  • Recommendations based on user backgrounds, goals, and interests.

2) One-on-One Meetings with Skill Experts

  • Schedule meetings with industry professionals to hear their experience with a skill.
  • Users can get all their lingering questions answered.
  • Users can see examples of professionals utilizing a skill successfully in their career.

3) Comprehensive Resources

  • Users can find all the information they need about a skill.
  • Detailed video explaining a skill done by an industry professional.
  • Suggested courses for users to take to start learning the skill.

User Interviews:

My interviewees felt that they needed guidance to pick the right skill.

In order to understand how people decide which new skills to learn, I conducted 5 interviews with my peers. I asked them a variety of questions to discover their need, motivations and pain points for starting a new skill to learn. From the interviews, I was able to create an Affinity Map to begin finding commonalities.

Interview Questions:
1) Are you currently working on learning a new skill?
2) Can you tell me about a time you decided to learn a new skill?
3) What was your main goal for wanting to learn a new skill?
4) What was the hardest part about deciding what skill to learn?
5) What would have made the process of choosing a new skill easier for you?

Findings and Insights:

Income, Examples, Familiarity

After creating an affinity map of the interview responses, I noticed a few patterns begin to emerge. My user interviews revealed the importance of having fruitful skills, seeing examples of success, and having some baseline familiarity with a skill.

Competitive Analysis:

Competitors don't care if a skill is right for you.

After my user interviews, I wanted to see how the competition was giving users confidence and guidance towards committing to a skill to learn. To my surprise, the competition only painted a picture of sunshine and rainbows with every skill. They seemed more keen on selling a course than making sure there was a good fit.

User Persona:

To ensure that I kept my user's motivations and pain points top-of-mind, I created a persona. Lily represents the interviewees' background and aspirations. An ambitious professional who wants to get ahead in life and have a thriving career. But, she doesn't quite know what skill to learn next.

Brainstorm:

Design is exploring wild ideas

While brainstorming, used a few methods to generate as many ideas as possible. I applied some creative constraints to really get the brain juices flowing. From these ideas, I picked a few of them to think further on. I spent some time thinking about the 'best' idea. The final idea ended up being a combination of a few of the brainstormed ideas.

Sitemap:

Visualize website structure and organize content for better UX.

Once I flushed out some of the ideas, I began to think about how the website would look like. For that I created a sitemap, which helped me visualize what the website would look like. The sitemap also helped to ensure that the content is organized in a way that is easy for users to understand, find and consume.

User Flows:

After I understood the framework of the website I had to build, I began to map out how users would navigate their way through the website to accomplish their user goals. I chose the flows that would be the most helpful to users based on the initial research I conducted. This helped me understand all of the pages, actions, and inputs I would need to construct.

Task Flow:

Based on user research, I knew that finding out all the details about a skill and scheduling time to meet with an expert at a skill were important features. So for task flows, I focused on 2 specific tasks: 1) Finding out details about a skill 2) Scheduling time with a Skill Advisor. This helped me ensure that I designing a flow that was clear and straightforward.

Low-Fidelity Wireframes:

I started the process of creating screens by sketching out 3-4 options for each of the key screens and flows. I tried to do many variations and played around with visual and content hierarchy Once I received feedback, I turned the best sketches into mid-fidelity wireframes on Figma.

Mid-Fidelity Wireframes:

After the sketches, I began to digitize the wireframes in Figma. This aided me in establishing the visual hierarchy and spacing of the mobile website.

Brand System:

At the start of branding, I thought of some unique brand values such as: innovation, growth, exploration, guidance, and optimism. I wanted the platform to reflect these values.

Name and Logo

I chose the name Skillseed to reflect the website's focus on helping users choose relevant skills and serving as a starting point for their growth.

To reflect the simplicity of our platform, I opted for a simple and modern logo design. By keeping the design minimalistic, I wanted to communicate our platform's ease of use and user-friendliness.

Typography

For the typography, I thought about our platform's brand values and the industry we operate in (Tech).

After some thought, I decided to go with Poppins. A sans-serif font that would  reflect the modern, innovative feel of the brand.

 

Color Palette

Our brand colors, green and orange, was selected to reflect the name, Skillseed, and our brand values of growth and innovation.

Green symbolizes fresh starts and growth, while orange represents optimism. Both colors passed accessibility tests and create an eye-catching schema.

 

High-Fidelity Wireframes:

I applied the branding to develop high fidelity wireframes. Next, I connected the frames to create a prototype in Figma. This prototype was the MVP needed for usability testing.

High-Fidelity Wireframes

Usability Testing and Iterations:

I conducted 4 usability tests with the same participants from my user interviews. The tests were all successful, but I received some feedback that would help increase usability.

Decrease Cogntitive Load

In order to decrease cognitive load, I added the date for the mentor meeting.

Final Product:

Reflections & Takeaways:

This was my first project where I had to focus on the entire design process from start to finish, and that presented unique challenges. At the beginning, I lacked clarity towards the goals of the project and why I was doing certain tasks.

Now that I understand the whole process, I'd want to check if my solution can actually be a viable business. I'd do some market research to see if there's enough demand. It's important to make sure the problem I identified really needs a solution. I'd gather feedback from users, run surveys, and do some testing to validate my idea.