Building a design system for Pepperfry
Building a design system for Pepperfry
- 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.
- 2
Analysis Planning
We choose Figma as the design tool since it met the requirements for this web application's design.
- 3
Development
Since Pepperfry’s team already had the design screens, we worked on building the design system and making responsive screens.
- 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.
- 5
Testing
Our team worked closely with the partners to make sure the final product was of the highest caliber.
- 6
Delivery
We completed the requested designs on schedule, and the client was happy with the ultimate outcome.
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 client's objective was to build a design system with responsive screens to fit any device.The main challenge was to follow the reverse engineering process of building a design system based on the existing screen designs and redesigning the screens to make them responsive. All that while avoiding unnecessary versions of the website and building a design system that looked great on all the devices.
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 sync-ups to ideate a solution, create design guidelines, and prototyping.
A full-proof design system for their website.
100% Responsive screens for all breakpoints and website versatility.
Understanding and Analysis
Week 1, the team dived-in to understand and analyze the requirements of the product and the website.
Colors
Week 2 began by working on the foundation colors of the brand. The team then removed the unused colors, reorganized the on-surface and surface colors, and added tags with product swatch colors.
The team also worked on the layouts and designed multiple columns for different page sizes:
- Page Size : 6 Columns
- Page Size 768: 12 Columns
- Page Size 1024: 12 Columns
- Page Size 1280: 12 Columns
- Page Size 1600: 12 Columns
Later in the week, the team experimented and tweaked the typography to come up with four standard sizes - XS, S, XL and XXL. They also introduced the typography for buttons (small, medium, and large) with hyperlinking and strike through.
Icons
Week 3 was majorly about designing the icons and adaptable structuring. The designers made sure that the icons were set by sizes so that it fits all breakpoints.
Atoms & Molecules
Week 3-5 was also about building the autolayout, state, and types of atoms. Later, the team inherited molecules from the atom component as not all atoms can be used directly.The team also added the patterns, boolean features, components, modal & state block, documentation, spec table, and spec sheet during this timeframe.
Responsive Screens, Process, and Prototyping
The team achieved the goal of designing 100% responsive screens during the weeks 6 till 9. The process to rework and create new components was taken care of, followed by looping all the screens for designers and developers to understand the screen navigation.
Plus Points:
- Pages on the left panel were segregated based on the hierarchy and the emojis
- A message was added to every divider and title for better Figma file management.
- All the pages were attached with a name and status next to it, to indicate who’s currently working on the file.
- Tight timeline of 3 months: The handoff timeline was a bit short, as building a design system requires a lot of research and iteration.
- Reusing the existing Design System: The project called for the reuse of the existing components; to enable a speedier design process by ensuring that no component breaks its link with the older components.
- Typographies came into picture in the later stage: Most of the existing typographies were expected to be retained and no new typographies were to be added. The team decided to work on it during the later stages of the project and ended up adding multiple styles during the design process.
- Underestimated the number of breakpoints: The initial plan was to design for 3 breakpoints (mobile, tab, and phone). It was later found out that the designs were required for 2 additional breakpoints. It was ensured that all the breakpoints were covered within the timeline.
A successful implementation of the design system for all 5 breakpoints
- Desktop: 1440 dp
- Laptop: 1280 dp
- Tablet Portrait: 1024 dp
- Tablet Landscape: 768 dp
- Mobile: 360 dp
100% responsive screens to fit any device using Figma as the design stack.
Here’s what the Pepperfry’s team had to say about the project,
“We chose them to create our Design System, considering their experience and knowledge in the area of Designing and Development. The team worked on creating the Design System and accordingly tweaked the screens where needed. They were very helpful, responsive throughout the project. They understood the requirement well and delivered a good Design System within the given time.”
- Manager, User Experience Team, Pepperfry.