The final project in General Assembly was a three-week design sprint to explore the social community feature of Utopicode’s recruitment website. In this project, I worked with a team of four UX designers, India Barrow, Christopher Barlow, and Lela Grzybowski.

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 the perspective of a moderator who might communicate in it.  To explore how to facilitate mentoring through these features in either setting people up or building out a way for mentors/mentees to be connected 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. 

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

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

Affinity Mapping

To extract their insights, we divided the affinity mapping into senior and junior groups. We found various commonalities and contradictions, which helped inform our design decisions in our next steps. Community  Senior and junior developers both engage in dev communities initially because they encounter technical problems in their works.  Yet, there was a partitioned pain point. Seniors felt the dev community platforms are saturated with repetitive content and free-riders trying to do their homework by reaching out to the community. Juniors, however, felt trolled and fed up with the negative mentalities on the platforms. Mentorship All senior and junior developers are willing to share their knowledge and help each other. Juniors are happy to pay for a detailed and come with certain guarantees, i.e., securing a job position. Senior developers also said they are happy to mentor, but they are usually too busy in their job and life.  Gamification We found the most diverse opinion on this design approach, while most of the senior developers have a practical mindset, and they are too experienced to understand why a platform would gamifying interactions, will be turned off by it. Junior developers, on the opposite side, are highly motivated by gamification. Feedback As an old saying goes- feedback is a gift. We gather a united opinion that both senior and junior developers value feedback from their peers. Softskills Surprisingly developers valued soft skills which break our assumptions. While senior developers develop their softskills in their career naturally, the juniors however, will develop it indirectly via reading and networking.

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.  Meet Carlos & Esteban

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."

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.
How might we?
At the first step in the session, we develop 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 likeminded 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.

Card sorting and site map

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

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

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.
Once we tested the mid fidelity for the second time we noticed that the onboarding process where the “Cody” avatar is introduced caused confusion. We needed to give users more instructions and coach marks on this part of the process.  4/5 users questioned that once they followed a profile or commented on a thread they would like to receive notifications or alerts on their profile.

High-fidelity prototype

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 a numerous of user interviews, and the time we spent are slightly longer than expected, we have so missing pieces to further explore on the insights we have, especially on the junior developer persona Carlos,  we could further validate the design with junior developers by more user testing with this target group, as well as another design studio specify to this persona.

We would like 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 also 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, this is something we have struggled with 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 make sure that 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 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’d like 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.
Featured projects
dCS Audio
The interim process of dCS New Flagship Product
dCS LINA DAC New Feature
Full process of dCS LINA New Feature development
Balance App
Explore solution to increase customers royalty.