Track and Trace -
Thailand Post Redesign
Overview
A redesign of the Track and Trace feature on Thailand Post's website. Re-organized for a more seamless tracking experience and cleaner visuals.
Details
Duration: 2 Weeks
Tools: Figma, FigJam
Role: UX Researcher, UX Designer, UI Designer
Background
​Thailand Post is a government-owned postal service that has been in operation for over 140 years. Recently, after a two-year period where they lost a lot of profit, the usage of Thailand Post grew again with the rise of online businesses. With this comes the need for sellers and customers to access package details and track their locations. However, Thailand Post’s website is very outdated, and the user experience provided can be improved greatly.
Problem
-
The website is outdated
-
Users often has problems entering tracking numbers
-
Information could be better organized
Goal
-
Give the website a more up to date look
-
Allow users to input tracking number and browse through the information they need seamlessly.
Empathize
User Interviews
Research Goals
-
How often does an average user access Thailand Post’s Track and Trace feature?
-
Which devices do users usually access this website form
-
The difference between the needs of users as sender vs. recipients
Research findings
I did a quick research with 5 users on their usage of this feature of Thailand Post’s website. All participants said that the experience could be improved greatly.
All users have used this feature exclusively on their mobile devices, to track their online purchases.
2 out of 5 participants usually track more than one order at once, but find that manually adding commas and spaces between tracking numbers very frustrating.
3 out of 5 participants have used the Track and Trace features regularly as both senders and recipients. All 3 reveals that, as senders, they do not track the packages unless there is a problem.
Current Issues
1. Outdated design and poor hierarchical organization
The web page with a very simple and straightforward function is cluttered with many unnecessary text and unrelated details.
2. False errors
Search results come up as "information not found, please search again" when users forget to check "verify you are human"
3. Results are hard to access
On the mobile version, when more than one tracking numbers are looked up, the results are expanded in a long list, making it hard to reach the later items.
4. Non-responsive search box
When entering multiple tracking numbers, the input box does not expand to accommodate the amount of information.
Persona
With the findings from the interviews, I decided to narrow down the target group to recipients, as they are statistically much more likely to use this feature and check on the status of their packages.
Competitive Analysis
In recent years there has been a rise of postal service companies that compete with Thailand Post. As those companies are quite new, their websites and mobile applications are more up-to-date and easy to understand. I have chosen two recent common brands and looked through their tracking features carefully.
Input: There are two main ways that the input bar has been set up. In Thailand Post and Kerry's current website, users can enter up to 10 and 30 tracking numbers, respectively. While for SPX Express, users can only look for one tracking number at a time.
Output: Kerry's output system is very simple, organized, and easy to process at a glance. Condensing important details into boxes, allow users to see multiple results at once.
Define
How Might We
How might we improve the current website and allow users track their parcels as conveniently as possible?
Key Improvements
Input (Tracking Number)
-
Eliminate complications when entering multiple tracking numbers
-
Add clear error messages when tracking numbers entered do not match the correct format
Output (package Details)
-
re-organize information in a way that multiple order statuses can be seen at once
-
make sure all items on the list are easily accessible
-
Highlight the most recent status on the timeline
Wireframe
I have applied the improvements needed to the first wireframes as follows:
1. Individual input boxes when entering multiple tracking numbers
2. Results are shown in a compact box with important details
3. Details are re-organized with a clear hierarchy
I also experimented with a tab layout, where users can switch between items to see full details. Upon further testing, this idea was discarded, as users prefer the common box style.
Design
For the user interface design, Thailand Post already has a strong identity with the colors red, white, and blue. However, the design system of their website is very inconsistent. Some parts of the websites look much more modern and easy to navigate, while some important pages - such as the home page and tracking are still very outdated.
Design System
At the same time, Thailand Post also has their own mobile application, where the “Track and Trace” feature is much more well designed than the website counterpart, with a more organized layout and nicely illustrated icons. So I decided to borrow and adapt existing elements to apply to my redesign in order to give the website a fresh look while also respecting the existing identity.
Typography
Color Palette
Components
User Interface
Desktop
Mobile
Prototype
Reflection
Starting out, this seemed like a very simple and straightforward project. However, as I went through the interview and ideation process, I realized there is more and more to consider. Because it is simple, every component has to be thought out carefully to ensure the best possible experience.
​
I also learned that I should have approached the prototyping and design process in a different way. Because most users access this website via their mobile devices, it would be more efficient to use the progressive enhancement approach, and start working on the mobile wireframe and design first, then adapt it onto the bigger screen later.