Redesigning and creating the OLX design system

In 2014, Sulit.com.ph rebranded to OLX Philippines. Though there was a large visible change in terms of brand (things such as our logo), the UI received very little in terms of a redesign. This was done deliberately to help the audience transition from Sulit to OLX.

Fast forward two years, OLX is now the dominant player in local classified ads. It is now aggressively expanding it’s mobile applications to wider audiences and pushing for fast, easy, win-win exchanges. Though we’ve had multiple innovations in terms of features, our design language was in the same state as it was a few years before. We we’re still thinking very web-first and our apps, though powerful, we’re not given full attention. Add to this, there was a considerable disjoint between the design languages of the mobile and web interfaces. On the practical side because we didn't have a common design language, file screens took quite a while to finish.

Something needed to be done to not just help our users view OLX in a different light but to help our design team design faster and easier.

Creating a Common Design Philosophy.

Though we only had three designers working on the digital products of OLX, it was still pretty important that our priorities we’re aligned when it came to design. We took some time off in the morning to huddle-up so we could get our ideas in order. Throughout the day we needed to figure out what we found was important to think about when we designed solutions for our users.

How we did this was as we went along with our design work we kept a notebook by our side and wrote down every design decision we made and why we made that decision. By the end of the day the design team got back together and talked about our design principles.

All three of us had always had some sort of design principle that we worked with but because we never really shared them or wrote them down it often lead to a disjoint in our product’s UI. It also made it harder to defend our design decisions to our stake holders because these we’re all stuck in our brains. Writing them down was a great excercise in contextualizing how we thought about design.

A common pattern slowly emerged as we picked at each theme and saw which ones were redundant and which ones were more important.

OLX Philippines Design Philosophy

Beauty

No one walks out of a restaurant saying “hey the food is edible” similarly it isn’t enough that we design products that are just usable. We should reward users by giving them pleasurable and amazing experiences that doesn’t just help them achieve their goals but make them happy as well.

Context

Every solution should be based on the users experience and validated through the users experience. We try as much as we can to keep our assumptions low and design for the user’s context.

Clarity

All design comes from a purpose, an intent. This intent must come through and be communicated efficiently and clearly. There should be as little room for ambiguity as possible. Users should be easily able to understand what they need to do and should be able to understand information we give them with the least amount of effort.

From the Bottom Up

With our design philosophy clearly aligned it was time to get to pull out the elbow grease and start on the actual design elements. Going from the most basic elements and adding complexity as we added more details.

We first started working on a good color palette that would communicate the new look we wanted and be focused on what the users need, the content.

We tried to go back to our first two important philosophies, context and clarity by stripping away any noise and ambiguity from our current language (or languages). We started with the color palette. OLX had traditionally been a very colorful app with almost every color in the rainbow but that kind of execution won’t help us in the next stage of our apps. We wanted help our users focus on our content and clearing out noise even at the color palette level was important.

Though a slightly archaic tool, moodboards and style tiles were a great way to see how things came together from very abstract and fundamental elements such as color and typography even if the screens shown aren’t the final screens we came up with in the end.

We drew up different variations starting with an all blue execution constantly making things simpler and cleaner. We figured we’d strip down color usage to only very specific moments that warrant it’s context. A bigger focus was placed on content specifically photos as this was the most striking and consumed medium on our application. By going with a minimalist, almost grey scale color palette we we’re able shift the focus to our ad’s images.
 
The first thing we can apply this idea to was our button system. Buttons are probably the most basic building blocks of any interface and it was important to get it right as everything else would be built from that.

Atoms to Molecules to Pages

With our very basic building blocks in place we started building more and more complex components. This is based on Brad Frost’s idea of atomic design, this helps us be consistent across all levels of the design system as well as make sure it’s something that’s scalable and transferrable to different platforms.

Cards, Headers and Navigation systems soon followed using the same process. With navigation systems, it was important for us too map out the current architecture of our content first to be able to understand our user’s journey’s throughout the system. This allowed us to catch for any platform specific nuances that we needed to take into consideration.

We had a simple activity to help with mapping out our current app structure and what would be our ideal structure that aligned the entire product as well as the development team. This helped guide development for the next few weeks.

Design is Political

We’ve had issues before where we’ve had competing feedback on design from different teams. Marketing (which had it’s own set of designers) would usually give a more visual aesthetic comment while product managers would come in with their own ideas of how a product should look and act like.

Having these written out just for the design team wasn’t going to make the design system succesful, we needed to present this to different teams to make sure the system was meeting their needs as well. Our main presentor for this was our design supervisor who transformed it into a deck and made his rounds across different departments grabbing feedback as he went. The feedback was crucial as it allowed us to make quick tweaks to the small details before anything was released.

Bringing it all into Development

As we moved on to our development phases, the design tasks didn’t end as it was our responsibility to make sure the plans and intentions we’re communicated clearly at each level. A lot of collaborative discussions with developers and product managers was required to see our vision comes to life. Making things more tangible for the developers and product team helped keep us on track. We did this by creating a visible map of screenshots that everyone could easily refer to during the whole development cycle.

Conclusion

We created our design system with the end goal of making our design tasks faster and easier. Since the creation of the design system, assembling full screen mock ups have become faster and allowed us to focus more on flows and interactions. Creating it was only half the work as constantly communicating and evangelizing the principles behind the system is just as important. This is where creating artifacts such as screen flows and screen maps become instrumental.

All of this wouldn’t be possible however if we didn’t take the time to actually plan and talk about how we designed things. A failure to plan is a plan for failure and making sure that plan is cascaded and clearly understood is what made this system no matter how small successful for our team. Since we’ve created this system, designing actual screens have become extremely quick and easy, practically shortening the ammount of time we spent on a single screen from half a day to less than an hour. This also allowed us the designers to focus more on things such as flows and product innovation.

View the OLX Philippines Design System Document