Background
Smoobu is a vacation rental management portal that enables the property owners to rent a property on several booking platforms like Airbnb, Booking.comand etc. The platform helps the property owners to manage their bookings & frequent client communications efficiently.
My Role
I joined as a Product Designer in Smoobu to improve the overall user experience.
I worked with a team consisting of 2 product designers (including myself) and 1 front-end developer over a course of 6 months to research, build and implement the design system.
I also participated in redesigning the user interface of the platform so that it becomes smoother and more user-friendly.
What was the problem?
As a platform grows and gains complexity, the collaboration between teams gets harder and harder.
Another point to keep in mind is that having a disconnection in design results in users' confusion. So it makes sense to create a source of truth in aesthetics, behavior, build and experience.
Our hypothesis was that a unified, up-to-date design system:
Enables designers to create consistent designs and avoid redundant designs for similar components.
Makes the collaboration between tech, product, marketing, and sales teams way easier.
It results in platform consistency.
It gives an improvement to brand identity.
The Process
This process began with auditing our current website and continued with research on successful design systems to understand why and how they are working well for their organizations. Then we kept analyzing each and every feature and page that we have on our current website. Once we were done with the research step, we started by defining and designing design components and at the end showing guidelines and css codes.
We ended up having the following pages on our design system:
Color Pallete
Typography
Icons
Buttons
Inputs and fields
Dropdowns
We used Figma to create & update the Design System. There are many advantages in using Figma which makes it our team’s favorite tool. Those are including:
You can share the file simply with a link between people and not everyone can edit it, only those with authority.
People can make comments on different parts and they are saved in a different section, yet in the same file.
The CSS codes are easily reachable.
