Automated guided shopping experiences to maximize eCommerce conversion

Overview

We are building the next generation of ecommerce. In our vision, ecommerce stores would be fully interactive and would be created automatically in a snap by an AI machine. To transform the current ecommerce stores to be interactive, our AI creates interactive experiences that are implemented in various placements in the store and encourages consumers to share data about themselves and their needs. In return, consumers will get accurate product recommendations and personalized and improved user experience.

My Rule

With the vision of the CTO, I managed the entire UX and UI process while communicating ideas and solutions to R&D. I Improved the end-to-end experience of Skeep by identifying UX issues, proposing design changes, conducting usability tests, writing UX stories describing flows and interactions.

Let's dive into the system

Once you sign up with Shopify as a brand. Our AI scans your site, catalogs all the products, and creates your experiences. I split the screen into experience status tabs so the user can switch between them. For each experience, the user can click on the dots menu and perform several actions.

Products Page

All scans performed on the brand's website can be viewed here. Tags can be removed or added to accurate product matching. The main goal was to give the user a clear picture of all the info while still giving him the option to edit it. I chose to use a spreadsheet for several reasons:

  1. we are dealing with a large array of single-level data
  2. we display data that is not connected (to create an infographic with charts or pie charts)
  3. The user needs to see all the data simultaneously to quickly analyze or compare it.
  4. Help users quickly interpret complex information.

Using a filter option was necessary in order to save time in finding the relevant product. Additionally, there's the information hierarchy – a picture of the product, name, product type, and then all the tags relevant to it. By clicking edit, the user can edit tags, create new tags, and connect them with products. In order to accurately scan the algorithm, the user needs freedom of action.

.You can see the whole flow in the Figma button

Edit Experience

After the experiences are ready, you can modify their content and design in the editor. The main challenge was to create a general interface containing all the required information and edit options for each element that would not overload users. First, I decided to split the screen into two parts  (1) Editing the experience (2)Preview – To make it easier for the user to edit and see his changes. After that, I made another clear division for the user – a tab for content and a tab for design.

My next step was to make a clear divide between content and design for the user. The content tab is where you edit questions and answers. With a clear indication of how many characters are allowed. We wanted to make sure the user was aware of the impact of changing the questions and answers on the product-matching algorithm. Therefore, we included a notification with this.

Design tab – the algorithm extracts the brand colors, but if he wants to change them, he can add the font he wants, and change the colors accordingly. There are about 12 options for coloring elements on the experience page. Thus, I created this section as a table so it's easier to edit

Dashboard

This is one of the main screens on the platform, where brands are able to view the overview with stats of their experiences. The main challenge was to contain all relevant information with a filter option. “Information Architecture” methodologies provide a variety of alternative ways to show data. In this screen, I decided to change the tables into infographics with diagrams, graphs, etc. Here’s why:

Better perception of information – The internal interface mostly consists of text or numbers grouped into sections, tables, and paragraphs. The infographics in this case narrow down and highlight the information.

Responsive design- All users like it when an interface quickly reacts to their actions and displays the information they want in seconds. With the help of graphs, users can interact with data and see detailed information about any item just by hovering over it. Such an approach allows you to display more information than you can in a spreadsheet while keeping the interface clean and beautiful.

Integration

From this screen, the user can connect to other systems he uses to manage his site. Some of the systems require details before connecting, so we created another pop-up that appears if necessary along with the relevant details. After connecting to the system, the card will appear at the top of the screen with the option to log out. Using the filtering option makes it easier to find the relevant integration. It is also possible to create a request for the same system if you do not find it. 

Billing

On this page, the user can see what his plan is, how much he pays, and what capabilities he gets. Furthermore, he can view other possible plans and, if he wants, he can upgrade them.

User Management

On this page, the user can see all the domains he has on the platform, and add/delete them. Each domain has a status so the user can see what their permissions are. When he reaches his limit, he can upgrade and add more users. When a new domain is created, a dropdown opens, so that the user can see it right away. I used additional colors to draw the user’s eye to the main actin.