Simplifying the Upshift platform with design consistency: How I did it and what I have learned from it

Do you sometimes feel overwhelmed by the incredible amount of information around you? 
Do you crave for a simple, yet user-friendly interface when you explore a new app?
Do you prefer uncomplicated designs that silence the clutter around you?
If you have answered YES to these questions, this is the article for you!
In the next few minutes, I will dive deep into the power of design consistency, how we applied it on the Upshift web and mobile platform, and the benefits we experienced from it. 
We will also reveal the challenges I faced and what I have learned from them.
Let’s get started!

What is design consistency?

Before I dive deep into our story, it seems fair to cover the details first so you can better understand why I emphasize design consistency to this extent.
Let’s start with how We understand the term:
Design consistency is the act of keeping all of the repeating components of your website/app to look, feel, and behave identically everywhere.
In other words, it means you have the same symbols, functions, styling, animations, and so on throughout your platform, so it looks coherent and works harmoniously across all its parts.

What are the main areas where you can implement design consistency?

I will mention the 4 main areas and why you should keep an eye on them:
Visual – refers to making similar elements look the same (e.g., icons, fonts, image sizes, buttons, labels, etc.).
Functional – means that similar objects behave the same way (e.g., following popular patterns like the website name to be in the top left corner of the website header, and when you click on it, you return to the home page).
Internal – means different parts of your interface look and behave as one transparent system (same CTA button styles on different pages).
External – refers to parts of your interface that look and behave as typical patterns for similar products (e.g., underlining text links to give users a clue they are clickable).

How do I apply design consistency in Upshift?

What makes Upshift’s platform one of a kind is our design system which is unique from all the other web or mobile apps out there.
Thanks to the principles of design consistency, I achieved the mission I was working on: The moment Upshifters log into our web or mobile app, they will immediately know that the product is Upshift.

“The idea behind our design system and its components (We call them Friday UI components) helps us create uniqueness in our brand that attracts people, no matter if they use the mobile or web app to log into Upshift. Once they are in, Upshifters immediately know that the product is Upshift. They recognize the colors and the elements. This also helped us from the sales and marketing aspect to be easily recognizable among the others.”

Take a moment to look at our app to see what I am talking about.

Can you notice the consistency in colors, fonts, style, size, etc., on every device?
Can you see how simple it is to find what you are looking for in the first place?
It always feels relieving when you are not stuck in a clutter of irrelevant information, right?

What are the benefits of design consistency I have experienced along the way?

You may wonder: Why is design consistency so important that I decided to write an article about it?
Before I list the benefits, keep in mind that there is quite a close connection between design consistency and our everyday lives.
We do everything we can to make our everyday life easier and avoid the need to focus on the same operations all over again, right?
For example, we all keep our shoes close to the main door. Even when you visit a friend’s home for the first time, you won’t search for where to leave your shoes. You will know to leave them next to the main door, just because this pattern is known and followed by most people.
This is precisely what design consistency is about!

Now, let’s get back to our platform

My experience in applying consistent design through our Upshift platform showed the following benefits:

  • Simple interface (especially for new users);
  • Users get less confused when navigating the platform;
  • It limits the number of actions and operations to reach the final destination;
  • It reduces cognitive load;
  • Saves user’s time and energy;
  • Supports a strong brand image for a website or application.

How to make a consistent design?

When developing our app, We followed these 5 rules to create a consistent design across the web and mobile app:

  • Implement recognizable patterns
  • Be cautious with experiments on UI components
  • Properly structurize content
  • Mind typography and color similarity
  • Follow one identity across multiple channels

This is how these rules look in practice when applied:

What are the main challenges I have faced with creating a consistent design?

This is not a story where everything went smoothly once I started applying design consistency in our everyday work.
There were some struggles along the way.

The main issue was the moment I realized that our app users were not that tech-savvy.
Having this in mind, I faced the question: What can I do to retain users so they can maximize the use of the app?

“My main job as a product designer is to make the everyday lives of our users as straightforward as possible. For example, when Upshifters land on the app, they are mainly focused on our 3 main components: apply, clock in, and clock out. At the end of the day, they don’t care about all the elements of an app but how those elements will help them achieve the goal they had before landing on our platform.

To lend a hand to our users in efficiently navigating the Upshift platform, I make all the different app components in the same file. Then, I just drag and drop the elements wherever they fit on the app.”

On top of that, I constantly aim to improve the look and feel of the elements but still apply the same design consistency.

Let’s wrap up!

I will wrap up this article with a piece of friendly advice for all the product designers who still don’t see the value of implementing design consistency as part of their toolkit:

“Consistency of design is one of the crucial goals and values that professional product designers or product creators must always have in their mind when developing a brand-new design. This will not only make your job easier, but it will drastically improve your users’ experience and how easily they navigate through your product because they just feel comfortable using your product. And that is the ultimate goal, right?

If you want to see how I utilized the power of design consistency in practice, check out our Upshift platform, and let us know what you think.”

P.S. I am always open to constructive feedback because I believe this is the only way to go forward!