Data Product Mini-Program MVP Version Design Review

1 Overview

⛳1.1 Background

The Compass-Strategy Platform has a large gap in mobile demand. In order to enable users to more conveniently view the data of themselves, the market, and the competition, our team needs to complete the closed-loop experience of each device to improve user stickiness. At present, the MVP version of the mini-program has been promoted, through the framework migration, from zero to one design launching and detail polishing, as well as the points that need to be paid attention and reviewed to in the small program design found in the development process, lay the foundation for the next iteration and other mini-programs to provide reference and experience.

📚1.2 Content

Part I [Review Overview] The project background and document content of the review;
Part II [Design Goals] Discuss the design goals and strategies;
Part III [User Flow and User Interviews] Combined with user interviews, analyze user flows;
Part IV [How to build from zero to one] Review around the migration of the product framework from web to mobile, and the construction of design components;
Part V [polish details] Analyze the method for using mobile and web design components, and the differences between mini-program design and app;
Part VI [Reflection and Summary] Summarize the process of product preparation, implementation, and promotion at each stage.

2 Design Strategy

Ensure that the design direction of zero-to-one projects is clear, explore business scenarios in depth, and help businesses grow quickly. At the beginning of the zero-to-one project, the concept of the overall structure and framework of the product is often not clear, and the results are eager to be verified. Therefore, it is more necessary to be in the role of a communication bridge between the product and users as a designer. On the one hand, jointly customize the core capabilities of the MVP version through the previous report to understand market demand. On the other hand, through user research to contact front-line active users, find user pain points, integrate product and user perspectives, and find the optimal solution.

   BEFORE   

   MID  

1. In-depth user interviews
・Lead the usability test
    and adjust the direction

2. Analyse business demand
・Multi-party joint construction
    migration of the basic framework
・clear UI style
・Reusable design components

3 User Interviews and Strategies

3.1 Staged User Interviews

The whole process is divided into two parts: the early and mid-term user interviews, and the later interviews will be gradually carried out and iterated after the launch.

3.11 Preliminary Interview - Setting the Direction
In the previous interviews with 15+ top brands, most users expressed their desire to use the product on mobile, especially in non-working day scenarios or non-workplace scenarios, and they will use it frequently. The questions related to the mobile experience obtained are summarized as follows (excluding confidentiality information, only a partial display)

👩‍🦰 "I hope there will be a real-time data monitor on mobile, so I can view brand operating data, best selling items weekly or monthly."

👱‍♂️ "I hope to visualize the data. 1. Look at the brand data: store sales, year-on-year or month-on-month trends, abnormal warnings, etc. 2. Look at the industry & competing products: other brands in the same category, the trend chart of the market, intuitive ratio."

🧑🏻‍🦰"I prefer wireless scenarios. I will look at the data of various online stores. It is more convenient to watch on the mobile phone when I am on a business trip, on the weekend, or not at the office seat. If I want to collect reports every month, it will be very convenient to directly click on the button to generate automatically."

🧔‍♂️ "I want to watch the live broadcast problem data on the mobile."

3.12 Mid-term Interview - Clear Direction According to the mid-term usability test and interviews, we visited the top 5 leading brands, and these selected merchants maintained an average usage frequency of more than once a day on weekdays and about once on weekends. After the first version of the design draft was completed, we interviewed two brands, and make timely adjustments based on feedback

【Homepage】
👱‍♀️ "I'm used to looking at different products by each online store of the brand, not the data aggregated by SPU. I hope it is the most granular data, otherwise, it doesn't make much sense."

👨🏽‍🦱"I don't have much inclination towards charts, just needs basic data."

【Market page】
👩🏼‍🦳"The frequency of use is lower, and there is nothing I can't understand at present."

△ 1st edition design sketch

The second version of the design draft was iterated based on user interviews. The survey found that users are generally satisfied with the mid-term design, and there is no obvious confusion about chart selection and experience opinions. After collecting all the opinions, there will be gains for the follow-up direction and functional experience improvement.

  【Homepage】
   🧔 "Is there an overlap in the data? Can all the data dimensions be more obvious?"

   👩🏾‍🦱 "It is hoped that the time period can be customized. The ability to complex diagram            capabilities on mobile is not excluded."

  【Market page】
   👨‍🦰 "The boss looks at the market list most frequently, the brand list and store list are more      important to the merchant."

  【expectations】
   👨‍🦲 "If we can see the report on the mobile, it will be more meaningful to our team,                    especially the boss. The simple one is published once a week, and the complicated one
    is a monthly report."

△ Second edition design sketch

3.2 Typical User FLows

The user flows obtained through researchs and interviews need to be further verified and adjusted after launch.

△Live operation

[View live room data] Homepage of Live Room Data>Live Room Details
[View live room violations]
Homepage - the path from alarm bar to Live room alert

[View traffic-driving data]
Homepage Short-Video Data>Short-Video Details>Switch Sorting

[Check product sales data]
Homepage product data>Product details
[View product or store alerts]
Homepage-Alert Entrance>Product or store alert

