Meet the new Coletiv brand
After the founding in 2017, we never changed our website design and brand until today. This year we decided to change that and invest in a complete rebrand.
At Coletiv, developers joining our team need to build an application to fetch the entire list of Pokémon from an external API. But, because this challenge does not have its dedicated design, developers in the recruiting process take a long time, not only to program but also, design the UI at the same time. 😅
In the real world, usually, developers don't need to worry about the UI. Often, they have access to a ready-to-use design file. But, because we didn't have the UI ready, we couldn't even evaluate how the developers followed a design. 📱
For that reason, we decided to invest some time in designing the interface for this Pokémon challenge. This Pokédex-like application should allow users to enter each Pokémon for more details on moves and other characteristics.
Here are the requirements of this app 👇
As a marketer learning UX/UI, my first attempt designing the homepage wireframe fell short. 🤣 But I learned a lot while doing it!
I tried doing everything from scratch (like a real greedy newb 😅) and forgot about the guidelines. This article, at least, saved me from messing up my layout grids.
The result: everything was super small and impossible for any person to interact with on a mobile device. And the text required a magnifying glass for you to read. 🔍
Here's to the biggest flop ever 🤡
So, after this attempt, I checked Material design guidelines for buttons, typography, and other elements like progress bars and chips. I also tested the interface using Figma Mirror on my smartphone to check if everything was ok.
Everything got a lot bigger, as you can see here 👇
Then, after designing more screens, I got together with our lead designer at Coletiv and got some feedback. Here are some things that I learned👇
After making many adjustments, here is the result 👇
If you're a newbie like I am, don't forget to take advantage of Grids and other Figma features like Tidy Up, Vertical Spacing, Horizontal Spacing, and alignments. 🙌 All located in the sidebar, at the top.
The shortcuts I used most were: the Shift + Arrows and the Command/Ctrl + Option to check spaces between elements. 🤣
The look & feel of the application is the best part for me! Seeing the before and after makes me motivated to learn more. 🤩 But it was the most time-consuming part, as I had to review it many times with our lead designer to make sure everything was ok. 🤓
Since it's a Pokémon application, the interface needed to reflect that same energy with bright colors and appealing illustrations of each Pokémon. Before starting, I created a small mood board to help set the pace for the UI design.
It looks like this:
Most of the designs were related to gaming applications and Pokémon itself. So my mood board has many fun colors and appealing 3D illustrations.
I mostly used Behance and Dribbble to gather inspiration and check on trends. I recommend you to try it out as well.
I still need to learn more about colors and typography, so I checked some recommendations from articles and tools online. 💻
I used Coolors to explore some trending pallets. But then it hit me. Pokémon types have specific colors associated that are important to the user. So I had to research and make some adjustments so that the interface could be consistent.
Inspired by the Pokémon logo, I decided to use blue and yellow for the interface colors. But with a modern twist in the tones.
Here is the final interface pallet 👇
Here is the pallet for the Pokémon Types 👇
In terms of Typography I went with the fastest route: use just one. 🤓
I wanted to use something modern, round and clean. So, I checked Google Fonts and Poppins seemed like a good choice for this concept due to its friendliness.
Let's get into the fun part! After trying out colors and typography and deciding on these aspects, suddenly, the UI gained some life.
At this stage, I created different components to make future changes easier. It included Pokémon cards, headers, tags, buttons, search bar, and other elements reused across the interface. You can learn more about components here.
The structure itself was faithful to the wireframes since I didn't make critical changes after reviewing them with our lead designer. 🙌 I did improve the headers and the Pokémon tags.
I used an iPhone 8 Plus frame and then added constraints to respond to different devices. Next time, I'll make sure to use a more recent smartphone!
In terms of look and feel, I decided to keep it fun, just like the designs in my mood board.
It was a challenge to add more depth to the look & feel, so I took advantage of shadows, transparency, and appealing colors and illustrations.
Last but not least: making it dance! 🕺
Figma makes prototyping very easy. All you need is to head over to the Prototype option in the sidebar and start connecting elements in your design. I only had to connect the dots between the buttons, cards, and the search bar to make it move. 💃
You can also define the device you want and the background color. Here's a good tutorial on Figma prototypes if you're also getting started.
Since there weren't many screens in our Pokémon application, prototyping was pretty straightforward.
Here's how the prototype looks 👇
To design this Pokédex, I used different resources kindly provided by the community of designers and Pokémon fans. Below are the links, in case you want to check them out.
Graphic Design
Research
Complete Pokedex (Pokemon Go)
Join our newsletter
Be part of our community and stay up to date with the latest blog posts.
SubscribeJoin our newsletter
Be part of our community and stay up to date with the latest blog posts.
SubscribeAfter the founding in 2017, we never changed our website design and brand until today. This year we decided to change that and invest in a complete rebrand.
I never thought as a marketer to start learning UX/UI design and Figma amid a global lockdown, checking every resource, and taking a part-time course at night.