Banner image source
In the fast-paced world of digital design, adaptability is critical. The decision to revamp our admin interface became imperative as Shopify introduced its Polaris design system in 2017, emphasizing its adoption for app development around 2021. Amid an ongoing process of rebuilding our admin, the Flits team strategically aligned with the Polaris design system, amazed by its detailed, streamlined, and merchant-friendly attributes.
The Polaris design system emerged as a response to the need for a unified and seamless experience across diverse user groups, ranging from merchants and agencies to app developers. It offered principles and practices for consistent application across various interfaces as a comprehensive guide.
We announced in January 2023 that we were all set with our design when the admin development started. The development was a gigantic task as Flits boasts various features that were re-designed with entirely new user flows compatible with Polaris’ design system.
This blog will cover the challenges, advantages, and impact of the re-design with the design system.
Challenges During the Polaris Redesign
A. Legacy System Constraints
The old admin interface posed formidable challenges, it evolved phase by phase to meet market demands. We added a mosaic of features individually, creating a complex and somewhat unpleasant user experience. Features, though connected, were often listed in silos, creating confusion. Our platform’s primary feature is customer account page and a list of add-ons to complement this feature, but our admin had no visible hierarchy that made this apparent to a new user.
B. Learning Curve for the Team
Implementing a new design system meant navigating a learning curve in a short period of time. Redesigning the admin panel demanded a complete rethinking of flows, user interactions, and content placement. Unlearning previous design approaches and embracing a user-centric philosophy became paramount.
C. Data Migration and Integration
While the redesign focused solely on the front end of the admin, data migration was not a part of the process. All the settings and data saved by users was not affected by this re-design. Integration challenges surfaced in adapting existing flows to align with the Polaris design system. This required reimagining user interactions and rethinking the integration of other tools and techniques.
Advantages of the Polaris Redesign
A. Consistency and Coherence
The Polaris design system brought significant advantages by eliminating the need to invest time in creating fundamental design elements. Icons, banners, layouts, color palettes, and font styles were predefined, providing a clear direction for design and content. Shopify’s guidelines offered clarity on design decisions, promoting consistency.
B. Improved Collaboration
Implementing the design system facilitated collaboration within the team—clear guidelines on design elements streamlined discussions and decision-making processes. With a shared understanding of the design system, team members could generate ideas that fit into established guidelines.
C. Time and Cost Efficiency
The impact on cost and time efficiency was profound. The Polaris design system significantly reduced the time spent brainstorming and designing layouts. Designing elements, patterns, tokens, icons and components from scratch became unnecessary, resulting in substantial time savings and cost-effectiveness. It also helped cut down time brainstorming the tone and the voice of content.
D. Enhanced Accessibility and Scalability
The redesign addressed accessibility concerns by reorganizing billing options and app settings using Polaris components. This ensured all options were visible to users, enhancing the overall user experience. The navigation layout enhanced scalability, making future updates and expansions more straightforward.
Impact on User Experience due to Polaris redesign
When considering user experience, hierarchy emerged as a critical factor. The redesign aimed to improve the overall experience by giving a hierarchy to features like the customer account page and premium tools features like store credit, wishlist, social login, etc. We allocated separate pages and distinct menu items to enhance user focus, providing a more intuitive navigation experience.
A. Streamlined Workflows
The redesign streamlined user workflows, leading to increased efficiency and time savings. Our primary feature: Customer account page was given prominence and our add-ons were grouped together as premium tools. All customer account page related features were listed on a single page for easier access. Interconnected features were re-grouped.
B. Streamlined Billing
Billing flow is one of the most important parts of any app that has paid plans. The user must be aware of all the features they can access within the app and what features they are paying for when subscribing to the app.
Old billing created a hindrance while viewing all options and features available as users had to scroll through the whole page.
In the redesign it was converted into a two-step process where users can see all the plans and then check out all the premium tool features, thus eliminating the chance of missing out on premium tools.
Lessons Learned during the Polaris redesign journey
A. Reflection on the Journey
The redesign journey provided invaluable insights into working with design systems. The team, unfamiliar with design systems, invested considerable time and effort in understanding and implementing Polaris components and guidelines. The process, even though demanding, accelerated the design and content creation phases because of pre-existing policies.
B. Continuous Improvement
The importance of continuous design and user experience improvement cannot be overstated. As Shopify updates its components, maintaining uniformity throughout the admin panel requires staying abreast of these changes. Flits team has been on its toes catching up with the changes and evolving in tandem with ongoing design system updates.
In conclusion, the decision to revamp our admin interface with the Polaris design system presented its share of challenges and advantages. The journey, marked by a commitment to build a user-centric design and adhere to design system principles, resulted in a more coherent, efficient, and aesthetically pleasing admin interface, which has finally come to a stop, though it hasn’t ended. Flits is optimistic about the future, with lessons learned and a commitment to continuous improvement.
We invite readers and Flits users to explore our new admin and their experiences with design system implementations or ask questions about our journey. Please explore this link for further reading and resources on the Polaris design system, its performance, and the broader realm of design systems. Your insights and inquiries contribute to the ongoing discourse on evolving design practices.