Utopic0de Online Community
Explore a tech talent community which needs to look & feel like a happy place for developers.
Project Overview
Client
Utopic0de
Team
UX designers- Leo Wong, India Barrow, Christopher Barlow, and Lela Grzybowski
Duration
3 weeks
Year
2021
Skills
(UX) Research
Data Analysis
Wireframing
User Interface
Tools
Wireframing
Photoshop
Illiustrator
After Effects
Who is Utopicode?
UTOPIC0DE is a two-year-old start-up based in London but with a distributed team (some team members are in LatAm). They centralise, pre-qualify and upskill tech talent from Latin America through each community to connect them with job opportunities worldwide. The goal is to qualify tech talent (focusing on soft skills) to either direct them to positions or natural talent to learning places until they can improve.
The brief
We were approached by Utopicode, seeking to generate a tech talent community which needs to look & feel like a happy place for developers. The central part of their value proposition relies on how they attract and engage with tech talent. They constantly attract tech talent and engage by serving them and with what they like. They need to feel the urge to be a part of the community, find value in being a part of UTOPIC0DE, and want to come back daily. The community needs to turn from junior to senior tech talent—improve English level, soft skills, hard skills and coded hours.
Their main objectives were as follows:
．Design a new social community feature that will allow our users to connect engagingly through our Platform
．To explore how this space will be monitored to ensure it is safe from a moderator's perspective who might communicate in it.
．To explore how to facilitate mentoring through these features in either setting people up or building a way for mentors/mentees to connect through the platform.
After meeting our clients and understanding what deliverables we needed to achieve by the end of the three weeks, we started with the discovery phase of the double diamond process.
Utopicode gave us a list of potential interviewees. At first, we created a screening survey, which enabled us to gather quantitative data; on the other hand, we could send individual interview invitations to those who match our target developers.
The steps we took
RESEARCH
01.
Comparative Analysis
We analyse what similar platforms developers are currently using.
02.
User Interviews
we managed to get 11 interviews in total with both junior and senior developers from across the globe.
03.
Affinity Mapping
To extract their insights, we divided the affinity mapping into senior and junior groups.
04.
Persona
We create two personas which helped us empathise our user’s pain points and needs.
05.
Design Studio
Bringing the problem statements to the clients, we ran a design studio session together.
06.
Card Sorting
We conducted a close card sort exercise with 15 users.
01.
Comparative Analysis
While awaiting the results and replies from the developers, we decided to jump into competitive and comparative analysis to see what similar platforms developers are currently using. We looked at platforms like Dev.to, StackOverflow, Reddit, twitch, YouTube and Pinterest. All platforms are commonly used as skill-sharing tools and also work as a community. The key findings are
The good:
Dedicated interest group/channels
Tags to signify topics
The bad:
The massive volume of content makes it challenging to navigate
Trolls and toxic contents all over the platform
02.
User Interviews
After sending numerous interview invites after the screening survey, we need help to get responses, especially from our target group of Latin Americans. Not finding enough user interviews could lead to a massive delay in the project management perspective. While the clock is ticking, we expanded our interviewees’ demographic worldwide.
By expanding the demographic, we managed to get 11 interviews in total with both junior and senior developers from across the globe. Our main insights, which informed the development of the community features were divided into five key aspects:
-Community
-Mentorship
-Gamification
-Feedback
-Soft skills
04.
Persona
After synthesising the datas, we create two personas: Esteban and Carlos, which helped us bring a user-centred approach to out design, so we could empathise the our user’s pain points and needs.
Esteban is a senior developer, with the pain points of annoyed by the overwhelming stupid questions on the community platforms, while Carlos don’t like the negative mentalities and trolls on the platforms.
Problem Statement
"Esteban needs access to unsaturated interest groups because he is fedup with the redundant questions filling the general Dev Communities so that he might engage frequently with like-minded people"
"Carlos needs an active and level appropriate platform because he wants to develop and interact with likeminded people so that he might ask questions freely without judgment from others."
05.
Design Studio
Bringing the problem statements to the clients, we ran a design studio session together. Due to our time limitation, we try to focus on Esteban’s problem statement in the design studio.
At the first step in the session, we developed numerous of how might we questions, and we picked the top 5 HMWs into our next step, which are:
- How might we reject trollers?
- How might we identify redundant questions?
- How might we filter esteban’s content to be more personalised for him?
- How might we connect Estaban with like-minded people and amp up positive and engaging conversation?
- How might we get superstars to inspire soon to be superstars?
Ideation
A Prioritisation Matrix gave structure to this sea of ideas — highlighting the best and most feasible solutions. We picked five solutions that approached the problem from different angles:
Machine learning System apply across the platform - an AI that scan through the contents at the time users try to create new threads on the platform, it could avoid duplicated contents
Adding interest in tags on-boarding process - which help users to screen and prioritise contents on the platform, and to fit them in into different interest groups
Match a friend- using the data from interest tags, system could help users to match friends on the platform, which is an indirect approach on mentorship
Interactive world map - a graphical approach to spice up the sense of community, telling that “you are not alone” on the platform
Open blogs - letting users to create their own contents as blog format, and associate with forum, which provide them a platform as active skillsharing and soft mentoring.
06.
Card Sorting
When we as a team try to navigate to the existing site, we found that some of the categories are fell into groups that don’t match our expectation, that’s why conducted a close card sort exercise with 15 users. It showed clearly that mentorship is something that users do not associate with a community platform but events, forums and blogs they would.
Wireframe
DESIGN
PROTOTYPE LINK
Having the new site map ready, we begin to dive into the low fidelity prototype, we conduct 5 user testing on each version and iterate our design.
In our first wireframe, we created two task flows: browsing the forum and create blogs. It is always interesting to view the problem as a team, while we are all agree on the solution, but we have different layout ideas and varies details.
As a team member with graphic design background, I tried not to dominate in this process, as we are all learning something new, as I tried to unlearn what’s in me and let the process guide us.
And the we do get more insights and learn more from the process.
Mid-fidelity prototype
DESIGN
PROTOTYPE LINK
We began to add design systems and elements into our mid-fidelity prototype, making navigating more obvious.
Interestingly we found 100% of the users could not understand the highlighted threads under the community home page means and what this could take them to.
They are also confused about how we signify the threads if that’s trending or it is relevant to them.
4/5 users skipped past this section labelled ‘Interest Groups’ to find blogs and didn’t understand the meaning of the heading.
After gathering the first 2 user tests, we found that the users need clarification with the flow and intention of the whole design, so we decided to add the onboarding process on this stage and reinforce our design decision from the client workshop.
High-fidelity prototype
DESIGN
PROTOTYPE LINK
Gathering the insights from previous three stack of user testings, we come to our high fidelity prototype as our deliverable in the three-week design sprint.
I also create the Cody variants, from junior to senior, which match with 2 personas we had.
Next steps
Understand that we did numerous user interviews, and the time we spent was slightly longer than expected. We have so many missing pieces to further explore our insights, especially on the junior developer persona, Carlos. We could further validate the design with junior developers by more user testing with this target group and another design studio specific to this persona.
We want to test and fine-tune the onboarding process. We want to make sure the flow makes sense, all the elements work and that users are motivated to complete their profiles, but we also want to be sure we’re capturing as much data we can from each user to inform UtopiC0de’s recruitment team of everything they need.
We would also want to make sure we are testing the high-fidelity prototype in its entirety with UtopiC0de’s target Latin American audience. However, we have struggled with this as a team due to the language barrier and our limited capability in Spanish, and we are aware that only 1% of Utopic0de’s users access the site in English. We also want to ensure we aren’t missing anything of cultural significance in Latin America because we’ve tested with a wider range of nationalities.
Explore how we could categorise the level of a developer: if they are junior, mid-level or senior, to allow more tailored content, and how this content could be gated depending on the level to make sure we don’t have this saturation issue outlined in the primary persona and problem statement; Senior Devs have access to Senior Dev only forums for example. We are aware, however, that this differentiation isn’t straightforward and may present a challenge.
We want to explore the viability of the Machine Learning functionality within the forum because we believe this would be the key to making Utopic0de’s community offering stand out.
Key learnings
Breaking the language barrier - as a Hong Konger, English is not my first language. In this project, our initial target group is Latin American, while some of the interviewees' mother languages are Spanish. Which makes me and my teammates feel the same. Yet after conducting interviews with them, I realised no matter how crappy my language is, the more willing I want to communicate, the easier I find to connect with my interviewees.
Assumptions are a coin with two sides - as an experienced graphic designer, I have many assumptions based on my work experience. On one side, it helps the team develop wireframes and designs quickly. On the other hand, it needs extra work to validate my design decisions.
Utilise the five whys - while running user interviews and tests, it is interesting to ask “why” on each comment they speak, as the reason behind the good and bad are not the same as you think, and it happens often.
Unlearn to learn - holding your dignity from your experience will stop you from absorbing something new like a sponge soaked with water. In the middle of the design process, I felt extremely uncomfortable as we gathered a lot of data and were unsure what these insights would take us.
Devil is in the details – even if you think you are on the same page with your teammates, think again. As you will learn, we all have different ideas on every detail, and we communicated much as a team to minimise our difference.