It was June 2014 when Google brought Material Design to the world and got everyone’s attention. Soon after in 2016, Brad Frost coined the term Atomic Design, which laid the foundation of the design system. Atomic Design facilitated the process of breaking down complex components into primitives. It was then when every design-driven organization redefined the process of building their own digital products. Organizations started to design a system serving products as their core strength instead of dealing with the UI nuances. Microsoft launched its design system called Fluent, IBM named Carbon and Spectrum by Adobe. The United States government also designed its design system called USWDS: United States Web Design System.

So, Why we need a Design System?

Innovation and technological advancements bring rapid shifts and new discoveries in the market. The user is continuously evolving so the organization needs to build and iterate the product quickly. Building faster and scalable products while maintaining consistent and cohesive experience is the new metric for product and business to succeed.

This urge to build products better, faster and scalable leads to the Design System.

Let us consider Outlook, One-drive and PowerPoint by Microsoft. Each one of these have very different functionalities and are available across different devices. But the experience is consistent and cohesive since it is governed by Microsoft Fluent Design System.

How can I start building a Design System?

To build a Design System, you can start with the resources you have. Document and understand the existing components, their context and functionality. Now facilitate these components into primitives in a similar way organism breaks down to atoms (Refer Atomic Design-Chapter 2). These primitives are used to design interrelated and interdependent parts called UI Patterns. These patterns will be governed by guidelines that are established by analyzing context and functionality.

“Standing on the shoulders of giants”. Organizations like Google, IBM, Microsoft have an open-source design system. A lot can be taken from these existing design systems.

Building a design system is a continuous improvement cycle and evolves as the product matures. If a design system component doesn’t support the required functionality or context, it should be designed and added using the primitives.

Hence, what is the Design System?

InVision defines design system as

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

The design system is a set of guidelines and reusable components with functionality across different devices that speeds up the building, delivering and iterating process while maintaining the product quality. The design system consists of the style-guides, components, coding conventions and policies that govern it, with the fundamental purpose to facilitate the work of the teams.

Wrapping up

Design System is basically a product to design products. It keeps evolving itself as the products mature. As a Product designer, we have the challenge to design faster, better and scalable to which the solution is a Design System.

We at Fynd have created our own Design System- Nitrozen to design better and build faster. Nitrozen is inspired by human-centered design and focused on conversion and hyper-productivity for the next generation of consumers and professionals. It is inherently responsive and adaptive to any device it is thrown at. Moreover, Nitrozen is reusable and scalable to design and build new product ideas to life.

Special thanks to Sumi Modi for the illustrations.

Design System! Why, How and What? was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

The design trend has great significance in evolving and revitalizing digital experiences. It reshaped the way we interact with digital products. One such trend is Neumorphism. Neumorphism was coined by Jason Kelley on Michal Malewicz’s medium article “What’s the next UI design trend?”. Soon this created the buzz in the design community and designers started drooling over it.

Here is my comprehension of why Neumorphism is so fascinating, different and very new from the other design trends.

Best of Flat Design and Skeuomorphism

Neumorphism originated by combining the old classic skeuomorphism (Interface objects that mimic their real-world counterparts in appearance e.g. recycle bin icon used for discarding files) with the flat design. Skeuomorphism laid the foundation of interface design and flat design emphasizing minimalism. It combines two revolutionary trends which makes it refreshing and an avant-garde design trend.

Adding Affordance to Material Design

Affordances are an object’s properties suggesting how a user may interact with digital products. Thus interface affordance depends on appearance of the object and its similarity to the real-world.

Neumorphism is a clean and minimalist design style that introduces a new concept of lightening up the exposed surface. Though material design establishes elevation of the card and its falling shadow, Neumorphism gets closer to the real world by highlighting the surface exposed to light. Hence paramount the perceived affordance.

Giving new physicality to the Material

Neumorphism is establishing new physicality in the UI trend and moving one step closer to realism. Neumorph material has properties like elasticity, which can be extruded, beveled or pressed. Therefore, it provides designers to explore and experiment with the new user interface materials.

