CODE EVENT EDITOR
CODILITY
OVERVIEW
Codility is a B2B tech recruitment platform that assists companies in assessing the coding skills of potential hires.
The goal of that project was to develop and introduce a new feature called "Code Event" to help companies host coding challenges involving a large number of participants.
This feature will help to promote the company through activities like branded campus recruitment or internal hackathon events. Considering Codility's objectives to maintain customer retention and attract new customers, this feature was crucial in achieving those goals.
MY ROLE
I joined the team when they had an MVP state of that feature.
My role was to lead the entire design process, starting from conducting user research, designing the interfaces and prototypes, and conducting final user testing, while collaborating with developers on implementations.
APPROACH
To become familiar with the project's objectives and the customers' goals, I spent time researching all available data and familiarizing myself with the product.
I explored potential customers, their needs, and created concepts in rough wireframe format. This approach usually helps to gain a solid understanding of the project objectives before diving into real user research and conducting user interviews.
USER RESEARCH
Even though I joined the project while concepts were already designed and built, I chose to approach it as if I were building it from scratch.
I didn't solely rely on data from existing customers but also conducted research with new customers unfamiliar with any Codility projects. This allowed me to identify their pain points and goals more completely.
Analyzing user interviews in a Dovetail
Using Dovetail helped me transcribe the interview, analyze, and organize responses by categories such as pain points, opportunities, positives/negatives, etc.
EXPERIENCE
IMPROVEMENTS
While brainstorming new ideas and concepts, we also had to meet our business goals and improve our existing MVP product. Since the features were built at a fast pace for proof of concept, the experience had numerous usability issues such as dead ends and lacking logic.
I worked with the product manager and the development team to fix these problems while working on a completely new design concept to improve the feature.
FEEDBACK
My design process usually includes creating a couple of different options and sharing them with my team of developers and product manager, as well as designers from other teams to get their input and feedback.
The format I use is a FigJam board with sticky notes and voting stickers. I've found that this method of gathering feedback is more effective, as it allows everyone to access the file in their own time and leave feedback.
NEW DESIGN
My biggest and most exciting part of building the CodeEvent feature was the complete redesign of the experience. All the previous work I had done with user research and improving existing designs helped me to design a better new experience.
One of my objectives for the redesign was not only to include all the features needed for the user but also to create a user-friendly and smooth experience.
By creating an editor, I wanted event organizers to feel like they're not just setting up code challenges but hosting a social event similar to what they would do on platforms like Meetup or Eventbrite. This way, they can promote their company and brand however they want.
I intended to accomplish it by:
-
Creating an editor and a preview view side by side, so the user could see right away how changes would look on the event page, instead of having the preview available only at the last step of the creation process in the old design.
-
Pre-filling the event information based on the data we have from that company, and proposing the most relevant test options, as opposed to just providing a long list of all available tests in the old design.
-
Adding placeholders in sections like “About the event" and “Why join the event," giving organizers hints on what information they could include. This improves the user experience and makes the test creation process smoother and faster.
-
Allowing users to choose different themes for the event page. I created a set of color tokens to ensure that text color changes accordingly with the background, maintaining the right usability contrast.
-
Making a mobile preview of the event page available on the editor.
USER TESTING
Task-based user testing with Maze:
With new prototypes ready, I created a task completion test using Maze and shared it with internal teams as well as with our customers.
User observation sessions:
-
We had a couple of calls with customers who were using the prototypes while we observed their behavior.
-
Additionally, we received some feature requests for improvements, such as the ability to create a shareable link for social media sharing, a sharable QR code for easy access to event previews, and improvements to the email communication process for event participants.
FINAL DESIGN
KEY LEARNINGS AND CHALLENGES
The redesign of the CodeEvent experience was successful. The test showed a positive response from users, with a task completion rate of 94% among the 12 participants. During the interviews, we received overall positive feedback, particularly about the ease of use and the live preview section.
Some challenges we encountered in applying the new design to the product included the need to maintain and support the previous designs, as they are actively used by users. Given the fact that our team is small (we had 3 backend and 2 front-end engineers in the team), it could be challenging to build. The approach we took was to prioritize maintaining the existing product while building a new editor with medium priority. We then gradually transitioned customers to the new experience.