Overview

Shopify is one of the largest e-commerce platforms in the world. Serving many brand and drop shippers from all over the world to set up an online store and sell their products. Shopify is aims at making it easy for the non technical person to establish an online store.

Debutify aims to advance this mission by providing merchants with an app to set up, manage and grow their business. This involves providing them with a theme, a theme manager and a variety of niche templates to choose from.

Goals

Our goal is to serve our ecommerce clients to save them time, effort, energy and headache so they can focus on providing the best service for their customers every day and have a positive impact on society.

To do this, we set forth to  redesign the e-commerce experience for one of the leading
Shopify theme providers on the world.

Streamlining ideas

I started by doing competition research to see what others are doing and what makes users select a particular theme. My observations revealed that, as much as people valued certain features, they equally valued a positive user experience. In light of this, I collaborated with the team to include the following features.

• Add setup progress bar to nudge users towards completing the setup process.
• Add theme backup option for users. Users will have the option to enable automatic backups as well as create manual backups.
• Add conversion analytics for the provided add-ons

User flows

After selecting which features to incorporate, I created a site map to outline the Theme Manager's overall user flow. The idea is to provide a logical and simple path for consumers to follow while avoiding overburdening them with features. In addition, I consider Debutify's business goals to ensure that the new function is seamlessly integrated without jeopardizing the company's primary goals.

UX Design System

Prior to an update, the UX design team lacked a comprehensive design system that unified our brand. At the time, the design system was fragmented, inconsistent, and somewhat outdated, with no documentation to back it up. This resulted in inefficiencies for our team as well as product inconsistencies.

Inventory

We started with a UI Inventory of our primary interface components to better understand the current state of our existing design ecosystem. As inspiration, we used Brad Frost's interface inventory guideline to undertake a comprehensive audit as a team of two UX designers. The aim was to take screenshots of all of the theme builder's pages and identify all of the elements that were used.

Polaris is the company-wide design system, so our design system has to include many of the same components.

The Design

Once we had completed the inventory of all pages, I I began designing the components on Figma. I began by working on individual components like as buttons, tags, badges, and so on, before progressing to more complicated blocks such as side menus, navigation bars, galleries, and pages.
‍
During design I made sure to stick to the following guidelines

• Adhering to the naming convention defined in the documentation
• Components are combined into variants to allow designers to easily switch between multiple component states/properties.
• Use of auto layout and constraints to make responsive components

Documentation

Following the approval of the Figma components, I prepared documentation that covers how to use each component, the naming convention, and how to add new components.

Wireframe

Now that I had an idea of which direction I would pursue from ideating and drafting some paper wireframes, I created wire flows to represent the layout of the pages in parallel with communicating ideas when it comes to user workflows. These designs were aimed at increasing user adoption of our app and improve user backups and add-ons analytics experience.

High-fidelity designs

Once the user flow was approved, I then proceeded to design the high-fidelity screens. I collaborated a graphic designer to create some of the assets such background images and illustrations.

The high-fidelity designs were also designed in accordance with the existing UI design system.