4. How to quickly build from 0-1

4.1 framework migration

The app is mainly based on the market, goods, and people of the web platform by looking at the market, looking at the competition, and looking at its own dimensions. The two ends have slightly different user scenarios and demands.

The MVP version mainly realizes basic capabilities, realizes the ability for users to view data conveniently anytime, anywhere, gradually meets the needs of multi-user roles, and goes deep into each user role (marketing operation, store manager, and other roles) dimension.

4.2Construction of components

For a product without basic components and visual styles, it is necessary to begin with the visual style and to build from the construction of components. The Compass-Strategy applet is based on the multi-terminal expansion of the original web UI patterns, so the step of deciding on the visual style and color is omitted. While the MVP project can quickly go from 0-1, if it can cooperate with the simultaneous implementation of components, it will reduce the labor cost of later iterations and replace components, and will also improve the efficiency of phased iterations of the project.
After the interaction process and the first sketch of the design is clarified, the components can be packaged, and the following contents need to be clarified as belows.

4.21 clear grid and padding

Grid
Use a 4px soft grid to set the width of page elements in multiples of 4, and no longer use
the concept of slots.

Padding
Set the page spacing in multiples of 4 (such as 4, 8, 12, 16, 20, 24, 32, 40). The page spacing is generally 16px, and the default card spacing is generally 12px.

4.22 Specify typeface and font
Before start-up, set the font size of the text and Line Height, and clarify the font size rules for each level (such as the font size of the first-level and second-level titles, etc.), which can avoid unnecessary repetition and replacement work in the later stage. In addition, the line height will affect padding, when calculating the spacing, you need to pay attention to the line height affecting the visual experience of the page.


4.23 Clarify framework and hierarchical logic
From the beginning of the project into the design stage, a consistent page frame needs to be followed, especially when there are too many pages and element levels in the later stage of the project, it can avoid the problem of inconsistency between the page frame and page jumping process.

Clarify the usage specifications of primary navigation, secondary navigation, and titles to avoid hierarchical confusion.

Level 1 (top) & Level 2 (bottom)  Page Titles

4.34 Clarify other details
Other details such as rounded corners, borders, dividing lines, and shadows also need to be clarified early, otherwise, it will affect the construction of basic components. (only common specifications are shown below)

Border & Dividing line
△1px Suitable for split line and border scenes

Shadow

△Shadow direction & down (common, not unique)

4.35 Clarify the basic components
Improve basic components, such as form-related data entry components like selector, search, input, radio and checkbox components, buttons, data display components like tabs, avatars, etc., and data feedback components like labels, floating layers, pop-ups, tips, and other specifications. (May vary depending on each business)


4.36 Build the basic icon
If there is no available icon library, you need to create an icon library yourself. First, determine the safe size of the icon, and then determine the icon style. Basic auxiliary icons such as arrows, close, etc. need to be determined first. These icons are often used frequently and the cost of replacement is high. Functional icons or special icons can be gradually clarified and replaced in the design.

Safe area
蓝色：安全区域
红色：推进绘制区域

Basic Accessibility Icons

Function Icons

4.37 Complete the default state
Explain the limit cases, such as no network or offline, no search results, blank pages, etc. to supplement. In the page loading state, considering the instability of the network speed on mobile and the delay of data fetching at the back end, it is necessary to improve the loading status from the page level to the element level.

Page level👇

△Home page loading state (left) / Market page loading state (right)

Element level👇
△Take the market page - product list - avatar as an example (left) / Avatar style (right)

5 Polish details

5.1 Usage Notes on Mobile and web Components

Some components have differences on mobile and web, such as the style expression of "radio" and "check box".

5.11 Radio

💻Web👇
style1

📱Mobile👇

style1


△Scrolling radio, refer to IOS time picker

style2


△The above two styles are acceptable, and some platforms will use the label style as tabs, which need to be distinguished.









5.12 Checkbox

style2


△ In the label "radio" component, some products will choose the capsule type (with large rounded corners) to indicate a single selection, and the rectangular type (with small rounded corners) to indicate multiple selections, but most of the products are not differentiated. The selection method is in accordance with the UI specification.

💻Web👇
style1

📱Mobile👇

style1

style2

△Some products will distinguish between "radio" and "checkbox" label styles, such as adding a corner mark in the upper right corner, etc.

5.13 Logic
For the display logic of complex content, such as more information settings, etc. (mostly refers to the addition and modification of B-end products), on the web mostly uses pop-up or floating layers form, and drawers are more commonly used for more content scenarios. Due to the small size of the screen on mobile, the expansion logic is mostly the floating layer with step-by-step selection, and opening in a new page form is more commonly used for scenarios with more content.
For example, on a typical setting form page, the user needs to make associated selections for the content, first, the user selects the first-level radio selection and then selects the second-level checkbox based on the previous radio selection. The basic principle on the web is to simplify the steps as much as possible to keep it clear, but mobile requires splitting of the associated primary and secondary content. The movement needs to maintain the focus of each page and reduce visual interference.

