E-Commerce UI Kit

Design • Article

As part of the design team at Ettrics I helped answer a question about UI kits – who uses them and are they worth it? Based on my research and proto-persona creation we designed a UI kit for commerce that could appeal to a targeted group of users. My role in this project was research, wireframing, mockup creation and article writing.

Creating a Mobile UI Kit for Commerce

Using UX Research and persona creation to help build a mobile UI Kit

At Ettrics we’ve been inspired lately with the release of a couple beautiful UI Kits. So much so, that it got us planning our very own! We decided to design a gorgeous mobile UI kit for E commerce and share it with our friends. As we started our project a big question came up.

Who actually uses UI kits?

Our UX team realized that none of us had ever actually used one of these time-savers before? Why not?

It’s about improving your workflow, getting more and working less, and getting an incredibly better overall look. – Rochester Oliveira Designmodo

To help us to build the best UI Kit possible we knew we should kickoff our project with persona creation. First, we needed to find out what are the main reasons for using a UI Kit?

Why Use A UI Kit Anyway?

As a new designer you are often tasked with a tight budget and a quick timeline. This is where UI Kits are extremely helpful and cost-effective. You can source out many free, or nearly free kits to help decrease the time spent of standard items like forms and checkboxes.

Since a good UI Kit are meant to be customizable your work can be on brand and adaptable to your clients needs and design aesthetic.

There is supreme value in testing your underlying idea separate from the design choices being made. – Clark Wimberly OXP
UI kits are also amazing for testing ideas and prototyping. Without the restriction of perfecting your design assets beforehand you can concentrate on the interaction.

Who Would Use Our Kit?

Now we focused on who our potential users would be. What better way than to create proto-personas for our project? We came up with three potential user groups for our UI Kit, here is a brief summary:

The Novice Web Designer

This new-grad is fresh on the job market and wants to improve the speed at which she works. She requires an open-source kit that is fully customizable. Using a kit will help her visualize all the screens in a particular flow and give her projects a kick-off point with a well built file structure.

The Start-Up Developer

This developer is working for a start-up that doesn’t have a designer on staff. As the new guy he has inherited a lot of the front-end work. He feels like he’s wasting time designing in the browser. He would like to speed up development time with an already agreed upon UI.

Next we started thinking of who the end-users were in both of the above cases. The customers of the designers/developers and what their needs were. This is a proto-persona of the typical customer you would use a UI kit for.

E commerce Shop Owner

This shop owner has used a template site in the past but wants to increase conversions and feels that a professional is the way to go. She needs help streamlining her brand identity and getting a consistent look and feel across all her site’s pages. She has a small budget and a short-timeline. Her goal is increased site-traffic and conversion with improved user-experience.

Now We Can Start

After identifying the main user groups we are able to gear down our UI kit design to fulfill their end goals. Starting each project off with persona creation whether traditional or proto-personas helps speed up the design process by narrowing the scope right out of the gate. We have found UI Kits to be a low-stakes, high return investment. They are highly adaptable and perfect for prototyping.