The E-Comm UI Kit: Everything You Need to Build a Mobile E-Commerce App

Featured image for the 'ecomm' mobile ecommerce UI kit for Adobe XD, created by Nimasha Perera.

by Marc Schenker

posted on 12-05-2018

Getting the most of the E-Comm UI Kit

Nimasha Perera’s E-Comm UI kit empowers designers to build powerful e-commerce apps that users love (and love spend money on!). We talked to Nimasha about her philosophy behind the kit and the problems it solves for designers and users alike, but first, here’s how designers can jump right into her kit:

  1. Download the latest version of Adobe XD.
  2. Download the E-Comm UI Kit.
  3. Explore the kit. After opening the kit inside XD, grab elements and components like buttons and icons from the artboard to create your own e-commerce app. Copy and paste individual elements into your design projects, then change colors, line width, and text content to match your brand identity and create a fully-customized UI. For an even quicker output, frequently used elements are designated as Symbols in the Assets panel, which you can directly drag and drop straight into your projects, too.
  4. Save time and increase design efficiency. If you’re working on projects with repeating elements, use Repeat Grid. Mark objects like User Name lists and Messages Lists as Repeat Grid, which allows you to click and drag the component’s boundary box from the right side and/or bottom of the screen. This results in the component repeating itself to make a list.

Why UX matters when it comes to e-commerce

E-commerce is big business. Retail e-commerce sales around the world keep increasing year after year; by 2021, they’re estimated to total almost $5 billion USD. The sheer convenience of being able to purchase products from the comfort of your mobile phone has been a significant factor in this growth. According to Forrester’s 2018 Retail Best Practices: Mobile Web report, smartphones will be a factor in more than one out of every three (or more than $1 trillion USD) US retail sales in 2018.

All this data tells us that giving customers a user-friendly e-commerce app is vital to businesses wanting to target this huge demographic and rake in the revenue from these mobile transactions. Therefore, how you design your e-commerce app is vital, too. Designers interested in creating the next big e-commerce app are helped by the resources found within retail-themed UI kits.

Nimasha is a self-taught UX/UI designer from Colombo, Sri Lanka, and she wants to make a difference in e-commerce. “I started my UI/UX career back in 2012, first working as a junior, in-house graphic designer at a local design studio. When I joined that company, I had no experience whatsoever working with clients directly or any formal design education, as I am a self-taught designer myself,” she said.

A rendering of some of the e-commerce UI elements available in Nimasha Perera's E-comm UI kit.

E-commerce UI elements available in Nimasha Perera’s E-Comm UI Kit.

A study in e-commerce minimalism

The problem with many ecommerce apps is that they overwhelm the user with inessential elements and features. The result is an app that bogs down the user in friction and frustration; when you can’t quickly find what product you’re looking for, it’s not a pleasant user experience. Designers need to restrain themselves and design an app that focuses mainly on the products being sold.

“I wanted to create an e-commerce app that is focused on the products it is selling without overloading the user with all the extra details and descriptions upon first glance. Something visually simple, clean, and straightforward that makes it easier for the consumer to make their decisions,” she said.

Her philosophy for e-commerce apps is that they should be user-centric, which not all are. The main UI elements get lost in the shuffle to the detriment of users, specifically the ones who don’t regularly use their phones to shop. Consequently, she made smart design choices for her kit that reflect these issues.

“I think a lot of apps these days are overloading users with too much information at first glance, and, in the process, important elements such as choosing product size, color, and other options that lead the user to purchasing the item are hidden within the UI,” Nimasha said. “For the less tech-savvy audience, this becomes a daunting experience. When I designed this UI kit, I made product options along with product images the first thing a user sees when they get to the product page from their search results.”

Elements to design an optimal mobile shopping experience

Nimasha’s UI kit covers all of the main user flows that a customer could conceivably come across as they shop on their mobile phone. It contains numerous app-screen designs that display an organizational acumen, which will empower designers to get the most from her kit.

“My e-commerce UI kit contains 22 well-organized and layered app-screen designs, covering all the main user flows,” she said. “All the main UI elements are separated on one ‘Components’ artboard, so any element can be directly grabbed from there and added to your design project.”

A GIF of the e-commerce animation elements in the Ecomm UI kit.

Animation elements with an e-commerce focus, available in the E-Comm UI Kit.

While her kit’s focus is on e-commerce, it’s not limited to that use case. Nimasha’s kit is versatile enough, thanks to the strength of its elements and components, that it’s ideal for apps from different industries.

“Even though this UI kit is mainly created for online stores, the components by themselves can be used on a variety of apps. There are many UI components such as lists, tags, message bubbles, comments, and different button states, just to name a few,” she said.

Learning through experience

A headshot of UX/UI designer Nimasha Perera

UX/UI designer Nimasha Perera.

Nimasha’s UI kit is the culmination of several years’ worth of hard work learning while on the job. Her story is a great example of what happens when you take the initiative yourself and fulfill your curiosity for learning new things.

“When it came to working on UI projects, I had to learn everything on the go as I was working on actual client projects,” she said. “As scary as it was, it was also a great opportunity and a career-changing experience for me to learn and discover a whole new area of design skills and discover my true passion in the process.”

For more UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.

Topics: Creativity, Design

Products: Creative Cloud, XD