Redesign Ruten
Messenger
Ruten, as a joint venture between PChome and eBay, is one of the largest e-commerce platforms in Taiwan. It is providing customers an easy, fun, secure, and free online shopping experience. Ruten is about more than shopping and selling but a platform to connect people and communicate with the social community. Ruten messenger is a chatting service on our platform. This service plays an essential part because it helped our members, no matter sellers or buyers, to communicate with each other. One of my major responsibilities at Ruten was to redesign the Ruten messenger. With the opportunity of this redesign, one of our team's high-level goals is to make the core experience of desktop and mobile the same so users can have a consistent experience.
I was the UI/UX designer in a team comprising a project owner, and other UI/UX designer. I was tasked with the redesign of Ruten messenger for desktop while collaborating with the rest of the team on ideation. I worked closely with my product manager and developer team to create a smoother, easy-to-use, and delightful chat experience on the desktop.
We would want to make our messenger service easier to use, so we look through our customer feedback to understand what our users love or what they feel struggle with.
In Taiwan, sellers usually had customer service hours. They might hire employees or even do it by themselves to answer buyers' questions through the ruten messenger service. After their service hours, they usually won't respond but they still read the messages. Since our website doesn't have a feature to remark unread, they will easily forget the messages that not been serviced yet. And it causes a bad impression in buyers mind, which is a badly impacts the experience.
" Why I can't communicate with others through my ruten messenger? Is it broken? I really can't tell. "
Our error messages are not clear enough for users to understand the problems. If our users are not able to find the reason for the error messenger, then they can't fix them either.
Other problems of ruten messenger are the information was redundant, the interface is too old and there was a need to fix them. The biggest challenge was to ensure ruten messenger appears visually clear and easy to use, even when overloaded with information and content.
We come out with two main solutions:
My design communication process involved a lot of sketching and prototypes. To design fast and test immediately, I asked for much feedback from others. I played around with different ideas and implementations based on design critique before the final design.
In the new design, we add a label feature to help users easily organize the messages. Just mouse over the conversation and you can see the label button popup. Click the label button to add a label to the conversation. We also add a new tab up here, so users can easily switch to the list that only labeled conversation.
Label message prototype
Before and After
Before, the left panel only had the name to indicate the user of the message. Now, I expand more detail on it so that users do not have to click to see when the last chat or what the previous sentence they said. All the essential detail is shown on the left panel. It's easier than ever to find and organize messages.
Left panel
Header panel
ruten messenger is the only communication between buyers and sellers and a necessary path for them, so why not show the account status and error information in more detail? If a user's account has been suspended, we will show the user why he/she cannot talk to other users anymore or what to do next to recover the account.
Account state and more info shown in the under area
Furthermore, we update and expand the panel information on the header to help users if there have any problems with their account state.
Account state and more info shown in the header dropdown menu
We redefined our top bar by brought important features like seller's shop and saved sellers on our top bar. Moreover, to keep the bar minimal, we made a dropdown menu to store our other features like delete and block.
Before/After Top bar
Before we had our design system, desktop and mobile seem to come from different products. The colors, buttons even features are not the same. To allow users to have a more consistent experience when using across devices, another designer and I have established a set of ruten messenger's design system, which inherits from our core Ruten system. We update the styling and placement of icon, text, and product card elements. In addition, to accelerate the development process by making cross-platform components that apply to many devices.
Design System for Ruten Messenger
The same components can apply to many viewpoints.
Our platform did not use avatars often. However, since users are used to other messenger apps like Line or WhatsApp now, I tried to make the interface more familiar to users so that they do not have to learn. Another reason to use avatars in ruten messenger is to add more personality to every account while people intuitively find whom they want to chat with and whom they are chatting with.
Working closely with the product manager and developers had helped to develop a strong understanding and fast communication in this project. At an early stage, pulling developers is crucial because they will easily understand the project's vision and why all the decisions I made. Let developers feel like they are actually team members and respect their opinions, they will naturally put more care into this product.
Our company using Waterfall methodologies, a linear approach to software development. Typically, I should move on to the other projects after I handed off my design documents. I will not see the final products until the demo stage. However, I decided to make a different workflow this time. The reason why I want to make a change is because I believe that as a designer, it is my responsibility to how my work is being presented. I happen to know that it will go through many complicated processes before developers push products on the demo stage. Therefore, they are unwilling to change any problems that will not affect the primary function. And this is not good news for designers and the products themselves.
During the process of the development stage, I asked developers if I can see the piece of products that they are building. At the early development stage, it is easy for them to make some adjustments, and I could see the change immediately on my side if the developers updated new versions. Showing is much more effective than words. We communicated faster and understood each other's languages quickly through this workflow.
