Design systems for evolving landscapes and users
Being one of the first to launch a super app with multi-category brands comes with as much pride, as it does with trepidation. While the task is to cater to a varied set of users with equally varying behaviors, one of the biggest challenges we faced was building a user-forward, intuitive, and future-facing experience that is simple, versatile, scalable, and elegant.
After several months of incredible work put in by our young and dynamic design team, we are confident that the product we are building will get the love it deserves.
Here’s a quick recap to celebrate our journey, thus far:
Designing for a multi-layered system: The Design Unsystem
A system, by definition, is a set of rules and guides that create a consistent and intuitive experience for the users to help minimize friction and cognitive overload. The system thereby helps the users feel a sense of comfort and familiarity in a space that they can call their own.
As designers, we swear by the guardrails in a design system and adhere to them without any compromises. Each rule is sacrosanct and thereby inflexible. But despite this rigid structure, our team has pushed the boundaries of the system and imagined a new way of creating a flexible, consistent, and agile user experience.
With this new and fresh thinking, our effort was to ensure that when users come to our large and diverse Neu-universe, they are able to navigate through the multi-journeys and multi-brands effortlessly and have a cohesive and seamless experience.
This is what we call an “un-system"—an agile set of rules that are versatile, scalable, and flexible to stay in step with new user behaviors and experiences.
Despite its scale and diversity, it allows for flexibility in UI (User Interface) components, color themes, and even UX patterns, while maintaining the essence of our design system at its core on an ever-increasing canvas.
Going hybrid: dark or light modes
Dark is premium, light is clean—then why not use both?
In our Un-System approach, we challenged the rigidity of a dark theme for a super app that has so much going on. There were journeys that felt compromised and needed a lighter, cleaner interface. The Un-System was our solution to toggle and implement what is best for our users.
While a dark mode is great for categories like jewellery, fashion, and electronics to add that touch of glamour and give the products a luxe feel, it was important to balance the product pages with a light mode that was descriptive and needed the users' attention to read for longer lengths of time without fatigue or distortion.
This made us create a theme that was neither only dark nor just light, but hybrid.
We created a seamless hybrid system that was dark and light based on what would give our users the best visual experience.
Flutter was used to implement this seamless hybrid experience by leveraging the power of theming, and it allowed us to create a stronger hierarchy between the various widgets on a page and give each section its due to be consumed wholly by the users.
Getting the Right Technology: Flutter with Tokens
A great product needs the best people. When innovative design meets robust technology, we know we have a winner.
Our architecture team paved the way by leveraging a robust and scalable framework; Flutter. Known for its agility across platforms with a single codebase, we were excited to build the design system atop the M3 with Flutter, which allowed us to build a beautiful, natively compiled application within a challenging time frame.
We also enabled tokenization in our design system. Design tokens are small, repeated design decisions that make up a design system’s visual guide. Tokens replaced static values, such as hex codes for color, with self-explanatory nomenclatures that allowed us to build scalable, consistent models but, more importantly, provided a single source of truth across teams that worked together, namely, designers, architects, front-end developers, and engineers.
Visual dialects: storytelling through illustrations and animations
A dialect is a shared language, spoken by a specific group of people from a similar region. It’s a marker to identify your cultural roots and lineage. And this definition is not very different for the digital world either. With reducing attention spans and enormous amounts of information to process and consume on our super app — widgets, categories, offers, banners, content, and more, all vying for user attention, we decided to add some intended pauses to break the clutter.
Introducing our isometric mono and duotones, created just for that intended break. Our subtle play with illustrations and motion graphics is a way to provide a visual relief and aid the users in soaking in the entire experience at their pace.
Tip of the iceberg: so much done, and so much more to go.
Art without function has very little value in today’s world, and as designers and artists, we acknowledge that our creations have to solve real problems and keep our users at the heart of everything. Our journey to launch this design system has only made this more clear, showing that complex problems can have simple solutions.
Our work has only just begun as we move on to our next challenge of solving for more brands, diverse categories, changing user behaviors, newer themes, and deeper personalization. All this to enable every user to live the Neu!
