Project Summary
The Company
Code Sensei is a resource and educational hub for developers of all skills levels. Its founder Dave, a software engineer, remembers what it was like being brand new in the industry. His vision for Code Sensei is to provide a platform for coders to come and learn new skills, hone existing skills, find mentorship, teach others, and troubleshoot code with the help of the Code Sensei community.
Objective
Design and deliver the Code Sensei phase-one MVP desktop website.
My Role
Lead UX designer. Lead client/team communications throughout the project journey.
Managed project scope and timeline and facilitated daily standups.
Directed consistent cross-functional collaboration and weekly meetings with stakeholders
Iterated sketches in Figma into wireframes and low to high fidelity prototypes, creating and implementing an entirely new design system and UI.
Tracked product progress to ensure all benchmarks were achieved on schedule.
Role
David Lind - Lead UX Designer, UX Researcher
My Team
Chanteal Brayboy - Lead Content Strategist & UX Designer
Donri Watson - Front-End Developer
Dave Rogers - Back-End Developer
Timeline
Phase 1 timeline: October 2022 - January 2023
Tools
Figma, Jira, Slack, GitHub, Notion, Trello, Google Suite, Zoom, Pen & Paper
Methods
Using the Agile method: User Surveys, Competitive and Comparative Analysis, Heuristic Evaluations, Jobs To Be Done, Persona Creation, Journey Mapping, Design Studios, Usability Testing, Wireframing and prototyping
In a rush? Here’s a quick project overview
SNAPSHOT
Project Outcomes
As Lead UX Designer, designed the Code Sensei desktop website from the ground up, collaborating effectively with developers for impressive design.
Developed style guide aligned with stakeholder's vision, yielding distinct and pleasing layout.
Exceeded project goals, delivering exceptional results beyond requirements. Efficiently managed tasks, ensuring early delivery of revamped site and showcasing strong project management.
Handed off project ahead of schedule while upholding high-quality standards.
Summary
The Code Sensei project yielded highly positive feedback from stakeholders, who expressed their strong satisfaction with the results. In addition to effectively addressing critical UX issues, we also introduced a visually impressive UI design that resonated exceptionally well with them. Engaging in this project was truly enjoyable, and I'm eagerly anticipating the upcoming launch of Code Sensei, where my designs will be showcased.
Code Sensei’s Origin Story
We all remember being new at something. More than that, we all remember how just one person can impact our learning experience for the better. Coding is no exception. As more and more working professionals are starting careers in the tech workforce, there is a growing demand for platforms where these developers can network, seek mentorship, and problem solve difficult lines of code backed by a strong coding community.
Trust The Process
The Code Sensei website design followed the UX Double Diamond process: Discovering user needs, Defining the problem, Developing solutions, and Delivering the final website, ensuring a user-centered design.
Phase 1: Research
User Survey Demographics
Number of Participants: 25
Most Common Job Titles:
Software Engineer (44%)
UX/UI Designer (28%)
Web Developer (20%)
Years of experience do you have in current profession?
This survey was designed specifically to help us understand what software engineers and coders are looking for in terms of skill development, networking opportunities, mentorship, and problem-solving. We wanted to know how important the option to customize users’ profiles is, and what kind of information is valued when looking for a mentor. Additionally, we wanted to find out if online/virtual mentorship is meeting potential needs and if there are any areas that could be improved.
Survey Insights
What are your top 3 primary reasons for being a part of a coding community?
Participants prioritized gaining knowledge and debugging, assigning moderate value to socializing and skill refinement, indicating a primary motivation for learning and problem-solving, followed by networking and skill improvement.
I like to personalize/customize my profile when I create a new account":
(1 = never, 5 = always)
Participants prefer to have the option to personalize or customize their profile when creating a new account, rating this on a scale of 1 to 5 (1 meaning never and 5 meaning always) with 88% responding with a score of 3-5. This suggests that the majority of individuals value the ability to tailor their profile to their own preferences and wants.
Which of the following would you want to know about a prospective mentor? (Select all that apply)
When asked to select which information they want to know about potential mentors, participants valued specific skillsets most, followed closely by years of experience, job title, and availability. They showed moderate interest in mentor reviews, current employer, and overall rating.
What did survey takers have to say about finding mentors?
-
“My first mentor ended up dropping the program without telling me first, and I had to find out after I reached out to him twice.”
-
“The mentor was also unemployed and didn’t have experience in the field.”
-
“Just not a right fit. Didn't mesh or confusion in communication and they weren't offering what I thought.”
What did survey takers say were their biggest difficulties when learning to code independently?
-
“I seem to end up reinventing the wheel a lot of times when someone with experience can help direct my research or line of reasoning so that I still come up with the solution but don't wander aimlessly.”
-
For me, it’s jumping into someone else’s code.”
-
“The best architectures aren't devised individually- I think when it comes to design, it's better to have others to bounce ideas off of.”
Comparative & Competitive Analysis
Competitive analysis is crucial for understanding user needs, strengths, and weaknesses, aiding in Code Sensei's differentiation and improvement. It also reveals user expectations, pain points, and guides the creation of a standout product for the target audience.
Highlighting a member's top 5 skills on their profile is essential for quick expertise assessment, differentiating us from competitors like LinkedIn, Stackoverflow, and iTalki. This feature simplifies user-mentor matching, builds trust, and enhances Code Sensei's effectiveness.
Badges and achievements create a fun and professional atmosphere, setting us apart from competitors like LinkedIn and Codementor.io. They boost engagement, inspire members to showcase progress, foster community, and enhance Code Sensei's supportiveness.
Our mentor ticket design was inspired by the effective mentor tickets of ADPlist. They feature a visually pleasing layout, are simple to read and comprehend, and provide just the right amount of information, making it easy for the user to quickly browse through and find the perfect match for their needs.
We found italki.com's community page to be the best model for our social feed, The Dojo. The community forum on italki.com allows for member engagement and places emphasis on continued education and learning drills, which aligns with our goals for The Dojo.
Phase 2: Iteration
Meet The Personas
We chose to include two personas in our project because it allows us to capture the perspectives of both established and newer software engineers. The first persona, Corrine, represents the more experienced and established engineers who are looking to give back and help newer coders. The second persona, Lars, represents those just entering the coding industry and feeling overwhelmed by the amount of knowledge and skills required to succeed. By including these two personas, we can better understand the needs and challenges of both groups and create solutions that cater to their unique needs.
Jobs To Be Done
Phase 3: Design
our aim was to create a website that seamlessly merged professionalism with a gamified atmosphere. We envisioned a color scheme that exuded a futuristic vibe, resembling neon lighting. The combination of neon blue and neon orange was carefully chosen not only for their aesthetic appeal but also for enhancing visual hierarchy.
Our focus was on captivating visitors right from the landing page. Recognizing the inadequacy of the initial landing page's generic and unengaging appearance, we were determined to transform it into a visually striking masterpiece. Our goal was to pique visitors' curiosity and encourage them to explore further, enticing them with a captivating glimpse of what the site had to offer.
Design Iterations
Site Navigation
Mentor Tab
Onboarding Evolution
Landing Page
The Dojo (Social Feed)
Find a Mentor
Debugging Forums
Mentor Profile
Personal Reflection
Taking the lead on the project and navigating numerous challenges within tight deadlines proved to be an incredibly rewarding professional experience. Spearheading the initiative, I found continuous inspiration in the intricacies of our work and the potential impact it had within the developer community. This journey not only enhanced my skills as a UX Designer but also fostered profound personal growth through the obstacles.
Collaborating with an exceptional team, each member contributing their unique strengths, was pivotal throughout the journey. Witnessing the synergy that emerged from our combined efforts highlighted the true strength of collaboration. This ongoing collaboration led to unexpected learning, constant adaptation, and personal evolution. Staying organized was vital, evident in effectively managing tasks, timelines, and the interplay between design and development. Utilizing tools like Jira and note taking in Figma played pivotal roles in streamlining workflows and facilitating seamless communication, maintaining project progress while nurturing an environment where creative ideas seamlessly transformed into tangible results.
I can’t wait to see the launching of Code Sensei!
