Recently, we cooperated with Heidian in the small program design and development of its HeyShop mall. This issue will introduce you to the relevant content of this project.

Please click here for reprintReprint guidelines.

HeyShop mall small procedures

Online Shopping Store MiniProgram

Design/Silver

Front end/Time Zen studio

Tech support/Hey shop

I. Project Introduction

HeyShop mall is built for the offline experience store under Heidian. As an OMO mall, HeyShop gathers selected goods from all over the world, and has a number of domestic independent designer brands and fashion bloggers enter, thus connecting online and offline to provide buyers with the best shopping experience.

As a “new retail” experience store, we have specially customized a “booking fitting room” function for users. Users can add the clothes they need to experience to the reservation list and select the time, then they can book the exclusive fitting room during this period and go to the store for offline experience.

Click the mini program card in the picture above, or identify the following TWO-DIMENSIONAL code to directly enter the mini program preview real online project. Check out a high-fidelity prototype made with Marvel here (the prototype and final project features have been tweaked slightly).

Ii design Analysis

Electric business small program in some basic function requirements are similar, we first determine the bottom menu of the five entrance: home page, classification, membership card, shopping cart, mine.

The home page is divided into recommendation, brand and special topics.

Membership card: my reservation, membership card information, store address.

Among them, the user is the most easy to reach the page, one is to open the first screen of the small program can see the home page recommendation, the other is in the bottom menu to strengthen the membership card entrance.

1 page

We first look at the home page, Banner each issue can change the theme, about HeyShop’s own information push, or high-quality merchant special recommendation.

Then it reflects several important features, such as brand direct sales, authenticity guarantee, price concessions, and store experience. Let users at a glance. And then there’s the coupon section, which is random, and when there’s a deal, it’s hidden when there’s no deal.

This is followed by the Top hottest items section, which users will be interested in, and four thematic sections, with different themes. To save space, make items that can slide sideways or left. Click on the cover of the topic to access the details of the topic.

Under the theme section, a brand recommendation section is added, so that high-quality brands have another entrance to display.

In the end, is just on the new section, here we use tiled display of goods.

2 brand

We need a list of brands since it’s a platform for merchants to enter.

The brand details page shows the brand’s story description, as well as all the products under the brand.

3 items

Commodity is a classification, the main classification has sub-classification. After clicking in, you can sort by comprehensive, sales volume and price, as well as select and classify.

The product details page mainly shows the product title, price, introduction, and can quickly select the SKU. For clothing items, there will be an extra button to book a fitting room.

4 a shopping cart

The shopping cart section does not change much and needs to display the basic item title and item SKUS with add and remove functions.

5 the membership card

On the membership card page, you can see the entrance to make an appointment for fitting. Click in and you can choose the time you want to make an appointment, or cancel the existing appointment.

Slide down to see membership card information and store address.

After adding the clothes you want to try on to the reservation list, you can choose the appropriate time of the week to book the fitting room.

6 my

The personal center has shortcuts to each order status, as well as coupons, shipping address, personal information, account security, about, etc.

Three HeyShop offline experience store

Physical store address is located in Shanghai Xintiandi Nanli shopping mall on the 2nd floor (by subway line 10 or line 13 can be reached), high appearance level, artistic cavity, the popular color of the season, in Shanghai partners can go shopping.

Watermelon Design Institute

Internet startup | | UI design development resources | tutorial

Please do not reprint without permission, please get authorization from the author of the private letter

© uirush.net