design system

Duration

6 months

My Role

Research, design audit, Component UI design, Site documentation UI design

Worked with

Design manager, Android developer

Project Overview

Poshmark is a social e-commerce application to buy, sell and discover fashion, home decor, beauty and more. It includes resale and retail of these items. It was 5 months since I had joined Poshmark. At that time Poshmark was a well established start-up. It had some brand identification to it. But there was a lot of inconsistency across all platforms.

As the design team grew, we were working on different features and different platforms there was a need for the design system.

As a team we pushed forward for the design system and got the approval to go forward with it doing the design system work side by side with other projects. This marked the start to the design system project.

Problem

Same components being used differently across features as the team grew.
Leading to a lot of inconsistency regarding font sizes, buttons, spacing.
Unclear usage of components.
Unwanted feedback and communication slowing down the process.

Goal

Achieve consistency throughout the product.
Bring in efficiency not only to the designers but also to the product managers, developers, testing, etc
Have everyone talk the same language and establishing a streamlined process.

Research

Secondary Research

I read a lot about design systems.
Why is a design system required? How does it work? How to maintain it? What tools to use? How to document it? etc. This gave me some knowledge to start with.

Brainstorming

We brainstromed a lot of ideas as a team and finally decided on how we were going to execute it, maintain it.
As a team we had to push this project to be executed so we prepared a document explaining the pain points and the solutions it would solve and presented it to the product managers, developers etc

Inspirations

Material design
iOS design guidelines
Trello
Atlassian
Marvel

Process

Design Audit

I worked closely with the android developer to get details of all the existing elements and components.
I documented these details which helped me throughout the process.

Defining components and their usage

This project was divided into three phases. The components were identified and then accordingly each component was put into one of the three phases.
This wasn't a complete revamp of the product but I looked into all the components and redesigned some components which were too old or required to match the style.I removed few components which could be replaced and also added some which were necessary.
Defined each component clearly with a set of rules.

Naming Convention

As a team we sat together and decided on the naming conventions which has to reflected throughout the organisation.

Spacing

We used multiples of 4 to define padding across all platforms to maintain consistency.

Meetings

We had a weekly thrice design meeting in which we discussed about the progress and also shared feedback.

Design guide

I created the design guide for android. The design guide was a master file in sketch which contained all the components in individual pages.
Once I decided on each component I laid it across different pages of the app where it would appear and tested if it worked well for all the pages.
The master file is of main use to the designers, it had the components and their respective spacing in the side for reference.

Documentation

The design system was documented in the form of a site. The structure of the site was

The header which roughly names the component and a subtle illustration to add colour and identify the components easily.
The component along with its usage and describing its types. For example, for tabs it has two types fixed and scrollable tabs. There is also an option to see the code which would be helpful for developers.
The third section contained the spec detail which included spacing and UI properties.

Maintaining the style guide

Multiple people using the master file saved in dropbox created issues with the document not saving certain changes. To manage version control we decided to use abstract. Changes to existing components or new components can be added after review and feedback from the team.

Testing

Once the design system was somewhat in shape we showed the developers and product managers. They found it very helpful and they gave their feedback regarding certain components

Result

Consistency
Efficiency, it saved a lot of time.
Product design and development collaboration

Learning

The design system, specially the style guide made me have an eye to detail, as these components were going to used over and over again.
Once I started using the design system the mocks looked more cleaner, and I saved a lot of time.
To keep the design minimal, as the goal was to have our site easily understood.

Design System