WorkResumePlay
Freja

DaXiang

An IM office software used by Meituan employees, through which users can make group
communication, document collaboration, task management and other functions.
Type
Interaction Design
Timeline
05/2021-8/2021
Role
UX designer
Team
MTDesign

Intership Overview

Meituan is the biggest Chinese shopping platform for local consumer products and retail services. The group I worked for is responsible for enterprise product Design. Da Xiang is an IM product used particularly by Meituan employees.

What I did

1. Completed 6 design requirements.

There were 2 new versions published during my internship. I was in charge of the interaction design of 6 requirements of Daxiang. In the design stage, I collaborated with PMs and visual designers to make the interaction design sketch. In the development stage, I worked with SWEs to launch the new version;

2. Learned the rules of  interactive components and analyzed competitive products from multiple perspectives.

The design group has their own UX kits and components library call MTD, so I learned the rules of different components and IOS human interface guideline to choose the right component and customize the interaction based on specific user scenerios.

3. Learned to use pyramid principles to communicate with others and write reports during work.

Soft skill is as important as design skill while working in a big company. To enhance the effciency of my collaboration with others, I used pyramid principles when talking and making presentations. The basic idea is that anything can be generalized to a central point, which can be supported by three to seven arguments

Outcome Display

Requirement 1 - Consistency improvement of schedule detailed page on PC and Web

-Challenge

At present, there is a big difference in design of schedule detailed page between APP and PC, resulting in problems such as function and interaction behavior unalignment. Therefore, the redesign of the two pages at PC and App are required to narrow the differences and improve user experience.

Before
After

Design Process

In order to improve the consistency of the page between App and PC, I solved the problem in three steps

-Step 1
What are the differences

There are 7 inconsistencies between the page on PC and App, and those can be sorted into two types of problems which are information display and operational process.

-Step 2
Which can be modified

Since the design on PC is more sophisticated, I decided to align the design on App to the design on PC. However, there are some points that needed to be thought separately.

Step 3-
How to

Question to be solved

1. How to determine the top and bottom functions?
2. How to display the list of participants on the App?

1. How to determine
the top and bottom functions?

The functions on the top and bottom are inconsistent in both ends, so it is essential to define the functions and sort then into a more proper manner.

Function list
Edit
Add participant
Cancel room
Transfer room
Share
Accept/Suspend/Refuse
Cancel Meeting

Based on the Gutenberg Diagram
1. The best place for buttons is at the bottom if the interface needs to be read before the user can operate.
2. The top button is small because it takes up a limited amount of space and is therefore relatively hard to click. Therefore, the top button is more suitable for editing the page and needs to be used with caution

2. How to display the list of participants on the App?

In the old version, the participants list are displayed by user name and profile picture on App while using username only at PC. To make it consistent in both ends, I decided to use username finally considering that it has relatively low cost of development and can display more participants in same space.

After determining the display of participant list, I need to further consider the interaction mode of the participant details page. At present, the profile picture cannot show the conflicting participants, and the profile picture list takes up too much space. Therefore, a segmented Control is used to distinguish the participants who refuse and conflict.

Multiple plans comparison

I came up with 2 plans for cancel the room. After communicating with PM, user can choose specific time period to cancel in future version, so considering the scalability, I uses Plan 1 in the final.

📒 Plan 1-
1. Need one more jump, but keep the style consistent with the interaction of transfer room.
2. Facilitate future function expansion

📒 Plan 2-
1. The operations can be completed on the current page
2. Low scalability
3. The function is similar to that of the transfer conference room, but the interaction mode is inconsistent, which is easy to cause users' confusion.

Final Design

Other Requirements Display

-Support adding out-of-group members
-Add calendar naviagtor

Retrospect!

-What I learned
1. Always think about why to use this form of interaction at the very beginning, rather than just copy a competitor.
As an interaction designer, I have to gain the ability to dependent thinking. When got a new requirement, the first step before is to see how competitive did to solve this problem. Sometimes I take their design for granted without thinking why, which leads that I cannot explain why that makes sense while asked by others. Then, I changed. I first do some research to make sure f the requirement is validated and understand the meaning of requirements. Then I try to come up with a solution without seeing the competitor, to find out the logic and connconnectionetion between the interaction solution and the problem. After that, I looked up competitive design to figure out how others solved the problem and iterate on mine.
2, Ask more questions, to reach a win-win situation.
UX designer works as a representation of users to talk with engineers, PMs, or stakeholders to make sure the product is user-friendly. It is like we make a voice for users. UX design is we used several methods like interview/ questionnaire  to know our user as much as possible, and use like affinity wall, user test to make sure the designer model or presentation model  is accord with Users Mental Models