Building a design system for Pepperfry
Integrating a new design system on existing screens and make them more responsive
Timeline
3 months
Industry
eCommerce
Location
Mumbai
Project
Design System & Responsive UI Design
Year
2022
  1. Strategy

    To deliver a cover-to-cover design system with responsive screens we first started off by understanding and redesigning the elements to accommodate the client’s requirements.

    1
  2. Analysis Planning

    We choose Figma as the design tool since it met the requirements for this web application's design.

    2
  3. Development

    Since Pepperfry’s team already had the design screens, we worked on building the design system and responsive screens.

    3
  4. UI/UX

    The team started the design process by creating interactive designs using Figma. It went smoothly thanks to ongoing communication between the team and the customer.

    4
  5. Testing

    Our team worked closely with the partners to make sure the final product was of the highest caliber.

    5
  6. Delivery

    We completed the requested designs on schedule, and the client was happy with the ultimate outcome.

    6
About the Client

Pepperfry is a leading furniture and décor store headquartered in Mumbai. The company focuses on elements of home décor such as lighting, furniture, maintenance, dining, kitchen appliances, and more. Pepperfry primarily follows an omni-channel strategy, which permits the customer to place their order at any time, anywhere and via any device or channel.

The Problem

A big hurdle was the reverse process of building a design system based on the existing screen design and redesigning the screens to make them responsive. The main aim was to avoid unnecessary versions of the website and build a design system that looked great on all the devices.

Team On-Call

After identifying the goals and mapping it to the right individual skill sets, we formed a team of two designers and a design lead. The team started by understanding and analyzing the business requirements of the client through regular synch-ups and structurized the workflow with Jira cards to keep track of the schedule.

Requirements

Successful implementation of the design system using Figma

Responsive screens to fit any device

Development

The project kicked off with understanding and analyzing the requirements to find components for the website and familiarizing with the product. The team started by working on the foundation colors of the product. They then removed the unused colors, reorganized the on surface and surface colors and also added a tag with product swatch colors.

In the beginning of the second week, the team also worked on the layouts and modified it to 6 column - 360, 12 column - 768, 12 column - 1024, 12 column - 1280, 12 column 1600.

Later in the week, the team made a lot of tweaks in the typography and integrated XS, S, XL and XXL sizes of typography, also introducing the typography for buttons with hyperlinking and strike through.

Week-3 was all about the icons and adaptable structuring so that it adapts all sizes to fit all the breakpoints. Week 3-5 was a combination of atoms, molecules, patterns, boolean features, components, modal & state block and documentation.

Overcoming Challenges
  • Completing the entire project within a very concise deadline
    • Reusing the existing components to build the new design system
      • Adding multiple styles for typographies
        • Cover the breakpoints within the project timeline.
          • Inculcated excellent time management skills to work on responsive design screens and documentation.
            In bird's eye view
            • Successful implementation of the design system using Figma
              • Responsive screens to fit any device
                Final Impression

                With the seamless collaboration of the team and the client we were able to submit the project within the expected timeline and also make room to add additional features. There was a new unexplored learning curve for the designers.