A Case Study By Dhanesh
Polystox App
1.1 The Core Challenge & Guiding Principle
The project was initiated with a stakeholder requirement to create a mobile application that mirrors the user experience and UI of the existing web platform. However, key technical and usability constraints required a more nuanced approach.
Technical Constraints:
Web Platform: Built on Bootstrap.
Mobile Application: To be Built using MUI (Material-UI).
Conclusion: A 1-to-1 component reuse was not possible. All mobile components had to be built or adapted using MUI.
Usability Constraints:
Desktop-first paradigms (e.g., large data tables, multi-column layouts, hover states) are not suitable for mobile screens.
User interaction patterns (taps, gestures) are fundamentally different from web (clicks, keyboard).
This led to our core guiding principle:
"Maintain the spirit and brand familiarity of the web platform, but prioritize intuitive, efficient, and native mobile UX patterns."
2.0 Foundational Research & Strategy
Before any design work began, the team conducted a thorough competitive and inspirational analysis to ground our decisions in market context and established UX best practices.
2.1 Direct Competitor Analysis
We analyzed the existing mobile offerings of our direct competitors to understand the current landscape and identify opportunities for differentiation.
Competitors Analyzed: Source One, OfBusiness, BSB.
Areas of Focus: Information placement, component design, and especially the Information Architecture (IA) of their filtering systems.
Key Findings & Identified Opportunities:
The analysis revealed significant weaknesses across the board, presenting a clear opportunity for Polystox to lead with a superior user experience. Common bottlenecks in competitor apps included:
Poor Information Hierarchy: Key information was often buried, and the visual priority of on-screen elements was unclear, leading to a confusing user journey.
Outdated UI: The user interfaces felt dated, which eroded brand trust and did not meet the expectations of our users.
Ineffective Layouts: Poor use of screen real estate made the apps feel cluttered and difficult to navigate.
Limited Filtering Capabilities: Filtering systems were either too basic to be useful or too complex to be easily understood, failing to meet the needs of power users.
Conclusion
The competitive landscape showed a clear gap in the market for a well-designed, user-centric polymer trading application. Our goal became to directly address these four weaknesses.
2.2 UX Inspiration Analysis
To define what "good" looks like, we looked outside our immediate industry to best-in-class Indian e-commerce and delivery apps known for their excellent mobile UX.
Apps Analyzed: Zomato, Blinkit, Meesho.
Areas of Focus: How they handle complex filtering, display product cards, and structure their overall information architecture for clarity and speed.
Key Principles Adopted:
From these leaders, we adopted several key principles that became foundational to the Polystox mobile design:
Clarity Above All: Prioritize a clean layout where the most important information and actions are immediately obvious.
Effortless Filtering: Filters should be powerful yet simple to access and use, never overwhelming the user (this directly inspired our bottom-sheet approach).
Scannable Cards: Information on product/offer cards must be highly scannable, allowing users to compare items quickly.
2.0 Foundational Research & Strategy
To ensure a consistent and cohesive user experience across the entire application, all screens are built upon a defined layout system and a clear set of rules for visual hierarchy.
3.1 Grid & Spacing System
A strict grid and spacing system is essential for creating clean, organized, and scalable designs.
Base Grid Unit The entire design uses a 4-point grid system. All component sizes, margins, and padding must be a multiple of 4px (e.g., 4, 8, 12, 16, 24px).
Column Layout: The standard screen layout is a 4-column grid with:
Margin: 16px on the left and right edges.
Gutter: 16px spacing between columns.
Rational:
This strict 4pt system enforces visual consistency and eliminates guesswork, leading to faster design and development. The 4-column structure provides flexibility for designing complex layouts on various mobile screen sizes.
Guideline
Always ensure your designs align with the 4pt grid. All spacing should be implemented using the predefined spacing tokens available in the Figma Design System file.
3.2 Color System & Token Application
Color Palette: The mobile application uses the exact same color token system as the Polystox web platform. This includes the primary brand color, neutrals, background colors, and semantic colors (for success, error, warning states).
Rational:
Reusing the web's color system is the cornerstone of maintaining brand consistency across platforms. It ensures that a Polystox button on mobile feels the same as a Polystox button on the web.
Guideline
Always use the established color styles from the Figma library. Do not use hex codes directly in your designs. Refer to the "Colors" page in the Design System file for guidance on appropriate color usage.
3.3 Establishing Visual Hierarchy: CTAs & Key Information
A clear visual hierarchy guides the user's attention to the most important elements on the screen.
Primary CTAs: All primary call-to-action buttons (e.g., "Place Order," "Submit") must use the Primary Brand Color for their background. This makes them the most visually prominent element on the screen, clearly signaling the desired user action.
Key Information & Status: To highlight important secondary information without competing with primary CTAs, we use specific components:
Tags: Used for displaying statuses (e.g., an order status of "Waiting for Approval" or "Shipped")
Alerts: Used for more critical, page-level information (e.g., "Your payment has failed").
Rational:
This system creates a predictable user experience. Users learn that the bright, primary-colored button is their main path forward, while tags and alerts provide important, contextual information in a standardized way.
2.1 Component Philosophy: Adaptation, Not Duplication
Our approach was to systematically recreate the web platform's UI elements within MUI, adapting them for mobile constraints.
Rationale: To ensure visual consistency and brand familiarity for existing users, reducing the learning curve.
A deep-dive analysis confirmed that MUI is flexible enough to accommodate our custom styling needs.
Process: Each component was rebuilt considering
Visual Resemblance: Matching color, typography, and border-radius where appropriate.
Mobile Scale & Accessibility: Ensuring all tap targets meet a minimum of 42x42px and that font sizes are legible.
Native Behavior: Leveraging native mobile patterns (e.g., bottom sheets for selection instead of web-style dropdowns).
Actionable Guideline:
Before creating any new screen, familiarize yourself with the full component library in Figma.
Do not detach components. If a new variant is required, follow the contribution process outlined on the "Contribution Guidelines" page in the Figma file.
2.2 Key Component Adaptation Example:
Marketplace Table vs. Offer Card
A critical example of our adaptation philosophy is the display of marketplace offers.
Web Implementation: A dense data table.
Mobile Implementation: An "Offer Card"
Rational
"A table on mobile would result in a poor user experience, requiring horizontal scrolling and presenting tiny, hard-to-read text. The Offer Card allows us to present the same amount of information in a scannable, tappable, and vertically-oriented format that is ideal for mobile."
Figma Reference : The master "Offer Card" component and its variants can be found on the "Components: Cards" page in the Figma Design System file.
3.0 Key User Flows & Design Rationale
The following sections detail the design rationale for critical user flows.
3.1 Marketplace Filtering
The Challenge: The web platform displays 8 distinct layers of filters in a persistent sidebar. Replicating this on mobile would clutter the interface and overwhelm the user.
The Solution: All 8 filter categories have been consolidated into a single Bottom Sheet Drawer, accessible via a clear "Filter" button on the main marketplace screen.
Rational
"This approach declutters the primary interface, allowing the user to focus on browsing offers. The filtering functionality remains powerful and fully accessible but is intentionally hidden until requested. This follows the mobile design principle of "progressive disclosure."
Figma Reference : See the flow starting on the "Marketplace - Main" artboard and triggering the "Filter Bottom Sheet" overlay.
3.2 Orders Flow
The Challenge: The web platform's "Orders" page is a single, long-scrolling page containing multiple interdependent sections (Order Details, Delivery, Payment, Tracking, etc.). This would create an excessively long and confusing screen on mobile.
The Solution: The single-page architecture was completely redesigned into a multi-step, sequential flow. The process is broken down into logical groups, with each screen focusing on a single core task (e.g., confirming order details, then setting delivery terms, etc.).
Rational
"This multi-step approach reduces cognitive load, minimizes the chance of user error, and provides a clear sense of progress through the complex ordering process. It transforms a data-entry task into a guided journey."
Figma Reference : The complete, multi-step journey is documented in the "Flows: Orders" page in Figma. All states and edge cases are detailed there.
🏖️ Onboarding Summary for New Designers
Points to keep in mind
Start with this document. Read it thoroughly to understand our core principles.
Explore Figma. Your next stop is the "Polystox Mobile App Screens" file. Familiarize yourself with our foundational components.
Review the Flows. Go to the "Mobile App Screen" to understand how components are assembled into a complete user journey.
Always Ask "Why?" Every pattern in this app was chosen for a specific reason. Understanding that rationale is key to contributing effectively.
Collaborate. If you have questions, please ask the team. We value consistency and collaboration above all.
