8 - Rich Menu Editor

Time|2020.7 ~ 2020.9
Role|Research, UX, Interaction, Visual

Overview

The LINE Richmenu currently only has an open API, which requires engineers to write codes and connect. The design task this time was to make a visualized richmenu editor, so that brand clients can use this editor to set the interaction on the richmenu, providing consumers with a brand introduction, customer service, event notification, etc., to deepen fans' stickiness.

B2B2C
MarTech
LINE Richmenu Editor

What is Richmenu?

    I believe that you should have a few official accounts of your favorite brands in LINE. After opening the official account, if you can see a picture at the bottom, it is the so-called Richmenu.

    Brands can use various pictures as Rich Menu to convey brand image through visual design. Buttons can be set on the picture, and consumers can click on the button to open a specific URL or trigger a keyword chatbot.

    1. The Problem

    • External: Many clients wished a richmenu editor, because of the high using frequency. They had to spend money to find engineers to customize it, which was not very economical, and a waste of time.
    • Internal: When BD pitched to new clients, they were often challenged because our product didn't have this feature compared to competitors.

    2. Competitor

    Competitor A and B are our long-term rivals. Every time a new business need is determined, the business and product departments will consider how to design strategies to be able to compete with competitors or even surpass them. Our product are very similar to competitor A in terms of industrial scale and main user. Clients often compare A with us, causing BD Team's sales to fall short of expectations.

    3. User Scenario

    Interviewed our clients and summarized the user scenario as following:

    👩🏻 User

    Marketing specialist

    💡 Purpose

    1. Making regular richmenu
    2. Making special event richmenu, such as black friday sale

    🕑 Using Frequency

    1. Different frequencies depending on the corporation
    2. Basically change the richmenu once per month
    3. Change the richmenu 1-2 times a week with special events

    💢 Problem

    1. Need to open LINE OA Console to set up richmenu
    2. The layout can't be changed, which limited creative ideas
    3. Can't record user's click data

    4. User Story

    👩🏻:When I was making a richmenu, I want to freely edit the clickable area, so that I could change the design of the richmenu often.
    👩🏻:When I was making a richmenu, I want to see and interact with the actual menu so I can make sure nothing is wrong with the setup.
    👩🏻:The original backend is limited to only one image, which causes the buttons to be crowded together, the visual design is not good enough, and it is not easy to find buttons that are too small.
    👩🏻:I want the richmenu to be scheduled, it can automatically turn on and off, so I don't have to wait until the last moment of the event to manually turn it off.
    👩🏻:When a consumer clicks on the richmenu, I want to know exactly which button did she/he clicked, so that I can collect consumer preference.
    👩🏻:When a consumer opens LINE official account, I want to display different menus according to the identity of the consumer, so that I can provide service suitable for each one.

    5. Roadmap

    Combined with the results of competing product analysis, we planned short-, mid-, and long-term goals.
    The strategy is: to find problems that others have'nt solved and give priority to launching solutions.

    6. Wireframe

    I read the API documents provided by LINE, drew the draft of the main screen and communicate with the developers about the functional spec, confirm the technical feasibility and development schedule.

    7. Flow

    Flow 流程圖

    8. UI Screens

    Arrange the operation steps from left to right (order 1~4, a~f) guide the user to complete the setting step by step

    Performance Review

    1. Clients

    A client used the editor to make a very interesting richmenu, which exceeded expectations

    應用實例 - 綠藤生機

    ▴ A richmenu designed by a cosmetic brand

    ▴ The interaction video

    2. BD Team

    Richmenu Editor became a highlight function of our product after launched to the market. With the examples above, clients were more willing to buy it, and drove the business income of 2020/Q4, 2021/Q1.

    "It was super useful, full-featured and without technical bugs, clients will want to buy and follow the showcase." - Sales Manager