Codiga Redesign Journey: A designer perspective

Designing a digital product is very similar to coding: you use little pieces of elements to build a system that works consistently.

When I joined Codiga (Code Inspector back in the day) I immediately identified that we had a consistency problem between branding, website, and platform. It was not an easy problem to solve because there was a current product running and being used by more than 10,000 developers and 600 organizations worldwide, so any changes we want to implement would impact a lot of users, albeit temporarily, and possibly even hinder their productivity and overall job performance. In addition to this, we needed to take the product to the next level in terms of design and usability, while adding new features and improving the platform based on internal and external user feedback. There was a lot to think about!

Then, we changed the name and designed a brand new logo, but we had the same interface with the same bugs and glitches so, where do we start?

Past

“If You Fail to Plan, You Are Planning to Fail” — Benjamin Franklin.

Like everything in life, you need to start small, stay focused and divide and conquer. So, we planned to focus on a few key areas like improving the design and usability of the Coding Analysis tool, which was our core product at that time and improving our IDE’s plugins. We did not have the time (or privilege) to start building a design system for months, so we needed to do everything at the same time while still focusing on one thing (sounds crazy, right?)

I’ve worked with many agencies and companies, but being in a startup is something completely different. You have to work hands-on, wear so many hats at the same time, be constantly out of your comfort zone and really love and believe in what you’re doing. Even as an organization if you have a clear vision and mission, the execution can pivot anytime and you need to be prepared for that every day, manage the ups and downs and keep moving, faster!

“Be water, my friend.” — Bruce Lee

Back to design, we started translating full interfaces on desktop and mobile, defined general layouts, and documented use cases. After having a general idea of the design, we abstracted little pieces called “Atoms” like colors, typography, and spacing, and saved them in a Figma library. This contains all these objects which are connected to all the interfaces. The idea was to make components of everything and make them reusable, so we can iterate faster. All this while we were working on hotfixes and overall improving the visual and user experience, it was a lot, but very worth all of the hard work.

Present

Now, with a design system on Figma with all components properly connected to all the instances in our interfaces, it’s easier for us to iterate faster. All components are equally documented in Storybook, and have been built based on Chakra UI.

But it’s not only about the tools or frameworks we use, but the process we follow: daily standups, no meetings but a lot of communication over Slack, Jira and Discord is important. Is better to ask than assume, even if you assume that is a dumb question. As a company, we don’t have a tree structure organization so ownership it’s also a very important part of our culture that helps us to achieve our mission.

Future

We will keep improving our Platform and Plugins while listening to our user’s feedback. We’re also working on Smart Code Snippets, which is a way for developers to focus on code logic rather than writing long lines of code by suggesting contextual code snippets. When using our Coding Assistant tool, a user can subscribe to any public Smart Code Snippet on the Coding Assistant Hub. This robust search tool allows you to find Smart Code Snippets based on language, name, or keyword and tag associated with the pattern of code. Once you find the snippet best suited for your task, you can then populate it in your chosen environment by simply typing in the name or keyword associated with the Smart Code Snippet

Coding Assistant also acts as your own personal Code Snippet Manager and allows you to add your own Smart Code Snippets that you can share publicly, privately, or with your selected team. Smart Code Snippets can be created on our web interface, or directly in your IDE.

Lastly, we are working on a new Gamification system with badges, the introduction of Karma Points, and more to come, just buckle up and prepare to keep living this journey with us!