Process Work — Gecko Logo & Illustrations
One of the things that make creatives stand out from their competition is having a unique identity that shows users the nature and thought process behind the conception and development of their ideas.
Towards the later part of 2020, we at SiriusLabs decided to work on an idea we have had for a while. We previously had issues with getting feedback from clients and keeping track of tasks that needed to be sorted out before deadlines. Yes, we also tried different project management tools, but in the end, they turned out to be more tedious than helpful. This is why we came up with Gecko, a software management tool for developers that helps streamline and organize stakeholder feedback.
The design and implementation of this platform took a couple of months to flesh out, but one of the aspects we were keen on is having illustrations for the different empty states. It is easy to ignore empty states because nothing is really happening on the screen, right? Nope. Many software products have illustrations that convey meaning and next steps to users: whether it’s the on-boarding process, success notifications, or empty states. Just because a section of a page is empty doesn’t mean it has to be empty.
Our team created Guadalupe, or Lupe for short, a mascot to represent Gecko. We sketched and visualized ways to leverage Lupe at different states within the platform. This helped us refine our overall approach to Gecko. We saw Gecko as a problem-solving platform, putting pieces together to see the clearer picture: like a puzzle. With this analogy, we came up with different icons such as puzzle pieces to represent issues, and boxes to represent projects. We began to see how having a story behind Gecko’s identity would help us design and build more effectively.
Crafting Lupe took time and numerous iterations: with rough sketches, 3D comparisons, and understanding the anatomy of a real gecko, we eventually found his form. We created a mood board for inspiration, noting different features of the animal for our mascot. We initially wanted to have our gecko look like an actual gecko, but after numerous trials, we decided to give it a more friendly and unique feel. Using Disney’s Bruni from Frozen 2 as inspiration (yes, we watch cartoons too), we were able to get an idea of what the first version of our gecko would look like. We began sketching to get a feel of the character and progressed to digital designs after.
One of the difficulties we had was getting the mascot to be recognizable. We tried adding some items to it but in the long run, it didn’t work so we scrapped that idea. Instead of our first version, we decided to run with a stationary character that had a unique facial expression. We chose stationary as opposed to motion to signify the waiting process. An empty state means something is yet to happen, as opposed to nothing happening and all that’s left is for the user to do something. So we design our gecko to stand in anticipation of activity on the part of the user.
Making more changes to this character’s design, we settled on this cute illustration for our mascot. We gave him our blue brand color and made him stand out by removing the realism from his illustration style. With this done, all we had to do was craft out stories for each empty state in Gecko.
And now the empty state illustrations…
Issues: For the Issues empty state, we had Lupe standing in with a smile on his face, waiting for the user to begin creating issues. Since the end goal of issues is to have them resolved, we visualized issues as puzzle pieces and added a checkbox to signify the potential of getting things resolved. While other puzzle pieces that are near a question mark signified issues that are yet to be resolved.
Projects: The Projects empty state has Lupe opening the lid of a box containing puzzle pieces while looking at a list of tasks and a timeline slowly going by. We wanted to communicate the nature of handling projects. Seeing the list of todos and with an awareness of the timeline, developers can dig in and resolve issues one at a time before completion. The process of seeing project boards filling up can be a daunting experience, so we came up with this design to show that it isn’t something to be overwhelmed with.
Clients: The Clients empty state had Lupe do a bit more than stand there waiting. We had him running towards some other illustration elements as though he was eager to meet them and engage. Kinda like the ideal client-developer relationship, you know? We designed an icon for the Clients feature, making two silhouettes come together like two puzzle pieces. We designed a hand with a list to represent clients presenting their feedback to developers, who we represented with Lupe’s hand taking a puzzle piece. The feedback aspect is one of the key features of Gecko so having this illustration was very crucial for us. We wanted both parties to understand that giving and receiving feedback is a collaborative process and should be welcomed and not give anxiety to the point of creating memes about clients to ease frustration.
Highlights and Notifications: Another feature in Gecko is Highlights. This is where users see what each of them has been up to. Illustrating this was tricky because we had some difficulty trying to capture this process. We decided to use some of the previous design elements, taking the Highlights icon, the project box, and puzzle pieces. Since this was where we would see most of the activities in Gecko, we designed this state to have a bit of everything we’ve previously done. It’s not laziness. It’s called sampling. We also applied this in the design of the Notification state. Having a notification bell looking drearily grey wasn’t enough for us. We wanted to splash some colors and throw in some other design elements into it.
In retrospect, this was a fun and reflective process for us. We knew this was just our first version and as we get more users on the platform, we will have to make more iterations to what we currently have and create others we may have overlooked. We learned the importance of having the Gecko brand identity show itself to users in the product itself and not just external paraphernalia.
Make sure you sign up with us here to get early access and get more of our processes and features before we launch.
