bisaGo Design Guideline

Published in

bisaGo2020

6 min readDec 22, 2020

Based on the Cambridge Dictionary, a Guideline is intended to advise people on how something should be done or what something should be. The existence of a Guideline is for us to be followed, so does a Design Guideline. Design guidelines are rules of thumb for you to create work that never frustrates users. Likewise, it would be best if you also catered to users with a wide range of disabilities. How you apply design guidelines also depends on the contexts of use, your design’s platform, and the type of interaction users will have with it. The reason why Design Guideline exists:

Consistency across all pages of a digital product

Consistency is quite essential in a digital product. With consistency, users will find it easier to recognize an element.

Workflow or performance becomes faster

The design guidelines can speed up an application implementation process since it’s documented very clear we just have to follow the guideline.

Helping the developer in implementing the code

Design Guideline helps developers implementing the code; they don’t have to wait for specifications.

Design Guideline

Several aspects that need to be considered in the Design Guideline:

List of colors that can be used
List of fonts and font size that can be used
UI components such as button, text field, dropdown

What is bisaGo?

BisaGo is an application that provides information about public facility service that is friendly to persons with disabilities.BisaGo is also a social application with a social mission to gain equality towards access to public facilities for people with disabilities. Various features can help achieve this mission, such as providing information on facilities for persons with disabilities in public places, information for schools with disabilities, and information about the disability community.

bisaGo User Persona

Our team has created three user persona for bisaGo. They are university students who is currently involved in an organization that helps disabled people in his university, a mother that has a daughter with disabilities who is looking for a disabled-people friendly school, and a physically disabled person who is struggling to find a place for work because of hard-to-get information about facilities for PWDs. Our team learned several things, design-wised and functionality-wised. Here are some things design-wised:

We must develop a bright color scheme for our application to make it easier to look at.
We must provide simple navigation to some crucial features.
We must use a fairly-big and readable font size, so users don’t have to see it from close.

For functionality-wised:

We must provide a feature to add a new location since one of the user’s frustrations is incomplete places.
We must give a feature to display information for school equipped to handle children with disabilities.
We must develop a feature to add information about facilities that existed in a specific location.

Creating a design guideline adjusted with users’ goals, motivations, and frustrations can achieve 100% user satisfaction.

Design Guideline for bisaGo

Color

The main color that we used in the application is Green, White, and Black. Additional four more shades of green are for border or accent color, while the two shades of red are for the warning text and ‘Disabilitas’ button, and the other three colors, grey is for a placeholder text color, blue and purple are for ‘Disabilitas’ button. For colors, we store the hex number of it in ‘styles.dart’ so we can reuse it again and again.

Typography

Typography guidelines include rules on font use, font size, and font-weight. Two main fonts that we used are Comfortaa and Muli. We chose that font because we think that it’s easy to read from those two fonts, and Muli is a popular font to use.

Component

Our team has created components such as text field, button, dropdown, ‘special button’, icon, etc., which later on we can use in the application. The existence of this special button is for the ‘Tentang Disabilitas’ page, where use can choose between four disabilities to know more about that disability. As I’ve mentioned before, our goal of creating this components is for reusability. Therefore, we store this component in one place, in the utils directory.

For the usage of this Design Guideline itself, you can see through this image below.

Material Design as Benchmark

In 2014, Google launched Material Deisgn. Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, the web, and Flutter, yes Flutter since Google who also launched Flutter too. The base component of a Flutter project is actually a MaterialApp widget. By using that, we can access through different types of widgets. Therefore, it’s no question for us to benchmark to Material Design. Here are some of the result after doing a benchmark:

As we can see, it’s more or less the same component. Like the App Bar, the icon is located at the left, and the title is centered. The same goes for buttons, has an outline-only button and a fill-in button.

Lesson Learned

Creating a design guideline really speeds up the application development process. We don’t have to continually declare which color we’re going to use since we can define a constant. We also don’t have to have a brainstorming session to pick what kind of button we should use. We can use the design guideline.
Our team can strive for consistency among pages. Therefore, it can be aesthetically pleasing when routing from one page to another.
Using a provided ‘special button’ helps us to develop the page for that button. We don’t have to go back and forth between Figma and Android Studio.

Struggles

One of the struggles is a longer time needed when coming up with a design guideline. We have to discuss everything from a color scheme, typography, and many more. It’s also exhaustive.
Not only that but also we have to pre-defined a constant for all components in the design guideline. This again can be exhaustive and a very, very long time.

In conclusion, Design Guideline is very helpful when we’re trying to develop an application. We can strive for a consistency, faster-pace development process. For someone who works mostly on the front-end side, this guideline is very helpful, I just need to see the guideline without having a confusion.

Source: