Embedded Files
A refresh of the reservation travel cards in the booking file.
A refresh of the reservation travel cards in the booking file.
Role: Designer
Duration: 1 month sprint
Problem overview
Problem overview
After the rebrand of Smartpoint Cloud, parts of the app no longer matched the new design. One key issue was the travel cards, a high-traffic area of the app. Users reported that the cards often showed wrong or unnecessary information. They also had technical problems due to outdated components and data sources.
Refreshing the travel cards became a priority. The goal was to fix technical issues, update the design to match the new Atlas system, and ensure the cards only showed the relevant information users needed.
Solution
Solution
In the reservation section of the booking file, the cards were redesigned to align with the updated Atlas design system. These updates resolved technical issues, enhanced usability, and ensured a more consistent and intuitive user experience.
Old design and its Problems
Old design and its Problems
User feedback
User feedback
User feedback and other factors, such as an app-wide rebrand and technical errors, forced us to redesign and refresh the booked travel cards.
User feedback:
Cards are hard to scan/read
Missing information
Users unaware of links and icons on cards
Users were unaware of the type of booking at a glance (Flight vs Hotel vs Car etc.)
Color and contrast accessibility issues
Technical errors:
Not responsive, currencies with more digits "break" the price sticker
Missing information or information displayed incorrectly
Current design
Current design
The new design aimed to fix the problems with the old cards.
Improved scan-ability and readability
The price was moved to the bottom where it had room to grow and be responsive to various currencies
Flight numbers, a crucial missing piece of information, were added to the card
The journey layout was condensed into a single line, and based on a familiar format to users
An indicator was added so users could easily identify the type of booking without needing to read the card
Lozenges were added to make crucial information stand out.
Most links and icons were removed
Cards were aligned to the rest of the app and the booking file
Interactive states were defined and aligned across all cards
Impact
Impact
Improved usability
Cards are easier to read and scan
Only displaying the most important information
Visual indicators of the status of the booking
Improved accessibility
Cards contain less, therefore are easier to read
Cards are structured in a way that follows a hierachy of most important information first, according to user feedback. Therefore are more easily read by a screen reader
Feedback and next steps
Feedback and next steps
Negative feedback related to the booking cards and the booking file have both dropped, improving customer satisfaction scores. Further minor design improvements are planned.
Lessons learned
Lessons learned
We are still relying on older APIs and data to populate the travel cards meaning that certain bookings (multiple leg flights) cannot be displayed correctly. We should have addressed this issue first, or during the redesign on the back end so all data could be displayed.
Page updated
Google Sites
Report abuse