A glimpse into Justika’s web design guidelines
Behind understanding Justika's design guidelines.
Design guidelines are what designers need to create a hassle-free experience for their users. And this is one of the things I and my team are trying to achieve whilst developing a website for Justika’s latest product. If you don’t know what Justika is, they’re basically a platform that offers online legal services in Indonesia.
In this article, I’ll explain my team’s understanding and translation of Justika’s design guidelines from observing their existing website.
Design Principle vs Guideline vs Rule
Before we discuss design guidelines, we need to understand their difference with design principles and design rules. According to Interaction Design Foundation, design principles are the general direction. The guidelines are how to approach them. The rules are direct instructions. To make this easier to understand, I’ll make an example.
- Design principle: Give constant feedback whenever users finished a task.
- Design guideline: Make sure the feedbacks are easily understood and noticed. Feedbacks containing words should have a friendly voice.
- Design rule: The font should be Open Sans regular in size 14.
It’s useful to note that guidelines are subjective to each designer. That’s why it’s important to make sure team members are on the same page regarding this before making further design developments.
Justika’s Web Design Guidelines
Below I’ve summarized the key web design guidelines implemented in my current team project.
Content
Each of the pages on Justika’s website has its own objective. This objective is made clear not only because of their page titles but also how the information within is presented.
- Prevent information overload: A study actually found that cognitive overload can lead to less trust. As a platform offering a service that is inherently linked to high trust, simple is definitely better for Justika. Only required contents are shown on every page.
- Pay attention to visual hierarchy: We try to visually prioritize important elements. This could be seen from the varying size or color intensity of design elements. We also pay attention to design patterns to ease user’s information load with something familiar, as such, we use a Z pattern on the website’s homepage.
Buttons
Buttons are an important element in a digital product because they usually lead to some type of conversion. So, it’s natural to build a guideline on their implementation.
- Consistent: Make sure buttons have the same style. This is so that users could easily predict the functionality of a button just from a glance. Which in turn could shorten their decision-making time and make a higher task efficiency.
- Looks clickable: How a design element looks tells the user how to use it. In other words, they should have clear affordance. For example, we made the buttons on the website looks as if it needs to be clicked by making it change color when the cursor hovered over it.
Forms
Filling out forms is usually a significant user task for a product. This means we need to make the experience as simple and seamless as we can.
- Group related fields together: Grouping similar fields makes a cohesive experience for the users. For example, the order form on the website is grouped into steps; company profile, additional information, then summary.
- Useful and friendly error messages: It’s human nature to make mistakes, thus we can’t make the assumption that our users are an exception. We word error messages carefully so that users know how to fix their mistakes without sounding like we’re scolding.
Conclusion
These guidelines are tailored specifically for Justika. Different than principles, guidelines are supposed to be unique to the product. Therefore, designers are able to be as creative as they can when customizing it to fit the product’s needs.
