User Interface | Design System for Moovaz

Timeline: 2.5 months

Project is split into 3 parts: Case Study Research | Building Design System | User Interface Design

Design System

Introduction
Since the start of the internet era in the 2000s, global relocation as a megatrend became more pronounced as connectivity increased and the movement of people from one place in the world to another intensified.

Global Relocation is a huge subject with information scattered. Relocation guidelines between countries are constantly changing especially during the pandemic. With service providers working independently, it was an extremely stressful experience for users to plan their relocation without guidance especially for first timers.

Moovaz started as a tech savvy moving company and transformed over the years to meet the gap by becoming a one-stop platform that allows users to fulfil all their relocation needs within the platform.

Problem

1. Color Palette
Moovaz main colors were pink and teal which can appear too feminine, sweet and romantic for a brand that requires trust and confidence from their users. Pink and teal used together in communication does not contrast well which also resulted in loss of message.

2. Inconsistency
Overall use of icons, styling and numerous colors throughout the platform. Styling was discontinued from the main landing site to the platform.

Decision was made to work on the revamp to build up a new design system, and to maintain consistency and alignment within the team.

Key Brand Principles

Brand principles were developed together within the team and key stakeholders which were applied as our design principles.

UI Foundations — Colors

A new set of color palette was introduced with the pink. Pink has been the color that resonates with Moovaz but the tone of the pink is now brighter as compared to the previous. The use of secondary colors are also minimal, mainly for additional support when needed.

UI Foundations — Font

For the choice of fonts, we decided to use Montserrat for the main headline font and Lato for communication body text. The choice was made with consideration of how the font can be easily accessible within the different team members to keep other brand materials consistent.

UI Foundations — Icons

Icons were developed in stroke and solid to keep it clean and simple for the overall interface, it was further created in 16px, 20px, 24px, 32px and 40px respectively to ensure consistency when in use in different pixel sizes.

Some other supporting element created for use:

UI Foundations — Grid System
All spacing for components and typography are done in increments of 8 pixels. This forms the basic unit of measurement for spacing.

Other Components
All components are designed in cards for easy adaptation and application across different dimensions. Overall direction is to keep it clean, giving content more space, allowing visuals to stand out and to upkeep a lifestyle impression. On top of that, colors used were kept minimal and only applied contrast colors depending on user behaviours.

Footer
Footer was reworked and kept simple. Sequence of buttons was based on the core pillars that hold the product together, according to users preferences shared during interviews.

Tone & Voice
As a brand that requires trust and confidence from users, we directed the tone and voice to be trustworthy, warm and supportive but still stay professional to the users.

Conclusion

Positive feedback on the overall look and feel were received from the users during user interviews but this is just the beginning. As the design system was built and tested on a newly revamped product, teething problems will be unavoidable in the process. It will require ongoing efforts to upkeep and update the design system as we progress along with the product.

Feel free to check out how the product was executed with the design system here.