💻Web👇

📱Mobile👇

Another scenario is the use of lightweight such as explanations. Toasts are mostly displayed on webs, and pop-ups are usually displayed on mobile. There are also scenarios where multiple explanations information are aggregated and displayed as a new page.

💻Web👇

📱Mobile👇

5.2 Notes on Mini-Program design

In the previous document, the author summed up the principles and considerations of mini-program design. For designers, the overall design method and strategy remain unchanged. It is necessary to pay attention to the particularity of the lanch environment, such as the designable area.

5.21 Top navigation
For top navigation, developers can only control areas other than the official applet capsule in the upper right corner(as shown green area below).


5.22 Bottom navigation

During the development, it was also found that due to the small program specification, only the first-level page can set the official bottom navigation, if necessary, the second-level page can only add other custom bottom bars.
If designers need to add an unofficial bottom bar to the navigation of the secondary page, they can refer to the mini-programs such as JD.com, Ctrip, and Meituan to guide users to perform operations such as purchases (as shown below from the Meituan applet).

First level official navigation

Secondary level Navigation - Style 1

Secondary level Navigation - Style2

⚠️ An unofficial bottom bar can also be used for the first-level pages, but according to the developer’s feedback, the unofficial bottom bar may have performance problems, and it is recommended to use official navigation for first-level pages.


5.23 Stick to the top

The processing of the Navi stick to the top needs to pay attention to some details, the design of the mini-program is similar to that of the app. It should be noted that if there is a slogan at the bottom, the slogan needs to follow the bottom of the card. After clicking to switch tabs, you need to set the anchor point to locate the first item of the feed. In the state of no data, you need to set an adaptive screen height to consider various mobile device screens (make sure the slogan follows the card).

△Scenario with data feed (left) / Scenario without data feed (right)

5.24 Left and right switching of tabs

The basic cards include tabs, and the operation of switching tabs will affect the performance of the mini-program (there are too many page nodes, if you need to realize sliding switching, each list needs to be considered), it is found in the survey that other mainstream mini-programs have rarely implemented this function. If you want to add the tabs sliding switching capability, you may need to develop and focus on how to improve performance(from co-developer).


5.25 keyboard and confirmation button
Because the mini-program does not support the follow-up operation above the keyboard, such as the voice button followed by the search scenario (as shown below left) or the input box followed by the input dialogue, there will be a problem that the pop-up content of the keyboard will be covered. There are two solutions, if the element is not necessary to follow the scene, you can rely on modifying the keyboard text, such as "search", "confirm", "jump", etc. You can also add a "search" button next to the search bar, to improve the universality and versatility of the scene, in case the user cannot complete the operation with an unofficial custom keyboard.

6. Reflection and Summary

6.1 OFFICIAL REVIEW

Another thing to pay attention to is the Wechat official review time of the mini-program. A feasible experience is to divide the development into two stages, and submit the review version in the first stage (provide a large framework, and each tab has some basic available content). The review usually takes about 15-30 days. In order not to affect the schedule, the development of the final version can be continued during the review period. After the official review is passed, it will be replaced with the final version. The review time will be shortened to 3-5 days before the final release to avoid Influencing lanch planning.

6.2 PROgram design review

The design review of a 0-1 project is more important, not only for self-examination but also for polishing the quality of details. This MVP version has a total of 4 rounds of inspections, involving no less than 100+ experience problems (excluding performance and QA issues). In addition, various problems on the product management team, and designers from our team were also collected through the chat group in the later period. Many problems were found and solved while developing and reviewing, such as the bottom navigation and stick to the top problems mentioned in charpter 5.2.

6.3 design reflection

For projects with little experience in design and development, such as mini-program, preliminary research is extremely important, so as not to put effort into the output and fail to launch. In addition, 0-1 projects will inevitably undergo repeated iterations before going online. If the mini-program has the basis of component libraries, designers can devote more energy to the improve design experience. (such as the first-level tab and the second-level tab, the use of the first-level title and the second-level title, which may be repeatedly determined). To avoid repeated replacement of components, collaboration can be carried out according to the order mentioned in 4.1. After the design is completed, it is also very important to go through the framework path mentioned in 4.2 for multiple self-examinations.

6.4 The conclution

Projects from 0-1 require cross-team follow-up, and the process of its output landing must be more iterative and tortuous. Internally, how to efficiently build and use components, balance product consistency within the team, and set the tone for new products requires clear direction judgment, and accurate execution. Externally, how to communicate with the program management team, and development team in the early stage Ideas, promoting the implementation of design plans require more decision-making capacity and the ability to influence.

At present, the strategic wireless platform is still in the MVP stage and is still in the infrastructure construction stage. Whether it is designed details or product function richness, continuous follow-up and optimization are required. If you want to improve user retention and activity, you still need to improve the design details with program managers and developers more patiently. At the same time, you need to participate in user research in stages and complete all aspects of the product experience based on user research and data feedback to improve product Satisfaction.
2023.03 FIN

No reprint