If you just arrived and missed recent news → right now I am developing ecommerce application kit as design system for creation all of your shopping templates in a scalable and repeatable way. I’ve explored and studied all the best practices from companies so well-known to all of us: Amazon, eBay, Aliexpress, ASOS, Instacart and others . I’ve following and referring to official material design guidelines, but letting myself improve styleguides whenever it necessary (IMHO).

← Roll back to the first chapter

Less movements for mass customization

The architecture of this material design kit is based on usage nested components in Figma.Thoughtful relationships between the elements allows to perform global changes for components used for both of mobile and desktop layouts within less actions. Thus you can apply small edits or complex customization extremely quickly.

One component of item card using everywhere

Modify quickly to obtain the best conversion

How to sell more goods to the customer? This is the most important and significant question for every retail business. eCommerce is the industry where’s every comparably small modification matters. When your business is already established it’s high time to run some experiments for reaching the optimal conversion. And it’s the right time for this shopping app design system to get on the scene with clever architecture for purposes of rapid customization and instant translation to your production with Figma web API

Quick customization for the focus group satisfaction

When your high fidelity prototype or MVP is about to deliver into focus group for usability testing, it’s quite important to have your changes applied on-the-fly. And it’s the right time again for this ecommerce kit to get on the scene. Switch to another color, turn the item description more transparent or bold, make the price font more visible. And approach faster to your focus group satisfaction, because all the changes are set instantly within the application MVP held in participants hands for purpose of quick feedback gaining!

↓ Okay, now let’s jump closer to the application system screens…

Sign in patterns

‘Signing in’ is the process by which an individual gains access to a system or application by identifying and authenticating themselves.

Cityscape image used as the placeholder

This shopping design system based on scalability principles at maximum, thus there is the same Sign in / Sign up component used by scaling from mobile device to desktop app. The same approach will be applied in further upcoming app sections, to grant optimal and efficient organization.

• Appropriate to deliver to the user as separate application section / screen, or within pop-up / dialog.
• Social buttons could be placed in a row or column. Being made as nested components, tiggleble via ‘Instance’ without editing.
• You can apply filled or outline inputs instead of classic material, for example, for desktop application. That delivers more accessibility. Few clicks for it in Figma workflow, nothing to edit here except input caption and placeholder text. A variety of text fields styles already included in the kit.
• Once you authorized, you will be spammed by huge amount of discount push notifications, trying to pull you back into the shopping app. I bet you should follow the same way, when launching your product, just to “stay alive on the scene”.

Search patterns

Search allows users to locate app content quickly. When an app supports large amounts of information, users should be able to quickly locate content by searching for it.

Searching components from eCommerce application kit made to overlay on white background or could be placed over raised component with caption. Search suggestions block made as multicomponent module and scales unlimited just by dragging and resizing. If you need more items, simply slide down the border.

• When search control was tapped, in most of the cases next screen should appear with keypad expanded and focused input.
• Despite you can start without keypad expanded to promote more goods (e.g. Discounted items). Horizontal scroll is the best solution here.
• Take care of users’ recent searches. Keep it saved, but let them clear the list, when necessary.
• Tap on arrow icon restores the specific search request from history.
• Some of users may come to search without knowing what exact they are looking for. Showing the categories in this case — is possible.
• Using the counter for every search suggestion makes more clear how many search results is about to appear by next step.

Filtering patterns

Filtering reduces the number of items displayed in a view to just the data your want to see. A filter selects items that match specific criteria, such as location, type of item, or a range of prices.

Filtering modules designed with purpose to use as Right navigation or as Bottom sheets. The layout with filtering items is based on the seamless and flexible structure to fit for appearing from the right side and from the bottom being resized only. No necessity for deep customization, until you want to apply any changes to components the filtering module was made of.

• Pros: bottom sheet pattern is more accessible for interacting with just a finger, but right navigation scalable with more simplicity from mobile app to desktop version.
• Whether it appearing from the bottom or right side, this filters grants you ability to go deeper to the second level of params. The amount of parameters is unlimited and scrollable by swipe gesture. Note: apply button and title bar should be fixed and locked when content was scrolled.
• Second level of filtering (size, colors or any other properties) always appearing over the first level to make sure a user understands he is going deeper within the same flow.
• Use swipe right gesture to let your user return to the first level of filtering.
• For every applied filtering param there’s an instance ‘Item Active’. Close icon in this case works as reset for specific properties.

The bottom line. What’s next?

You’ve just walked through the sections of: Signing in / Registering, Searching and Filtering. More interesting posts is about to come on the next week, when I will approach closer to further screens. And the last step to rescale all the mobile screens to use to the desktop app. This planned on the second half of April. So much fun ahead, I guarantee!

Buy this ecommerce application kit

It’s a commercial product, but ideas shared for free. During the pre-order period 50% OFF, so you can purchase the whole shopping design system for $87.

Not a secret, I am using my own material prototyping kit for Figma, to build this ecommerce product. Is it possible to complete it within one month? I think so. In any case I recommend you to visit Setproduct.com/material and learn more about 1672 material UI modules for rapid prototyping with material guidelines followed precisely.