Mapan.id Design Language: Our First Visual Guidelines
For a relatively young team like Mapan’s (formerly known as PT. Ruma or Rekan Usaha Mikro Anda) UX/UI team, the presence of a visual guidelines became a revelation that changed the way our team works — especially in terms of creating the overall look-and-feel of our Android app, Mapan, collaboratively.
Prior to owning a visual guidelines, I did most of the design works related to app needs. I have to admit, It was convenience when you are single-handedly in charge of everything: from Hex code, font types, button, etc. I know everything about the app, front-and-back, and every corner cases were organically embedded into your mind and memory muscle. The chance of mishaps and inconsistency was very thin.
However, it is impossible to scale up with only just one person on board. Thus, several occasions arose where I required helping hands to help me during high-load periods and tight deadlines. The assistance came from Mapan’s inhouse print designers. Initially, I thought that due to experience in handling Mapan’s print works, the shift to UX/UI plane would be a walk in a park. “At the very least they have to make a switch from Adobe Illustrator to Sketch,” I thought.
It turned out not that simple. Even though the print guys were excelled in adopting the software and providing constructive inputs in terms of visualisation flair, I saw the coherence of the UI was missing in the end result. The app was scattered and obvious that there was no silver linings that glued the elements (color, fonts, icons) all together.
This experience taught me that we need to change the way we perceive UI/UX design. I realised that needs of app visual guidelines is imminent.
The visual guideline, alongside the brand guideline, is designed to be the language that we use to communicate among Mapan stakeholders, including but not limited to Designers, Engineers, Developers, PMs, Marketers and the management team.
Looking back to my previous experience in film and graphic design, we always have something that guides us in running a project. In film we have the script, and in graphic design we have corporate brand guidelines. Previously when we were known only as Ruma, as a company, it has corporate brand guidelines. As a product, however, Mapan didn’t have their guidelines. We’ve got to have one. We have to build it as we believe that the guidelines will act as the common tongue that we will act as a language that we speak together across team and divisions.
The question is how are we going to build it?
Here it goes.
Start with Print/Offline
For Mapan, print/offline guidelines is a good starting point. We’re still utilising print collaterals as our sales tools, as well as social media like Facebook. Our main objective was to create a uniformed tone and feel across these channels.
In order to do that, we set a routine meeting with the print team and our external consultant to decide on the basic necessities for print, such as typeface, colors, icon style, and also logo.
We managed to create a look that is more fresh and modern look through the change of color scheme from bright green to green-blue gradation. The change of principal typeface from Myriad Pro to a roundish Nunito also helps to create a ‘friendlier’ look.
Expand it online
Once we’ve established the print guidelines, it’s time to expand it further to online (app and web) environments. The first thing to decide was what color to be used for Mapan app and web? This became our main concern because gradation may provide difficulties to our engineers in the development phase. On the other hand, we tried to maintain the ‘greenish’ look from our old app that our users are already familiar with.
When deciding the color for online needs, we set rules that became our principles:
- It cannot be too far-fetched from the print. So that user can still see the silver linings between print and online.
- It must stay true to the core color ID of Mapan and Ruma, as the principal
- It must be friendly, down-to-earth and still perceivable by our audience.
Since we couldn’t use gradation, we set palette in between the two gradation spectrums of our key colors. We found that color to be green. Slightly pastel-like green. We agreed that the pastel-green is the perfect balance between Ruma’s main color (light green), and Mapan’s print color (gradation of green and tosca).
Once we decided on key color, we have to decided on a color that we will use primarily for call-to-action (CTA). Since CTA is very important as the main integration link between page, we have to make it stand out so that users can recognise it in an instant. The option went to orange, since we see that orange is standout enough against green, and we have also use orange as the CTA color in our previous iteration of Mapan app. We feel that we don’t want to break the habit that already been established to our old users who already familiar with orange as the CTA.
After decided on both color, we decided on secondary and complimentary palettes as supplement to our key palettes. The process of finding complimentary palettes were mostly decided on aesthetics — is it palatable enough when matched with our key palettes.
Setting the Typeface
The third task we did was to decided on the typeface we want to use for online. Since we’ve already decided on Nunito family for print, we decided to carry it on to online environment. When we seek for typeface, we were looking for a typeface that is modern, curvy, not rigid, and readable. We want to convey the feeling of flexibility and friendliness through the curves and calm demeanor of its shapes. We feel that all of the requirements were met in Nunito.
For online purpose, we have to define the corner cases of the typeface will be applied. For example, what style to be use for status bar, what about buttons, header, body, etc. There are so many style possibilities to be used in differently in different situation. Therefore the first thing we did was to lock Nunito into four main styles: bold, semibold, regular, and italic. We have to narrow it down because Nunito itself has 14 styles.
Button States
Determining the button states is also crucial for our online guidelines. Now, that we have determine the color and typeface, we see that button is very important since it is going to be heavily used by our users.
Since we have decided on the principal color for button, the next step is to determine the active state and disable state of the button. Also we have to define the state where the button is on the secondary of importance. For example, we have our main button to be filled with orange, but we also want a second button that has lesser importance to our main one. Now we can’t use the same orange-filled one because we don’t want to draw user’s attention to both buttons, so we define the less-important one with an orange outline.
The four steps above are our main approach to determine the guidelines for our online environment. Now, we shouldn’t forget that the nature of this guideline is organic, which means this guidelines will keep on growing and will be added-up along with the development of the app or web in the future. The Mapan app itself is still growing, and there will be various corner cases to be found ahead. The guideline will also growing alongside the app.
In practice, the basic principles above have helped our UX/UI team — now, a team of 5 — to work in a more synchronised matter. Everyone is starting to speak the same language and we’re starting to build the cohesiveness. Not only that, we are now ‘speaks’ in the same language with our fellow developers and marketeers. I’m aware that our guideline is far from perfect and it still needs lots of improvement to be at the same level as, say, Google’s material language. However, I am confident to say that through this modest beginning, we are heading into a better direction.
Please do share your thoughts in the comment section and let’s learn together!
