relayr logo

Tech Blog

#oneteam @ relayr


Gautam Pahuja, Frontend Engineer

July 26, 2019

One of the major problems I see in tech companies is building products which are consistent throughout, and this can be a huge challenge to overcome. We at relayr had these issues initially and after various trials and errors, I believe we came up with a way to successfully build better products with great design and consistency across our entire platform.

We often hear this expression: First impression is the last impression, and to deliver something which leaves an impression there are 2 key roles which need to collaborate and contribute together.

Yes, you are right, I am talking about UI/UX Designers and Frontend Developers.

Both developers and designers play an integral part in the lifecycle of a feature. A developer implements it and a designer moulds it until it’s perfect. At relayr, we have designers who are more like design technologists, they have a great combination of a designer’s with an engineer’s mindset.

So, now that we’re clear on who does what, let’s talk about real stuff. Here’s how we bridge the gap between design and engineering:

We share a common web components library.

A web page is made up of lots of small UI components like inputs, forms, modals etc. At relayr, we use the shareable component library SemanticUI. We customize each component so that they adhere to relayr’s styles.

Photo by Markus Spiske from Pexels

This shared library is basically a sort of style guide that gives us the theming and palette color to use and tells us how various components should look like on the user interface. The key point here to notice is that these components should be consistent on how they look and feel and should match the theming of your organization.

Once the components are there, we are halfway done. We just have to use them to compose different user interfaces which makes sure that every component used in every product that relayr delivers adheres to the same theme.

We take UI/UX reviews.

Every feature is first wireframed by UI/UX and after development it’s again reviewed by them so that it looks similar to what was actually designed.

Photo by rawpixel from Pexels

At relayr, we use GitHub for hosting our repositories. For every change pushed by the developers, if the change has anything to do with the UI of the product, approval from the design team is mandatory. Only after the approval of 1 of our UI/UX member and another frontend developer, we can merge our changes.

For every Pull Request we make on Github, we publish a Docker image. The design team runs this image on their system and checks in the browser how the feature actually looks like. They also interact with the whole product which helps them understand various workflows working together.

This stage gives the designers freedom to test the application and the look and feel of the product before it’s delivered to the customer.

Developers are involved much earlier in the process of design.

Photo by picjumbo from Pexels

While creating the wireframes/mockups, the designers and front-end developers meet and share the limitations of our architecture/infrastructure. Then the design is created in such a way so that it relates to what the customer needs and can be achieved with our current architecture or with little modification of it.

We use Zeplin to share designs.

Frontenders need designs in order to proceed with the work. The designers plan their work a sprint ahead of us so that when we start working on a feature, we already have a design at hand. In relayr, we use Zeplin in order to share designs. The designers export their design files into it, and then we can not only see the designs but can take the CSS attributes of each and every component used in the design which helps us a lot while developing a feature.

Photo by Kaboompics from Pexels

Moreover, we are also exploring various other tools like Invision which will help us to enhance customer experiences right from the design stage.

By following these guidelines, not only were we able to deliver products that have nice and consistent user experience but also as a developer, it makes the experience of developing the product a lot easier and faster. It always good to work in a manner where everyone has same understanding of what we want to achieve. We hope that the workflows we followed help others who are facing the similar kind of challenge.

If you’ve faced these challenges in your career and enjoyed solving them, please check out our hiring page, we are always looking for new talents to join our team!