User Interface | Design System for Carousell

Carousell is a classifieds marketplace that makes selling as easy as taking a photo, buying as simple as chatting. Launched in August 2012, Carousell began in Singapore and is now one of the world’s largest. Carousell is the leading classifieds group in Greater Southeast Asia on a mission to inspire the world to start selling, and to make secondhand the first choice.

Within a team of 4, we chose Carousell as the digital product to work on in building a basic design system that promote consistency, clarity and quality in the design process.

The Problem
01 | Confusing Ad placements
Ad placements between listings are confusing and distract the main purpose of the app

02 | Inconsistency
Inconsistent font sizes, gutter space, and colors usage between buttons

03 | Unclear sections
Sections are not clearly differentiated at a glance

04 | Icons and style
Icons colors and style are different from overall UI

Based on our understanding and research about Carousell, we developed a set of design principles for the brand.

Key Design Principles

UI Foundations — Colors
For colors, Carousell had quite a number of colors in their original app which we find that it too much for use, therefore we reduced and introduced a splash of gradient in the main color scheme.

UI Foundations — Fonts
For our choice of font, being an app that is used by many consumers, you will not be able to control their copywriting text directions, so we decided to keep it simple and neat by only using 1 typeface in the app.

UI Foundations — Icons
We decided to have 2 sets of icons in the app. Primary being the title header icons which goes in a gradient look and feel, complementing the overall art direction of gradient very well. For functional icons that we have littered all over the app, we kept to simple stroke icons so it doesn’t distract users while they are on the app.

We also developed some supporting elements 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.

Revised Components

Product Cards
Product cards being one of the most essential part of the app, it is important to have a guideline to keep consistency throughout the app.

The basic composition would include the image and text info.

We break it down further with the detailed design breakdown.

We developed another series that we use in highlights, mainly on the main page of the app.

Footer Navigation
We modified the footer to have the gradient element and changed the content to focus on exploring the app, rent, sell or managing your own account.

Buttons
We replaced all the buttons in the app to the gradient version.

Tone & Voice
Our approach was to make sure we are speaking to everyday people. We want to be approachable, encouraging and reliable. We’re happy to listen if you want to talk in clear & simple language. Let’s not make it complicated.

The Idea
To expand the purpose of existing products that are already on sale in carousell and make available for rent. Whenever users post something on the app, they are able to set the item for both rent and sell, before the item get sold, it will be able to help generate income for the user.

We applied our design system on the idea, we tried the new buttons, colors, icons, product card system, navigating bar and the tone of voice.

Check out our design system here & prototype here.

Improvements
After testing out the design system, we concluded that we can continue to expand use in multiplatform and dimensions. We would need to do more user research into UI Varieties for displaying product cards. Product categories can be more organized. We can develop more detail components for the app. We can look into adding animation in the design system for use during loading or illustration in the design system for error message to give the app a more human touch.

Constraints & Retrospective
• Users may need some time to adjust to the new style
• Keeping consistency for main icon system may be challenging when new icons are required
• Successfully kept within the brand identity/purpose
• Loss of ad revenue might be brought up
• No quality control over images. (Inconsistent or blur)

Conclusion
This is a good initiative which we really enjoyed working on, we believe there can be room for improvement as we look into more details in the app and develop it for a greater purpose over a longer period of time.