PosAja Revamp
Kelas Laut UI Bootcamp Project
Design System
User Interface
Pos Indonesia is the largest and the oldest Indonesian postal service. Pos Indonesia have a digital transformation mission to modernize their service, one of their product is PosAja. The aim of this project is to modernize and cluttering the user interface and improving the UX of PosAja Apps.
2023 - Kelas Laut Insan Desain
Project Details
Let’s dive deep into the process
The Objective
Updating the User Interface
Create a more clean visual interface that also can be appealing to younger generations
Decluttering the Dashboard
Create a dashboard with clear information and context for user to navigate and use the apps.
Improving the User Experience
Improving drop-off delivery feature experience. Not going to simplify it, but make sure that users can easily reach their goals
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg"><path d="M 8 0 C 12.418 0 16 3.582 16 8 C 16 12.418 12.418 16 8 16 C 3.582 16 0 12.418 0 8 C 0 3.582 3.582 0 8 0 Z M 7.5 1.077 C 6.83 1.281 6.165 1.897 5.613 2.932 C 5.431 3.276 5.275 3.633 5.145 4 L 7.5 4 Z M 4.09 4 C 4.257 3.469 4.471 2.954 4.73 2.461 C 4.904 2.135 5.104 1.823 5.327 1.528 C 4.088 2.042 3.022 2.9 2.255 4 Z M 3.508 7.5 C 3.538 6.623 3.646 5.782 3.82 5 L 1.674 5 C 1.302 5.785 1.08 6.633 1.018 7.5 Z M 4.847 5 C 4.65 5.82 4.537 6.657 4.509 7.5 L 7.5 7.5 L 7.5 5 Z M 8.5 5 L 8.5 7.5 L 11.49 7.5 C 11.462 6.657 11.349 5.82 11.153 5 Z M 4.51 8.5 C 4.538 9.343 4.651 10.18 4.847 11 L 7.5 11 L 7.5 8.5 Z M 8.5 8.5 L 8.5 11 L 11.153 11 C 11.34 10.235 11.459 9.392 11.491 8.5 Z M 5.145 12 C 5.284 12.387 5.44 12.743 5.613 13.068 C 6.165 14.103 6.831 14.718 7.5 14.923 L 7.5 12 Z M 4.73 13.539 C 4.471 13.046 4.257 12.531 4.09 12 L 2.255 12 C 3.021 13.101 4.087 13.959 5.327 14.472 C 5.104 14.177 4.904 13.865 4.73 13.539 Z M 3.82 11 C 3.639 10.178 3.535 9.341 3.508 8.5 L 1.018 8.5 C 1.08 9.39 1.309 10.233 1.674 11 Z M 13.745 12 L 11.91 12 C 11.743 12.531 11.529 13.046 11.27 13.539 C 11.096 13.865 10.896 14.177 10.673 14.472 C 11.913 13.959 12.979 13.101 13.745 12 Z M 8.5 12 L 8.5 14.923 C 9.17 14.719 9.835 14.103 10.387 13.068 C 10.56 12.743 10.716 12.387 10.855 12 Z M 14.326 11 C 14.691 10.233 14.92 9.39 14.982 8.5 L 12.492 8.5 C 12.465 9.341 12.361 10.178 12.18 11 Z M 14.982 7.5 C 14.92 6.633 14.698 5.785 14.326 5 L 12.18 5 C 12.354 5.782 12.462 6.623 12.492 7.5 Z M 11.91 4 L 13.745 4 C 12.979 2.899 11.913 2.041 10.673 1.528 C 10.891 1.812 11.091 2.126 11.27 2.461 C 11.517 2.925 11.732 3.441 11.91 4 Z M 10.855 4 C 10.725 3.633 10.569 3.276 10.387 2.932 C 9.835 1.897 9.17 1.282 8.5 1.077 L 8.5 4 Z" fill="rgb(0, 0, 0)" height="16px" id="oyy3Lznuf" transform="translate(7 4)" width="16px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg"><g d="M 2.667 16 C 1.194 16 0 14.806 0 13.333 L 0 2.667 C 0 1.194 1.194 0 2.667 0 L 17.333 0 C 18.806 0 20 1.194 20 2.667 L 20 13.333 C 20 14.806 18.806 16 17.333 16 Z M 2.689 0 L 2.622 0 C 1.323 0.001 0.214 0.941 0 2.223 L 17.221 16 L 17.289 16 C 18.588 15.999 19.696 15.059 19.911 13.777 Z M 14.242 9.965 L 12.575 9.965 L 19.198 15.263 C 19.456 15.027 19.667 14.745 19.817 14.425 L 14.242 9.964 Z M 0.333 1.504 L 5.909 5.965 L 7.575 5.965 L 0.953 0.667 C 0.693 0.903 0.483 1.187 0.333 1.505 Z M 2.622 16 L 2.689 16 L 19.911 2.223 C 19.697 0.941 18.588 0.001 17.289 0 L 17.221 0 L 0 13.777 C 0.214 15.059 1.322 15.999 2.622 16 Z M 8 0 L 12 0 L 12 16 L 8 16 Z M 0 6 L 20 6 L 20 10 L 0 10 Z M 8.667 0 L 11.333 0 L 11.333 16 L 8.667 16 Z M 20 6.527 L 20 9.193 L 0 9.193 L 0 6.527 Z M 18.148 0 L 12 4.917 L 12 5.86 L 12.5 5.86 L 19.129 0.567 C 18.846 0.309 18.512 0.116 18.148 0 Z M 0.885 15.165 C 1.164 15.416 1.493 15.605 1.85 15.719 L 8 10.799 L 8 9.861 L 7.5 9.861 Z M 17.333 0 L 2.667 0 C 1.194 0 0 1.194 0 2.667 L 0 13.333 C 0 14.806 1.194 16 2.667 16 L 17.333 16 C 18.806 16 20 14.806 20 13.333 L 20 2.667 C 20 1.194 18.806 0 17.333 0 Z M 19.333 13.333 C 19.333 14.436 18.436 15.333 17.333 15.333 L 2.667 15.333 C 1.564 15.333 0.667 14.436 0.667 13.333 L 0.667 2.667 C 0.667 1.564 1.564 0.667 2.667 0.667 L 17.333 0.667 C 18.436 0.667 19.333 1.564 19.333 2.667 Z M 17.333 0.667 L 2.667 0.667 C 1.562 0.667 0.667 1.562 0.667 2.667 L 0.667 3.333 C 0.667 2.229 1.562 1.333 2.667 1.333 L 17.333 1.333 C 18.438 1.333 19.333 2.229 19.333 3.333 L 19.333 2.667 C 19.333 1.562 18.438 0.667 17.333 0.667 Z" fill="transparent" height="16px" id="FYFRs961h" transform="translate(5 4)" width="20px"><path d="M 2.667 16 C 1.194 16 0 14.806 0 13.333 L 0 2.667 C 0 1.194 1.194 0 2.667 0 L 17.333 0 C 18.806 0 20 1.194 20 2.667 L 20 13.333 C 20 14.806 18.806 16 17.333 16 Z" fill="rgb(7, 27, 101)" height="16px" id="W2htUK4XV" width="20px"/><path d="M 2.689 0 L 2.622 0 C 1.323 0.001 0.214 0.941 0 2.223 L 17.221 16 L 17.289 16 C 18.588 15.999 19.696 15.059 19.911 13.777 Z" fill="rgb(255, 255, 255)" height="16px" id="hAoo51jH3" width="19.910666666666657px"/><path d="M 13.909 9.298 L 12.242 9.298 L 18.865 14.596 C 19.123 14.361 19.334 14.078 19.484 13.758 L 13.909 9.297 Z M 0 0.837 L 5.575 5.298 L 7.242 5.298 L 0.619 0 C 0.36 0.236 0.149 0.521 0 0.838 Z" fill="rgb(185, 41, 50)" height="14.59599943033868px" id="Sks9PCWKk" transform="translate(0.333 0.667)" width="19.483998672485313px"/><path d="M 2.622 16 L 2.689 16 L 19.911 2.223 C 19.697 0.941 18.588 0.001 17.289 0 L 17.221 0 L 0 13.777 C 0.214 15.059 1.322 15.999 2.622 16 Z" fill="rgb(255, 255, 255)" height="16px" id="zhKL7uQOd" width="19.910666666666657px"/><path d="M 0 0 L 4 0 L 4 16 L 0 16 Z" fill="rgb(255, 255, 255)" height="16px" id="bWO9M0Iw1" transform="translate(8 0)" width="4px"/><path d="M 0 0 L 20 0 L 20 4 L 0 4 Z" fill="rgb(255, 255, 255)" height="4px" id="MNuCFhq5H" transform="translate(0 6)" width="20px"/><path d="M 0 0 L 2.667 0 L 2.667 16 L 0 16 Z" fill="rgb(185, 41, 50)" height="16px" id="gzQbsCWxx" transform="translate(8.667 0)" width="2.666666666666515px"/><path d="M 20 6.527 L 20 9.193 L 0 9.193 L 0 6.527 Z M 18.148 0 L 12 4.917 L 12 5.86 L 12.5 5.86 L 19.129 0.567 C 18.846 0.309 18.512 0.116 18.148 0 Z M 0.885 15.165 C 1.164 15.416 1.493 15.605 1.85 15.719 L 8 10.799 L 8 9.861 L 7.5 9.861 Z" fill="rgb(185, 41, 50)" height="15.719332941691164px" id="zcT3_4Ezr" width="20px"/><g opacity="0.15"><path d="M 17.333 0 L 2.667 0 C 1.194 0 0 1.194 0 2.667 L 0 13.333 C 0 14.806 1.194 16 2.667 16 L 17.333 16 C 18.806 16 20 14.806 20 13.333 L 20 2.667 C 20 1.194 18.806 0 17.333 0 Z M 19.333 13.333 C 19.333 14.436 18.436 15.333 17.333 15.333 L 2.667 15.333 C 1.564 15.333 0.667 14.436 0.667 13.333 L 0.667 2.667 C 0.667 1.564 1.564 0.667 2.667 0.667 L 17.333 0.667 C 18.436 0.667 19.333 1.564 19.333 2.667 Z" fill="rgb(0, 0, 0)" height="16px" id="seKm_K8ca" width="20px"/></g><g opacity="0.2"><path d="M 16.667 0 L 2 0 C 0.895 0 0 0.895 0 2 L 0 2.667 C 0 1.562 0.895 0.667 2 0.667 L 16.667 0.667 C 17.771 0.667 18.667 1.562 18.667 2.667 L 18.667 2 C 18.667 0.895 17.771 0 16.667 0 Z" fill="rgb(255, 255, 255)" height="2.666666666666657px" id="qc34dkwNZ" transform="translate(0.667 0.667)" width="18.666666666666657px"/></g></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg"><path d="M 0.147 0.147 C 0.241 0.053 0.368 0 0.501 0 C 0.634 0 0.761 0.053 0.855 0.147 L 6.501 5.794 L 12.147 0.147 C 12.342 -0.049 12.659 -0.049 12.855 0.147 C 13.05 0.342 13.05 0.659 12.855 0.855 L 6.855 6.855 C 6.761 6.949 6.634 7.002 6.501 7.002 C 6.368 7.002 6.241 6.949 6.147 6.855 L 0.147 0.855 C 0.053 0.761 0 0.634 0 0.501 C 0 0.368 0.053 0.241 0.147 0.147" fill="rgb(0, 0, 0)" height="7.001787567370684px" id="ieYreU20B" stroke-dasharray="0" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="2" stroke="rgb(0, 0, 0)" transform="translate(8 8)" width="13.0015253847655px"/></svg>)