Increasing the level of Usability

Neumorphism is derived from the successful use of the practical application of the user’s physical capabilities and past experiences. This makes it so familiar to use with effectiveness, efficiency and satisfaction. This ease of access in Neumorphism increases the usability of the design.

Neumophism is different from other design trends because it adds a whole new functionality to the UI patterns with a lot of new potentials to innovate. In my opinion, Neumorphism is not a regular trend that would fade away with time but will be a revolutionary design pattern that will redefine the future of product designing.

Why Neumorphism is different from the other design trends? was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

While studying about different design systems, I realized that all design systems serve the same function, which is to make the process of building products faster, better and scalable with a cohesive and consistent experience. They all have a pretty common structure and consist of UI Kit, style guidelines, color palette, etc. But each one of them has excelled in different UX functionality which can be learned from them. In this article, I have summarized what I learned from the different Design Systems.

Material Design by Google: Affordance

Starting with the revolutionary design system by google- Material Design. Material is the metaphor used by Google to establish its fundamental principle of perceived affordance. Affordances are an object’s properties that show the possible actions users can take with it, thereby suggesting how they may interact with that object.
Material Design is inspired by the physical world and its texture, including how it reflects light and cast shadows. Establishing the physical nature of component Google brought the mental and the conceptual models close enough to make the experience seamless and intuitive. Hence designing products with higher affordance.

Carbon Design System by IBM: Accessibility

IBM firmly believes that web and software experiences should be accessible for everyone, regardless of abilities or impairments. As IBM describes Disabilities as a mismatch between one’s ability and one’s environment and can be broken into three main types: Situational, Temporary and Long-lasting.
For IBM to consider products accessible, it should:

• Give every user the same benefits, regardless of the ability
• Adapt to any user in any context

IBM’s Carbon Design System uses global accessibility standards W3C, also contributes to it by creating and maintaining WAI.

Fluent Design System by Microsoft: Adaptive Design

Microsoft has consistent and cohesive experience across different screen sizes due to its adaptive nature. It uses UWP (Universal Windows Platform) to build user interfaces (UI) that scale beautifully across a range of devices. UWP is a living document that helps by automatically adjusting UI elements so that they are legible and easy to interact with on all devices and screen sizes. Building an adaptive design to keep the context and functionality constant across the different screens can be learned from the Fluent design system.

Polaris by Shopify: Usability

Usability refers to the user achieving their goal with effectiveness, efficiency and satisfaction in a specified context of use. Polaris deeply dives into the user research, technical limitations, merchant workflows, stress cases, existing patterns, and content to make its product more Usable. Polaris has the following practical ideas to make its products easy to use-

• Tailor the experience for everyone
• Help user to make a better decision
• Help user to avoid mistakes
• Provide immediate UI feedback

Airbnb Design: Design Process

The process is the most important part of Product Designing. Airbnb’s rethinking the way of building the product changed the way we approach design. As stated by Airbnb “You can’t innovate on products without first innovating the way you build them”. By focusing on the methods of working across disciplines, building better tools, and creating a unified system, we can use our time to apply creativity to solve bigger challenges.

These were the few learning from different design systems. The leading tech giants put a lot of R&D to build these systems. These are open-source design systems and can be used by anyone in the world. As a designer, we can comprehend these existing design systems which have been developed by the major tech giants and make intellectual progress using them.

What did I learn from different design systems? was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

The year 2019 ended on an exciting note for us. On December 21st, 2019, we organised our first design meet-up — Driven by Design (D/D) in our office in Mumbai. We received a massive response from the local design community for something that started out as an experiment. This will serve as an inspiration for us to come up with the second edition of the event soon.

Why Driven by Design meet-up?

At Fynd, we believe in exchanging our knowledge and experience to become better at what we do. Being product designers we wanted to encourage this exchange in the wider design community. Driven by Design (D/D) community was born with this idea. With D/D we have set out to create a community of product designers, engineers, managers and entrepreneurs who are interested in sharing ideas and innovations to help each of us create meaningful and powerful designs.

