DaXiang
An IM office software used by Meituan employees, through which users can make a group
communication, document collaboration, task management, and other functions.
Intership Overview
Meituan is one of the top three listed technology companies in China and 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.
I was in charge of the interaction design of 6 requirements of Daxiang during my internship. In the design stage, I collaborated closely with PMs and visual designers to create the lo-fi and hi-fi design sketch; In the development stage, I worked with SWEs to test and launch the new version.
2. Iterated on designs based on user feedback, data analytics.
To present rationals for iterstion, I recruited participants in company to conduct user testing on features and did data analytics from back-end database. I generated design report and communicate with PMs and design manager to finalized the design sketch.
3. Used pyramid principles to communicate with others and write reports during work.
Soft skill is as important as design skill while working. To enhance the efficiency 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 the design of the 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 of 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.
_%E6%96%B9%E6%A1%88%201%20copy%E5%A4%87%E4%BB%BD.png)
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 of 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 participant's list is displayed by user name and profile picture on App while using username only on PC. To make it consistent on both ends, I decided to use the username finally considering that it has a relatively low cost of development and can display more participants in the same space.
After determining the display of the participant list, I need to further consider the interaction model 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 to cancel the room. After communicating with PM, the user can choose the specific time period to cancel in a future version, so considering the scalability, I use Plan 1 in the final.
📒 Plan 1-
1. Need one more jump, but keep the style consistent with the interaction of the 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 model is inconsistent, which is easy to causes users confusion.
Final Design
Other Requirements Display
-Support adding out-of-group members
-Add calendar naviagtor
Retrospect!
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 independent 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 about why, which leads that I cannot explain why that makes sense when asked by others. Then, I changed. I first do some research to make sure f the requirement is validated and understand the meaning of the 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 in accord with Users Mental Models
