Category /
Redesign
Pluto TL Mobile App Redesign
Pluto TL is a data management application specifically designed for Team Leaders to manage customer and salesman performance more efficiently. With Pluto TL, Team Leaders can monitor salesman performance, manage customer data, and analyze business developments in real-time. The app provides logging, tracking, and reporting features that make data-driven decision-making easier. With Pluto TL, the management of salesmen and customers becomes more structured, increasing the productivity and effectiveness of the Team Leader's work.
Client:
PT. Berca Kawan Sejati
Year:
2024
Role:
UI Designer
Overview
Pluto TL was redesigned to address various weaknesses in the previous version, ensuring a more optimized user experience. The changes focused on improving the UI to make it more modern, intuitive, and easy to use for Team Leaders in managing customer data and sales teams. With improvements to navigation, visuals, and functionality, Pluto TL now offers a more efficient and convenient experience, supporting productivity and faster decision-making.
Problem
Complicated Navigation
Users have trouble finding important features due to an unintuitive menu structure or too many steps to reach a page.
Lack of Consistency
Non-uniform use of colors, icons, or typography makes the UI look cluttered and confusing to users.
Lack of Visual Hierarchy
Important elements such as main buttons or crucial information are not properly highlighted, making it difficult for users to understand the priorities in the app's appearance.
Solution
More Intuitive Navigation Design
Use a clear and easy-to-understand menu structure, such as sidebar or bottom navigation. Use familiar icons and labels so that users can understand their functions more quickly.
Standardize UI
Using a consistent spacing and grid system to keep the display organized. Implement reusable components to keep the design aligned across applications.
Optimize Visual Hierarchy
Use font size, color, and contrast to highlight more important elements. Apply enough whitespace for a cleaner and more focused look. Use buttons with striking colors for the main action to make it easier to find.
Beranda & Laporan Team
😔 The home page features a header with user information as well as three other icons. However, the layout is less than optimal due to ineffective use of white space, making the elements look too close together. In addition, the team list section is less informative, and the menu navigation does not make optimal use of the icons. The arrangement of components also needs to be improved to make it more organized and easy to use.
😊 In the home page redesign process, we optimized the use of white space to create a more spacious and comfortable look. The header was redesigned with an improved visual hierarchy by organizing all information on one mini page if you click on the burger icon next to the profile.
The team list section was updated with a more structured layout, displaying member information more clearly. Menu navigation was redesigned with more representative icons, plus text labels to improve accessibility. In addition, component organization was improved with a more consistent grid system, as well as hover interactions and micro-interaction animations to provide a more intuitive and responsive user experience.
Kunjungan
😔 The visit page displays a list of visited and unvisited outlets. However, the difference in information between the two is not significant enough, which may confuse users. In addition, the address layout on the outlet preview is not optimal in terms of UI, so it needs to be rearranged to make it easier to read and more aesthetic.
😊 In the Kunjungan page redesign process, we improved the visual differentiation between visited and unvisited outlets by providing 2 different tabs. The address layout in the outlet preview was improved with a neater arrangement, using better visual hierarchy, such as utilization of appropriate font size, optimal spacing, and more consistent alignment. With these changes, information is easier to understand, and the user experience in navigating the visit page is more intuitive.
Sales Report & Persetujuan
😔 On the sales report page, the sales information card is quite informative. However, the ''Sales Products'' section lacks user-friendly information because it is only presented in the form of a pie chart, which is difficult to describe clearly. In addition, the salesman's stock display is still limited, only displaying the name and number of packs, so it does not provide more detailed context for users.
The Approval Center page is used to approve or reject submissions from the team related to obstacles or requests for assistance. However, this page does not provide a button to reject or approve the submission, and does not display the status of the submission, making it difficult for users to take action and monitor submissions that need to be processed.
😊 In the process of redesigning the sales report page, we improved the readability and comprehension of the data by presenting the information more clearly and intuitively. In the ' Sales Products' section, the pie chart is replaced or combined with a list of product information with each percentage of sales from highest to lowest. In addition, the salesman stock view is updated by adding detailed information such as current stock quantity, and sales quantity with clearer visualization, such as color indicators to differentiate stock status. With these changes, users can quickly understand the sales report without the need for extra effort in interpreting the data.
We added clear action buttons to approve or reject submissions, making it easier for users to make decisions. In addition, the status of the application is now displayed with informative visual indicators, such as the color or status label Approved or Rejected, so that users can quickly understand the progress of the application.
Substitute & Access Request
😔 This page displays the user's history as a Team Leader who has taken over salesman jobs. The information on each card is quite informative, but needs visual improvement to make it look neater and more comfortable to look at.
Meanwhile, on the Access Request page, there is an approval feature for salesmen to get additional access to some of the needs and visit features in the Pluto Salesman application. The organization of information on this page can be improved to make it clearer and easier for users to understand.
😊 In the process of redesigning the user history page as a Team Leader, we improved the visual appearance of the card to make it more neat and comfortable to look at. Improvements include more optimal use of white space, adjustment of font size to improve readability, and clearer use of colors and icons to distinguish each type of information.
On the Access Request page, the information structure was improved to be more intuitive, with a more systematic arrangement of elements. Approval status indicators were added using color labels or icons so that users can easily see the status of access requests. In addition, the design of the action buttons was clarified to facilitate the process of approving or rejecting access requests by the Team Leader. With these changes, the user experience becomes more efficient and easy to understand.
Customer Report
😔 The customer page in this feature is divided into three categories: orders, returns, and receivables. However, the list of outlets is only organized by the highest sales volume. Also, each outlet is clickable without the need for additional arrow keys, but the organization of information in the detail view is less than optimal. Once an outlet is clicked, important elements are placed below the image in a single line, making it uncomfortable to look at and difficult to access quickly. The layout needs to be improved to make it more structured.
The purchasing section also has limitations, as it only displays information on the purchase of goods from salesmen without additional details that can help users get a more comprehensive picture of the outlet's transaction activities.
😊 In the process of redesigning the customer page, we added filter and search options to make it easier for users to find outlets based on various criteria, not only based on the highest sales volume.
The outlet detail view was improved by organizing the information in a more structured manner. Important elements are now placed in more strategic positions to improve readability, as well as using a more responsive layout with clear visual separation between information categories.
In addition, the purchasing section was expanded to show transaction data on purchases, sales, and outlet activities. With these changes, the UI has become more intuitive, informative, and accessible to users.
Conclusion
During the redesign process, we identified various weaknesses in the app's UI that impacted the user experience. Some of the key issues included a sub-optimal layout, unclear information, and interactions that were not fully intuitive. Therefore, we conducted a comprehensive overhaul to improve the readability, functionality, and efficiency of the app.
Some of the key improvements made include:
White Space & Layout Optimization → Elements that were previously too tightly packed together now have more proportional space to make the display more pleasing to the eye and less claustrophobic.
Clearer Information Organization → Data that was previously difficult to understand is now displayed with a neater structure, including better use of visual hierarchy.
Improved Navigation & Interaction → Navigation menus are redesigned with clearer icons and labels, and more accessible action buttons.
More Informative Data Visualization → Diagrams and graphs are updated to be easier for users to read and interpret.
Improved Approval & Access Request Feature → The approval and access request process is now more transparent with clearer status indicators.
With these changes, the application becomes more user-friendly, efficient, and supports a better user experience in accessing information and performing their tasks more easily.