Starting the Day

We had already received around 80+ pre-registrations from design enthusiasts in and around the city for the event. On the day of the event, we started early and welcomed the audience at the registration desk with D/D merchandise. The attendees were from an array of disciplines ranging from Design to Engineering to Sales.

Giving away legos for better designs

Our Co-founder, Sreeraman MG (SMG) welcomed the crowd and addressed the speakers. He shared his experience about the Open Learning culture that we have built at Fynd — the importance of learning, the benefits of giving away our legos, and the values that have driven us to become what we are today. From starting our journey 7 years back to becoming a Reliance — backed startup — he reminded us that we have come a long way, but still have miles to go.

Driven by design

It was my turn next. I started off by sharing an intriguing scene from the movie ‘Founder’ in which the McDonald’s team is shown designing a shop floor prototype on a tennis court. They go through multiple iterations before they figure out the most efficient system to deliver a burger and coke to the customers, in the least amount of time. The point I wanted to drive was how businesses can leverage design to keep their customers happy while increasing profits.

For us, the design process is empathising with the user, defining the problem, Ideating solution, prototyping and testing to craft great user experience.

Impact of Design on Business

Next up was Harsh Vijay, Chief Designer, Co-founder & CEO of Brucira, a Mumbai based design studio that has worked with the brands likes Google, Hotstar, Oppo, Titan, and DHL. He shared his views on how good design can help grow businesses.

“A product is not sustainable if it is useful, popular, and engaging but not making a profit.”

The focal point of his talk was how business and design go hand-in-hand and he made his case with the help of many interesting examples. Using the chart below he was able to draw parallels between business design and service design. His talk was peppered with examples of how design has helped businesses directly and indirectly reduce expenses and increase profits.

The Hotstar Sports Bar — Gamifying India’s favourite pastime

From the world of streaming media and IPL, Ananth Pai, Product Designer from Hotstar, spoke about his experience in building the Hotstar Sports Bar.

Watching Cricket or any other sports for that matter has always been a social experience. On the other hand, streaming videos on handheld devices is pretty much a very personal activity. Ananth, with the Hotstar Sports Bar has successfully brought these two experiences together. In the app, his team has created a social viewing experience where friends can watch a match together. With gamified features such as Social Feed, Hotshots, Emojis, and Watch n Play, user engagement has increased significantly along with the possibilities for monetisation. He highlighted how a simple filter and sort on Social Feed led to a positive user experience signifying the importance of even really small incremental design improvements.

Q&A

After the two thought-provoking sessions it was time for questions from the audience. This was a fun Q&A session that brought out some interesting perspectives of the product world. Our speakers were asked questions about decision-making processes, the importance of stakeholders, user-centric designs, and design principles.

Thanking the Presenters

We had our first successful meetup, all thanks to our speakers and the awesome group of people who attended the event.

Love&Glue and AML Products Showcase

Apart from the interesting talks, we also had an exclusive product showcase from Love&Glue. Love&Glue is a brand created by our very creative and inspiring Design Lead — Pearl Mendonza.

AML team at Fynd has been developing cutting-edge AI tech, and they showcased their collection of products like Fynd Trak, Fynd Now, EraseBG, GlamAR, and Witi to the attendees.⁠ To know more about our AML team, visit Fynd Research.

Feedback

We always welcome constructive feedback so that we can continuously learn and improve. The feedback box at the venue was full by the end of the day.

Wrapping up

From all of us at Fynd, we thank everyone who attended our first meet up. We hope you had a great time, met interesting people and found inspiration. We encourage all design enthusiasts to engage in conversations and contribute to future events so that we can all learn and grow together. We love to talk about design. Join us if you do too.

Kudos to our design team who planned and managed the event. We hope to see you soon at our next event!

Driven by Design: Taking Fynd’s Open Learning Culture to the World was originally published in Building Fynd on Medium, where people are continuing the conversation by highlighting and responding to this story.