I The project masterplan
Use the novelty and social media attraction of Flutter Web to generate more leads to Codemagic CI/CD
By creating a fun test made with Flutter Web for our users, we can generate more social media attention to Codemagic, and therefore increase signups
II Project constraints and criteria
After a meeting with the whole team, I put together some constraints for the project.
- Same visual language as Codemagic CI/CD
WHY? - the test is a gateway to increase Codemagic's brand awareness - The visual side must have a WOW-effect
WHY ? - to gain more social media attention, the test needs to be something cool worth sharing - The design needs to be simple to implement in code
WHY? - we wanted to publish as soon as possible, so no time for overly complex designs
III Wireframes
The "paper" prototype
I always start my wireframing stage with some sketches. I quickly tried out different layouts, and then moved on to jot down the user journey.
Codemagic Developer Personality Test – The "paper" prototype
The low-fid prototype
When the sketches were validated with the team, I moved on to create a low-fidelity prototype. For this, I used Figma.
Codemagic Developer Personality Test – Low-fideilty wireframes
IV Illustrations
Next up, I started working on the illustrations.
Step 1 - Figuring out the direction
The task was to create 6 illustrations - one for each test result.
So first up, I created a few moodboards and presented them for my team.
Shape
Simple, abstract creatures with geometric shapes. No gender
Style
Gradients, opacity, lines + filled shapes.
Step 2 - Creating building blocks
I decided to create some building blocks for the characters, that would illustrate their personality.
Step 3 - Experimenting with the building blocks
Next up, I started putting the building blocks together like lego pieces, to see what's coming out.
Step 3 - Experimenting with the building blocks
During the design review, I got some negative feedback from the team.
Step 4 - Back to square one
After experimenting some more, I decided to add a bit more realistic and dynamic style.
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.
Step 4 - Back to square one
✅ The team loved this new direction, so I went forward with this design and created other characters as well (six in total)
Final illustrations - six characters in total
V Design explorations
Codemagic Developer Personality Test – building blocks for the characters, first illustrations
VII Feedback
The community has loved it so far. We got a lot of great feedback from the team and from the community.
By mid-April 2020, over 2600 developers have taken the test
The project was supposed to be implemented as quickly as possible. But that wasn't the case. Instead of taking 2-3 months, the whole process took almost half a year. That was mostly because
And because of that, the marketing has lost a bit of its momentum. Flutter Web wasn't that new anymore, it was yesterday's news.
VIII Learning points
- Fully understanding the project scope in the beginning is very important. We didn't and it caused lots of confusion in the team.
- Probably should have made a small brainstorming session before starting the project just to discover alternative possibilities with lower effort and higher impact.
- Rather than making one stunning project in 5 months, we would have maybe accomplished a bigger overall impact with several great projects.
