Overview
In this student project, my teammates and I set out to improve the user experience of Poste Italiana's mobile app. The project involved conducting a usability analysis, testing information hierarchy, and ideating and prototyping a final version of the redesigned app. Our goal was to create a more intuitive and user-friendly app that would provide a better experience for Poste Italiana's customers. Throughout this case study, I will discuss our decision-making process and detail the final solutions we implemented.
Expertise
UX Research, UI Design
Platforms
Android
Year
2022
Duration
1.5 month
Software used
Figma
See it live
TL;DR
The main outcome of this case study is the redesign of Poste Italiana's mobile app. Based on usability analysis and testing, several key improvements were made, including an enhanced search field with features such as paste, scan, recent searches, and previews. Users were also given the ability to prioritize selected menu items or stick to sensible defaults. Additionally, the interface was simplified and moved down to reduce clutter and follow industry standards. Continue reading to see the full process.
Contextual Search
Improved search box with features like paste, scan, recent searches, previews + more
Customisation
Users could prioritise selected menu items or stick to sensible defaults.
Accessibility
Light and dark mode, material-based design system, sufficient font sizes, contrast/readable colour scheme and more
Navigation
Simplified, customisable and easy to understand
About The Client
Poste Italiane is Italy's national postal operator, offering a range of services including mail, courier, finance, insurance and banking. During the redesign process, it was important to maintain Poste Italiane's brand identity while improving the overall user experience and making the app structure more manageable for the numerous services it offers.
Financial services
Poste Italiane is also a leader in the payment and mobile sectors and offers financial and insurance services throughout Italy.
Numerous touchpoints
Their services have multiple touch points, including physical locations with human staff, totem kiosks, their website and mobile app, providing a range of options for accessing their services.
Website & App
Poste's user base is constantly growing as more of its services become digitised, with the company now offering both a website and app.
State of digitalization
Poste envisions a sustainable digital future and wants to be a pioneer in providing digital access to everyone.
Process
The following section will dissect the individual steps of the redesign process. First, we needed to define the approach to redesign the entire application, which included redefining the Information Architecture and general flow of the app. We created rough wireframes to capture some outliers that we didn’t think about in the IA, which we validated with testing. Once the wireframes and IA were finalized, we moved on to look and feel and explored two visual versions. The final step was prototyping, where we validated the final design.
methodology visualisation
Heuristic Analysis
The interface of the existing website and app were analysed to identify areas for improvement and redesign. The analysis focused on identifying usability issues based on established design principles. This was done to improve the user experience and ensure that the interface was easy to use and understand.
Key Insights
The graph provides a summary of the heuristics that were violated during the usability analysis, including the frequency of the violations and the related problem clusters for each heuristic. It offers a visual representation of the most common issues and areas for improvement in the original Poste Italiane app and website. Four main problems were identified based on the heuristic evaluation, and appropriate solutions were planned to address them.
heuristic evaluation syntheesized
1.
Problem: Desired actions are nested and hard to locate. Solution: Present most relevant actions, prioritized. Let people set their favorites.
2.
Problem: Inconsistencies in the interface. Solution: Standardize interface elements and stick to the design system.
3.
Problem: Overflow of information on certain screens. Solution: Identify the information required by the user and prioritize it. Improve information architecture (IA) by restructuring the app's content and using insights from testing to ensure the most relevant information is presented to users.
4.
Problem: Complex tasks lack guidance and assistance for the user. Solution: Implement a step-by-step guidance approach and add interactive helpers to improve the user's experience and understanding of the task at hand.
Users Tests
The following graphs analysed the existing user flows inside the app and tracked users' frustrations. Our team decided to focus on both novice and experienced users, particularly those who are using the Poste Italiane (PT) application for the first time, such as foreigners who require PT's services for documentation purposes like residence permits and health insurance. We also included a regular user to understand any issues that may arise over time. We chose the most significant tasks based on user feedback, prioritizing users' needs to stay connected with the PT application and website.
Comparative benchmarking
In this section, a comparative benchmarking analysis has been conducted between Poste Italiane and its competitor Swiss Post. The focus was to identify areas where Swiss Post's app performed better than Poste Italiane's app, particularly in the homepage, navigation, and send screen - which is one of the primary functions of a postal service.
Swiss Post app is easier to understand at a glance than PT.
Clear visual categories help users to navigate easily.
The app has big buttons for accessibility and ease of use.
Meanings of the buttons are straightforward and clear, unlike Poste Italiane's app, where users struggle to understand the buttons.
All important postal services are accessible immediately when the user opens the Swiss Post app.
Fewer functions available through the Swiss Post menu, improving utility.
Only less frequently used features of the app are hidden here, reducing clutter.
The login button is very visible and easy to identify.
Due to the limited number of links, the menu is not scrollable, making it easy to read.
Links with subcategories are quickly recognized because of the arrow next to them.
Fewer functions available through the Swiss Post menu, improving utility.
Only less frequently used features of the app are hidden here, reducing clutter.
The login button is very visible and easy to identify.
Due to the limited number of links, the menu is not scrollable, making it easy to read.
Links with subcategories are quickly recognized because of the arrow next to them.
Defining information architecture
Defining the Information Architecture was a crucial step in improving the Poste Italiane application. The existing architecture was complex and over-nested, making it challenging for users to locate the desired functionalities. The Open Card Sorting method allowed us to simplify the categorization process, and we understood the importance of customization. The Closed Card Sorting method helped us filter out the most important functionalities and rename them to more recognizable navigation elements. Finally, the Tree Testing method solidified our choices and helped us with Reorganization and Classification of the app's features.
Final Information Architecture
After conducting the tree testing and analyzing the results, we were able to finalize the information architecture by limiting the top-level categories visible in the menu. This helped to declutter the interface and make the information architecture more easily understandable at first glance. However, we also identified numerous other areas for improvement, including renaming of categories and restructuring their order, which we were able to implement based on the insights gained from the testing.
redesigned information architecture
Ideation
During the ideation phase, we collaborated to create the layout of the app, using the Crazy 8 exercise to generate a variety of ideas quickly. This exercise allowed us to compare, combine, and refine these ideas in order to identify those that overlapped most closely with our research and user needs. The goal was to develop a layout that was both visually appealing and user-friendly, while also effectively conveying the app's functionality and features.
Wireframing
In order to design an effective solution, it was important to understand the needs and pain points of electric skateboard riders. To gather this information, I conducted user interviews, tests and competitor analysis. The results of this research provided valuable insights into riders’ expectations.
Wireframe testing
During the wireframe testing for the Poste Italiane redesign, several tasks were tested, including tracking shipments, booking appointments, paying bills, checking post office hours, and switching to dark mode. Tabs were found to be more successful for users than carousel navigation. Users struggled to find the bills section and the tracking number field for parcel tracking. The appointment booking process also needed to be streamlined. By making changes to the wireframes based on these findings, the user flow became more streamlined from the first to the second round of testing.
Locating offices
Tracking shipment
Adding new parcel
Bill payments
103 components, 478 styles
For our design system, we decided to go with Google's Material UI. We chose this system because it has a reputation for being safe and user-friendly, and it was a good fit for designing natively on Android. Although Poste Italiana had its own design system that its users were already familiar with, we chose not to use it because we wanted to ensure that our design was accessible and user-friendly for all users. Unfortunately, when we reached out to Poste Italiana, we were informed that they did not have an official design system in place. By using Material UI, we were able to create a consistent and cohesive design that was easy for users to navigate and understand.
checkbox
switch
button
input field
chip
chip
dropdown
Final improvements
In order to create the high-fidelity prototype, we focused on four main areas: standardization, assistance, prioritization, and communication. Our goal was to make it easier for users to navigate and achieve their goals through the application by designing features that were already tested. To accomplish this, we used Google's Material Design guidelines, which have been developed after years of research and expert work, and incorporated Poste Italiana's identity into the design system.
Onboarding
The onboarding process into the new version now allows users to customize their navigation experience. Adding a new package is now much easier and intuitive with the redesigned package creation flow. Users can also check the status and details of their packages with ease. These elements were designed with the user in mind, streamlining the experience and making the application more user-friendly.
adding new package
onboarding into the new version
package status and it's details
booking an appointment
Appointments
The appointment booking process has been improved in two significant ways. Firstly, booking is now contextual and shows up right in the package details, which allows users to schedule an appointment without having to navigate through several different screens. This makes the process much more efficient and streamlined. Secondly, the map has been redesigned, and it's now much easier to find available offices. This redesign makes it easy to filter and find the office that's closest to you, and it also provides information about the available services and amenities. Overall, these improvements make it easier for users to book appointments and find the office that best suits their needs.
map of Poste's locations
Navigation and more
We made several improvements to the app, including simplifying navigation and making it customizable. Search has more functions, and dark mode makes the app accessible at night. Additionally, widgets provide quick entry points to the app, and stamp collectors can showcase their collections. Contextual booking shows up in package details, and finding available offices on the redesigned map is easier.
navigation
widgets
multifunctional, contextual search field
dark mode
Summary
Once our prototype was completed, we tested it with five users and recorded their feedback. We identified four minor issues during this round of testing, which was a testament to the strength of our user-centric design approach. These issues have been addressed in the high-fidelity prototype, which you can find a link to in the report.
The Poste Italiana case study showcases the design process behind the development of a new mobile app for package tracking and delivery management. The team used a user-centered approach, with multiple rounds of user testing and feedback incorporated into the design. The team chose to use Google's Material UI for the design system, focusing on standardization, assistance, prioritization, and communication. The team also made improvements to the appointment booking process and navigation, making it more contextual, customizable, and intuitive. Additionally, the app features search functionality, a dark mode, and widgets for quick access to the app's features.
