Repicture is a STEM focused networking site for students in the early phase of their careers. For this product my team specifically focused on understanding how recruiters could fit into the existing Repicture system.
Project:
RePicture
Year:
2023
Role:
Lead UX Designer and Researcher
Tools:
Figma, Miro, Figjam, Jira, Zoom
OVERVIEW
Project Goal
RePicture is a public benefit corporation with the mission to increase interest and diversity in science, technology, engineering and math (STEM) - to "connect and inspire STEM careers so every student, engineer, educator, organization and company can achieve their goals."
Repicture presented these original these initial research questions to describe the scope of work:
How can we best present information in way to enable employers to find and evaluate potential entry level staff?
What elements are compelling for employers? What is missing?
How do employers find RePicture?
To help RePicture achieve these objectives, our team performed iterative cycles of research, design, and evaluation to ideate and generate product concepts that end in high fidelity designs utilizing the existing design system.
Deliverables
Our team took a user-centered approach and prioritized gathering user data and input to distill insights. We conducted a series of five sprints that allowed us to continually update the prototypes as we gained insights from interviews and testing. For each sprint we communicated our findings to our stakeholders through graphical user models and went over the prototypes which had varying levels of fidelity throughout the sprints. At the end of the project all of our findings, recommendations, prototypes, and updated design library were passed off to the client.
Oral presentations
Graphical user models (e.g., affinity diagram, journey maps, and experience models) that reflect research analysis
High-fidelity tested mockups (5 pages)
Project documentation handoff for stakeholders and developers
My Role
My role in the project was primarily as a UX designer and researcher. In the beginning phases of the project when the team was conducting preliminary research and interviews I helped to recruit users and conduct interviews. For the first iteration of our prototypes, I sketched initial ideation sketches for the three main pages we focused on and created the high fidelity alumni page screens. For the second round of testing, I facilitated usability tests for two users. I created the student profile input page flows and updated the screens based on our final round of usability tests.
Alumni, Profile, and Project Pages - Published View
NITTY GRITTY
Process
Sprint #1 - Clarifying Scope, Initial Product Research & Heuristic Evaluation For the duration of Sprint #1 we made sure we were aligned internally and with the client on what the project expectations were. We conducted important initial research and analysis of the product alongside preliminary interviews with client staff and end-users. Our main focus was to concretely define and map the problem statement.
Sprint #2 - Recruiter Interviews, Diagrams & Lo-fi Solutions We prioritized research to test the initial claims made in the first sprint. We conducted in-depth research with recruiters and career service professionals. We interpreted our results and created an affinity map, user personas and a journey map to present to our stakeholders. From the data we generated ideation sketches and 3 low fidelity solution concepts (project, profile, and alumni pages) that we presented to the client.
After Sprint #2 we realized that although we interviewed recruiters they only represented the initial phase of the recruitment process and we needed to speak with hiring managers or people in charge of selecting candidates to hire because these were the people that we assumed would go into more depth on student profiles and projects. We also realize that from the sample of recruiters that we talked to the majority of them worked at mid-sized to large companies. After meeting with our stakeholders, we better understood their desire to target smaller companies.
Sprint #3 - More User Interviews, Usability Testing(A/B), & Hi-fi Prototype We created higher fidelity designs (project, profile, and alumni pages) and began usability testing. We decided to do A/B testing to understand how users experienced the existing system versus the new prototypes we created. We also conducted additional interviews with hiring managers at smaller companies. Edits were made to the prototype based on the findings from the usability tests and additional interviews
After Sprint #2 we consulted with our stakeholders and decided to re-center our focus on only the profile and project pages because they presented the most complex usability issues on the existing RePicture site.
Sprint #4 - Usability Testing (Task Based) & Refining Prototypes We took the duration of Sprint #4 to refine our prototypes.We conducted additional usability tests that were task oriented to gauge ease of use and clarity within the updated prototypes.
Spring #5 - Finalized Designs & Documentation Hand-Off For the final sprint the client wanted us to design the input process for students based on the new profile and project page designs we created. We conducted usability tests on these designs. The final part of this sprint was a handoff of all the research and design materials we generated over the course of the project.
Issue: Going to edit the account’s profile seems to take the user to a completely separate page from the main site. Because the page looks so stylistically different, users may feel like they’ve been taken to the wrong page. It’s conventional to allow any profile edits to occur directly on the profile page itself, so that users can see exactly what fields they are editing.
Recommendation: Keep profile edit on the same page as the profile itself and avoid navigating to a separate webpage, and keep visuals and styling consistent with the rest of the website.
User control and freedom
Issue: The only way to create a new project is through clicking "upload a project here" within this dialogue box. However if a user accidentally deletes the dialogue box there isn't a way to get it back/create a project without a hard reset.
Recommendation 1: All of the profile editing/project creation should be done on the profile page itself. Like linked in/the new designs.
Recommendation 2: The manage projects page is under used and would be a great place to house the project creation section.
Recognition rather than recall
Issue: If you came from a profile to a project page it is too easy to forget what profile you came from or how the the student you are interested in is involved. In this case they are the page owner but that means little to an employer and what if two students worked on the same project. Who would be the page owner in that situation? Furthermore, It is almost impossible to deduce who on this page is a student looking for work and who is a highly skilled currently employed engineer. This distinction needs to be way more clear.
Recommendations
Possibility 1: Breadcrumbs could be a simple way of solving the "who worked on this project again?" issue but I think more realistically a refactoring of the entire page is required to address that and all of the compounding problems it brings about.
Possibility 2: To be as general as possible a distinct separation between students looking for jobs and established engineers needs to be made on the project page. That way if an employer is interested in a specific project he doesn't have to comb through all of the profiles on the page looking for the one real profile of a student.
Possibility 3: Another recommendation would be to just entirely remove all of the unclaimed profiles on the site and if a individual who was linked to a project makes a profile just automatically connect them instead of automatically making a profile for them.
Flexibility and Efficiency of Use
Issue: From an employers’ perspective It would be quite challenging to use these filters to find what they are looking for. One main issue is the inability to select multiple options within each category. Another is the lack of flexibility in areas like years of experience. Outside of functionality the filters also unnecessarily obfuscate much of the relevant info.
Recommendations: Many of these issues can be solved by looking at similar filtering systems from larger companies. Filtering has become sort of a perfected science within E-Commerce so much of our recommendations will be sourced from them.
Multiple selections within each category needs to be available, this is most easily accomplished by making each relevant category a menu with checkboxes fig.1.M
However now that we are allowing for multiple selections we need to make sure that the user is aware of the filters they have tuned on and can easily turn them off at any time. This can be done by implementing tags at the top of the page with each filter and and X next to it fig.2.M
The next issue is the "years of experience" filter. This is a range so it can be solved in a few different ways.
We could go the amazon direction Fig.3 if we think there are obvious set ranges that people will want to search for.M
However if we expect everyone to have different preferences for their range of experience we can implement something like a slider Fig.4 to allow customization.
The filter panel is detached from the rest of the site (the panel can overlap the other sections if scrolled). The language and placement of the filter buttons is also not conventional, as “Apply Filters” would be a more intuitive button to convey.
Interviews
We conducted 5 interviews (3 recruiters & 2 career counselors) to understand the recruitment process and key features that were important to recruiters and potential gaps in their current processes.
Later we interviewed 2 more participants to get a sense of the recruitment process of small companies/startups
Some questions we asked:
What are some pain points in the recruitment process as a recruiter?
When looking through countless profiles, what can help someone stand out? Are there any particular things you look for in general?
Imagine you’ve just arrived at the LinkedIn profile of an applicant. Tell us about your process and the first things you might look for.
Do you ever follow external links on resumes, like to a personal website, portfolio, or Github profile?
If you had a magic wand, what would you like to see on a platform when recruiting applicants?
Key Findings from Interviews
Recruiters make speedy decisions when reviewing applicants, there is room for personality later in the process.
Employers are more likely to spend time viewing projects for new grads/students.
Existing platforms are non-specific and do not encourage clear communication.
Recruiter Pain Points: Lack of centralized communication between recruiters and students, the process of getting a candidate hired beyond just finding a good candidate can be frustrating, unqualified candidates, and not knowing where to find quality candidates
"Especially if you’re a student with little work experience, relevant stats and projects on a resume is important"
From our research we created two personas and journey maps to reflect what the recruitment process looks like for students and recruiters. Here we identified areas of opportunity where RePicture could fill in gaps. We found this particularly helpful for recruiters looking for diverse candidates and reviewing projects and portfolios.
This is the persona for a typical recruiter that would use Repicture's site.
This is the persona for a typical student that would use Repicture's site.
From our research we presented the client with 3 distinct solutions and they decided to focus on the solution that prioritized revamping the student profile page, developing a layout for projects that balances easy readability and depth of detail, and highlighting RePicture successes by calling attention to RePicture alumni, leadership, and opportunities.
Some of areas of opportunity for Repicture to fill when it came to recruiters journey on the site:
Provide effective guidelines for creating a professional profile and effective portfolios
Create a transparent, straightforward way for students to contact recruiters
Usability Test
Phase 1 - A/B Testing
Research Question: “Do our proposed re-designs present a significant improvement over the previous version?”
Methodology: Conducted 1-hr sessions over Zoom with screen-share. A/B Test: Users randomly assigned a version of the site they would see first.
Three part test:
Part A: New Profile/Project Prototype Screens
Part B: Original Profile/Project Screens
Part C: New RePicture Alumni Prototype Screens
Introduced a scenario for each part, then allowed each participant to walk through the screens as they would for a normal applicant
Key Questions
Are participants able to get a good sense of the candidates’ qualifications?
Do you feel the profile helped you to better understand the candidate’s personality and their
achievements, in addition to viewing a resume?
Did you notice the different types of projects? If you had to take a guess, what do you think would be the difference between individual, interest, and work projects?
Did the projects section influence their view of the student?
Do they view the candidates as credible?
Areas for Improvement
Profile Page
Context for the green check mark badge
Order, structuring, and labeling of the different project categories
Offer more opportunities to highlight skills, process, and tools used
Project Page
Requires cognitive effort to fully understand the relationship between project and profile pages
Need clearer labels for project sections
Alumni Page
Purpose from a recruiter perspective was not particularly valuable
Need more clarity on: what “Alumni” means & what the year filter is in reference to
Phase 2 - Task Based Testing
Research Question: “Can potential employers navigate and digest RePicture profiles with ease?”
Tasked based testing where we measured: task success, SEQ (single ease questions), and the system usability score
“Yeah, I think it's really nice that they're able to highlight the work that they've done and they're able to create this cool template where it looks very easy to use, very easy to understand and digest. It looks very professional.”
“I think an article is mainly just a write-up with no experiments taking place, whereas a project you’re doing experiments [yourself].”
This was a big deal because clarity about what different projects were was a major focal point throughout the project.
Most tasks were completed with ease, one that was the most challenging asked: You want to potentially email Alice to reach out about an opportunity, could you please find Alice's email address?
The users instinctively went to the resume to look for the students email address and completely disregarded the “other places you can find me” link
Takeaways: There was an opportunity to display the information in the header in a more concise way for users to find information (specifically students emails and alternate social sites)
Profile and Project Pages - Student Edit View
Usability Testing
Research Question: Can students effectively create profile and project pages on RePicture?
Once we finished an initial prototype of the student input flows, we conducted a second round of usability testing using the same set of metrics:
Task success rate
Time on task (in seconds)
Single Ease Questions (SEQ)
System Usability Score (SUS)
We conducted usability testing with a total of 6 student participants.
Results
Overall, users experienced no major roadblocks resulting in a 100% success rate for all tasks.
"I thought it was pretty good. I just liked how everything was labeled so I knew where to go. A plus means adding and a pencil means I can write." (U6)
Some small changes we made based on user feedback:
Some participants completely overlooked the header while trying to find the edit basic info button and took a considerable amount of time to complete the task (U4+U5). We updated the header buttons to be clearer call-to-actions.
Some participants needed clarification on the information they were asked to complete, as well as needing the context of what it was for. We updated the flow so that users can see where their information is going before filling it out, keeping things more organized and in-line with previous design decisions.
Some label text or instructions caused confusion for participants. For example, not knowing what "Add Section" meant or thinking they were limited to choose only one question. We updated our label text to be more descriptive and helpful.
Overall Summary
We confirmed through user interviews that the biggest area of opportunity for RePicture is for small to medium sized companies, particularly during the interview phase, where they look more deeply into an applicant's projects and personalities.
Validated Solution Features
Thoroughly researched profile page that satisfies the needs of recruiters
Organizing projects into sections to be more digestible and highlight key takeaways
Giving the user the option to see more if they want to
A more polished and professional profile
Condensing the bio, but maintaining the personal aspect of My Story
