Programming Hub: The Design System

Behind the scenes of our new design system.

Design is not just what it looks like and feels like. Design is how it works.
– Steve Jobs

During the initial phase of the development of our app, due to time and manpower constraints we didn’t really focus on the design and user experience of the app and used all the default components that were available within the development environment. If you have been using the app from the start then you might remember how basic the appearance of the early version of the app was. It was based on Holo UI and had minimal use icons with only fragmented colored blocks and texts. But as the user base of our app grew we realized how important it is for an app to have not a good but a great design and user experience.

This realization made us concentrate more on the design aspect of the app and we started working on redesigning our app following the new Google’s Material Design Guidelines. After months of research, discussions, prototyping and development we finally updated the app with a new Material Design look and released the update on March 2016. That was the eye opener moment for us as we saw a significant amount of growth in both the number of users as well as the positive reviews. Since then, we consider UI(User Interface) and UX(User Experience) as a vital component during the development process of the app.

After all,

We only learn from our mistakes.

The Next Step…

So now that we finally have a good design for the android app we also developed the iOS app using the same approach to achieve a good design within a limited time. Following that, we started designing the landing page and this blog. As soon as the design was completed we were happy with what we have achieved. But no… when we performed a deep review of our apps and websites we found that there were a numerous inconsistencies.

What Inconsistencies?

So yes, there were and there are still a lot of inconsistencies among the fonts, colors, typography etc. To summarize there was no uniform design/experience/branding across our platforms. To fix that – we needed a set of predefined rules that can be followed to have a uniform vibe across all our products. These set of predefined rules is the beginning of something we call as our Design System that will provide the foundation for crafting awesome experiences with a sense of uniformity.

What is a Design System?

Well there is no proper Wikipedia definition about a Design System. It’s just a fancy word we came up with to merge the entire concept in a meaningful way. We define our Design System as a set of rules/guidelines that can help us create a product with an awesome and uniform design and experience across all platforms. This will avoid designing contradicting and fragmented product experiences for our current as well as future product designers.

The Design System is still under construction, but the foundation is ready. This includes the New App Icon/Logo, Fonts, Typography and Colors.

The App Icon/Logo

Almost every icon in the Play Store is similar to each other in some way or other. Most apps in the education category have a pictorial logo which is trapped inside a square, rectangle or a circle. While creating a new icon for this app I followed the same trend and created a logo trapped inside a rounded rectangle and a logo inside a circle. It looked good but I wasn’t happy with it. So I thought let’s not follow the trend for a moment and create a logo not trapped inside any shape. Instead why not create a logo with a combination of shapes. Among all the shapes I liked hexagon a lot. So I took my sketchbook and started drawing all possible designs with that shape that could relate to the idea of the product.

So I drew…
I drew again…
And drew some more…

And I came up with the most awesome icon/logo in the world!

Well I wish that was true. I created a logo trapped inside a hexagon this time. SIGH! I got frustrated – so took a half an hour walk outside to clear my mind. I took my sketchbook again and this time I used multiple hexagons and came up the butterfly logo where the wings represented different programming languages and the phone represents portability thereby giving the idea of the product “Programming Hub“. Some of our designer buddies criticized the icon/logo for having multiple colors. But that’s the uniqueness of it. It made our app stand out among the others in the play store. It screamed for attention thereby attracting more users to install the app.

The old butterfly logo had sharp corners, half cut smartphone and my god it was shiny! I realized we have to materialize it and reduce the sharpness and make it more appealing to the eye by using soft corners and saturated colors, And voilà! The new Material Butterfly Icon was born.

And yes it will not be material everywhere. To provide a sense of platform nativeness, we created a logo system that will work everywhere – Android, iOS, Web, Prints etc.

The Colors

Next step in designing a great UI is using appealing colors that complement each other and does not bleed out the eyes of the user using the app. This can be achieved by selecting saturated color schemes and testing it on all possible displays. As mentioned earlier, I used saturated colors for the icon/logo. Hence I decided to go with the colors used in the icon itself as the brand/product colors. Below given is the color specification with HEX and RGB values.

Fonts and Typography

Now that we have a unique logo and awesome colors, we now need a really cool typeface that is clearly readable on all devices. So we went for Space Mono as the primary font for titles and related stuff and Lato as the secondary font for paragraphs and body content. Why these fonts you ask? Well we wanted a font that represented the aesthetics of programming/coding, hence the font Space Mono; and we wanted a font that is clean, sharp and is clearly readable, hence the font Lato – and the really cool aspect of these fonts are that they are free and Open Source! Here’s the specification for Fonts and Typography
The Design System is still under construction and is in public beta. We will update our product with this specifications on all platforms soon. Your feedback is the most essential part of this process. We will frequently ask your feedback for various components during the development of the Design System. You can leave your feedback on the above specifications by leaving a comment below or by directly messaging us at [email protected].