Codology is a student-run organization that aims to bridge the gap in computer science education and empower individuals to excel in computer science-adjacent fields.
As a team, we worked with Codology to build an interactive personalized portfolio that allowed students to showcase their work for professional or personal development through an interactive platform, following analysis that students want a supportive grounding environment that can help motivate student to continue to pursue computer science. We conducted different levels of user research and synthesized our results to develop user personals and user flows before ideating and developing a direct solution to help Codology build an inclusive empowering community
Students’ interests, confidence, and plans to pursue computer science in the future are all “strongly related to the presence of computer science role models in their lives”. Black students, Hispanic students and young girls are less likely to agree that they have role models in computer science
We wanted to help codology enhance its platform to help underrepresented students gain confidence and equality in their education when pursuing computer science.
For our research, we wanted to focus on 2 primary aspects: educational programs and digital portfolio platforms. Coming into the project, our client had discussed their vision for embedding a portfolio. As a result, we wanted to be able to incorporate that into our research before furthering that idea into our design plans.
To start our research journey, we wanted to first brainstorm different solutions and ideas we can gather for each objective we had in mind to our problem statements. Separate from organizing interview questions for the user research we planned to have, we first categorized our process into 2 problem statements and specific objectives for each problem:
This process was repeated with our competitive analyses and outreach methods for who we wanted to target. This ranged from thinking about which high schoolers we could target such as their interests in cs versus non-cs, different communication platforms that could get us access to outreach, and more. As you can see, this is where all the brainstorming occurred, and what our final solutions I will later explain are dependent on. It was the grounding point in our process that allowed us to build off of it.
We designated an area where we could start brainstorming interview questions we wanted to ask our users to better understand their personal experiences with computer science resources and navigating through it whether that involved professional work (portfolios and projects) or more creative individual projects for personal growth. Similarly we also created objectives on 2 different criteria: (1) Portfolio and showcasing projects (2) General experiences with computer science resources and Codology as a resource itself. This led to:
1. Better understand what aspects are lacking in existing resources and how that has impacted their education and views of computer science
2. In addition, we also asked portfolio-related questions to see their understanding but also what parts we can help improve their experience in either exposing them to this resource or their transition when creating one (such as their motivations and expectations)
3. Furthermore, this was an opportunity for us to understand their personal passions and motivations in computer science that fosters this spark of interest that they want to pursue
Competitive Analysis on education and portfolio platforms
14 different platforms: CodeAcademy, DesignLab, brilliant.org, Coursera, Harvard CS50 Online Class, Udemy, Khan Academy, Learncs.online, Mission Bit, Street code Academy, LinkedIn, Github, DevPost, Kaggle
Our analysis involved platforms that weren’t just specific to portfolios, our goal was to also incorporate a free expressive platform that enabled students to showcase their work in not only a professional setting but also a creative one
Our analysis involved platforms that weren’t just specific to portfolios, our goal was to also incorporate a free expressive platform that enabled students to showcase their work in not only a professional setting but also a creative one
We transitioned to Affinity mapping to categorize our main ideas from our insights. This allowed us to prioritize and group key insights for us to come back to throughout our design process, and keep the users in mind when we develop our designs.
Our team observed behavioral patterns from our user research data to ultimately group similar people together into different types of user personas. Not only would this help us create a greater understanding and empathize deeper with the target users, but it would also provide direction for making design decisions going forward.
After our research, we decided to implement an additional resource for Codology that we initially brought up in the beginning stages of our project timeline. One of the primary things we wanted to keep in mind was feasibility, so we left a lot of ideas on the table but believed that we could pass on our career panel to Codology to wrap up and finalize. As a result, we wanted to add another component that would solve our problem of community engagement among learners. Rather than a product we create, we used an existing platform and organized it so it would be easy for Codology to share to their users: Discord. We brainstormed based on:
We developed a user story map to help guide us with the various implementations of the portfolio. We noticed there were a lot of components that we needed to consider and as a result, could be overwhelming. We wanted to do a step-by-step process that took into consideration the user personas we created at the beginning of our project.
There were 3 Levels: (1) High-level Activities (2) Steps (3) Details
This was where we took our user personas and envisioned what different components they would primarily use based on their needs.
Intended to create general user processes to help us begin our design
Ex. Reflective learners who prioritize and find importance in feedback and reflection might want a section where they can add a past project emphasizing growth, reflection and progress
We got more specific in the process of the generalized components of our project. We first categorized our ideas into features such as profile, progress check, community forum, and sharing your portfolio.
For each of these features, we developed a generalized process of each step that we would like to see. This was a more informal version of a user flow.
Contained all the details that would be needed to fill in the gaps. This may consist of the project details of a published project on someone’s portfolio.
This process made it significantly easier to develop a design as we could always refer to the components that we found essential in our prototyping.
These 3 levels were an organized method for us to efficiently go to the next step of prototyping. We wanted to ensure a smoother transition because of the numerous features we wanted to include for a successful prototype. We were able to consolidate all of our supported features and group them to assign tasks for each designer to develop. Throughout our process, we prioritized the clarity of each of our teammates. We really wanted to make sure everyone was on the same page which is why we took the approach we did.
Below are the wireframes we constructed based on the final features we developed. Each member focused on a specific feature so we could optimize the development of our project. After each iteration, we presented our ideas and re-designed them based on the feedback that we received. From these lo-fi’s, we directly transformed them into mid-fidelity wireframes.
We interviewed 30 users. In this particular iteration because we were presenting mid-fidelity wireframes, we separated our users into 3 groups
Some of the feedback we gathered were:
1. To personalize the name of the portfolio, rather than using the Codology name on the top of the frame to have users feel like their portfolio is their own rather than Codology’s
2. Make codology’s brand less apparentFor the personal dashboard, a journey map of moving through different levels, courses and projects could be fun and encouraging to motivate students
3. A more detailed feedback was having tags for users depending on what they’re interested in such as environment, games
We also received positive feedback about how clean the interface was in addition to how it’s intuitive and well developedIt was really nice hearing that we were going in the right direction
1. Creating a personalized experience for users when creating a portfolio
2. How can we add components that might enhance the learning experience through excitement and reflection?
3. In what ways can we allow for less restrictive expression when sharing their projects?
Our second iteration for prototyping was creating high-fidelity wireframes. We followed Codology’s branding guidelines, in addition to modernizing the interface. While developing the final prototype we had difficulty figuring out what specific information should be added to complete the profile and what was visually appealing for the users. Our primary goal was to personalize the users’ experience.
Although the current template that we created could be limited, we believed it wasn’t feasible to create more templates so we decided to stick with our first template that was still personalized but organized for students who didn’t know how to start.
1st Deliverable: Kudos
Kudos is a platform for individuals to share their own computer science projects and celebrate the work of others. We want to empower our users to keep creating. To facilitate this, we allow users to browse projects for inspiration by topic or skill, recommend new skills for students to learn and emphasize the act of “giving kudos” to others.
Discovering new projects
Where you can find projects that interest you and may inspire you to take on a new passion project. There’s a recommended area based on your interests and preferences and you can search projects if you have a specific topic in mind. This is a public space for people to share their projects in addition for people to find interest in other’s work to share and comment.
Empowering Self growth
This is our implementation of a dashboard that is in the perspective of the user’s profile. We implemented different components in the form of widgets as we thought it looked appealing but was organizationally a smart move. The widgets included a place where you can edit your profile, see your goals that you set and the progress, in addition to adding new goals. This is also the area where you would manage all your projects. We wanted this space to be optimal for personalizing everything that you would share publicly or even privately.
Celebrating the work of others
This is what it looks like when you publish a project and the different components that can be added when you first write your project. There’s a section where you can describe the project, talk about all the aspects from the challenges to the strengths. In addition to the code that you wrote to make the project.
A big part of our project, even if it was a small feature, was allowing users to celebrate the achievements of others. This would bring a supportive community, in addition to motivating others to continue their amazing work. This is the basis of our brand kudos where you applaud the work of others. Rather than just putting a like button we wanted to personalize it specific to our platform. In addition, you can see there’s a place where you can see comments that other students wrote. This is to create an interactive space for students to interact and support one another.
2nd Deliverable: Career Panel - Amplifying Diverse Perspectives in Industry
This part of the final product did not include a design process but rather we outreached to different professionals on LinkedIn and allowed Codology to organize the details achievable for their company.
From our user research we found that students belonging to underrepresented communities were discouraged from learning computer science because they lacked a guiding figure to demonstrate the possibilities of the field. As a result, we dreamt up a career panel to amplify the stories of individuals with non-traditional or status-quo-defying trajectories in tech-adjacent fields. We have speakers who are first-generation students, formerly unhoused, university re-entry students, accomplished product leaders, community advocates and more.
Next steps: we have contacted all of our speakers but need to continue with the logistics (Date, time location) and market the event. We still need to tinker with the questions and be more specific with our questions.