UX/UI Design for Codemagic Developer Personality Test

Codemagic’s marketing team wanted to do something fun for the developer community. They came up with an idea of a Developer Personality Test – something similar to Adobe’s Creative Type Test, but for developers. I created the illustrations as well as the UX/UI Design for the Codemagic Developer Personality Test.

The marketing team mapped developer personalities into 6 types and came up with wonderful questions.

Illustrations for Developer Personality Test

Illustrations of the Developer Types

Creating illustrations for the 6 personality types was very challenging. Character design was a completely new thing for me and I had many questions. The task seemed huge. Where to start?

Design no 1 – logic behind every move

I decided to start with a mood board, presented it and got a green light to move on to the designs.

Because my creativity is more of a method than a madness, I needed some systems or framework to base my work upon. I spent hours figuring out the logic behind the types – what are the common traits in the developer personalities and how can I show them visually?

Codemagic Developer Personality Test – building blocks for the characters

Next up was actually creating something. The pre-made logic helped a lot, but it was still a struggle to come up with cool designs for the characters. I wasn’t feeling the Aha! moment. I kept going and when I had designed 4 different variations for 5/6 characters, I presented my work again.

This time I got a red light.

The characters were great, but they didn’t have enough Wow! effect.

Codemagic Developer Personality Test – Illustrations 1

Design no 2 & 3 – not there yet

Codemagic Developer Personality Test – Sketches

Starting off from ground 0 again was difficult at first. It surprised me how fast I was able to let go of my previous designs. However, having fun with illustrating again, that was the tricky part.

I presented 2 more design possibilities. However, they too were “not there yet”. I was asked to create yet another design.

Codemagic Developer Personality Test – Illustrations 2 & 3

Design no 4 – another dimension

Codemagic Developer Personality Test – Drawing process

3D to the help

I searched for amazing pictures of pose references. Then I chose a pose that I liked, re-created and tweaked it in my iPad’s 3D program. After that, I adjusted the angle to create more dynamic poses. Sketched and simplified the poses and vectorized my drawings.

The key take-aways

Getting the illustrations right was tricky. But during the process, I learned a lot.

  • Sometimes only the mood board is not enough
  • Especially in the art field, things might get easily shifted through communication
  • To get over the creative block, just start again. Small steps got me back on track.
Codemagic Developer Personality Test – Landing

UX/UI Design for the Codemagic Developer Personality Test

In addition to the illustrations, my task was to create the UX/UI for the Test’s web page. I enjoyed this part the most.

Criteria for the Web Design

  • The style needs to be similar to Codemagic’s web page and app.
  • Not too crazy – we were going to use Flutter Web to build the web page
  • Needs to look awesome!
Part of the style and component sheet for the Developer Test Types

The design process

I started off with the Test part while I was still working on the characters. As there weren’t many views in total and as the style guide was based on Codemagic’s previous design, it made sense to move very quickly from the UX phase to the UI.

From the start, I had this idea of using bits and parts of the characters’ building blocks and reusing them in the Web page design. And because the characters changed a lot, I also kept changing the design quite often.

Some different views for the Test part in Codemagic Developer Personality Test

While I was still designing the web page, our developer had already started working on the front-end, using Flutter Web.

Codemagic Developer Personality Test – Landing
Codemagic Developer Personality Test – Test
Codemagic Developer Personality Test – Result
Codemagic Developer Personality Test – Types