Navigation
Often, trains would have up to 12 or even more coaches. This horizontal scrolling train acts as a navigator for the seat map, allowing business travellers to quickly and easily jump between sections of the train without having to manually scroll through every coach.
Travellers can still navigate by scrolling vertically on the seatmap. As users scroll through the seat map, each coach icon would be highlighted, indicating where users are within the length of the train.
Seat Selection
Tap any available seat icon and it will be highlighted to reassure users they’ve selected their desired seat. Additionally, the pull-up sheet will display information of the chosen seat, including coach number, seat number and seat amenities.
User Testing
Working collaboratively with the UX research team at SAP Concur, I created a list of tasks and questionnaires that I thought would best evaluate our new designs. The goal of this study was to understand user behaviour, how well our design fits into our users' mental model, and the usability of our new designs.
Using prototypes created with inVision, we conducted 16 interviews, 8 on mobile, and 8 on desktop, through Validately.
Using prototypes created with inVision, we conducted 16 interviews, 8 on mobile, and 8 on desktop, through Validately.
8 Mobile Participants
8 Desktop Participants
Once the interviews were complete, an affinity mapping excercise was conducted in order to document and synthesize our findings. To better communicate the results to the rest of the design team, I created a consolidated MURAL to highlight notable insights, quotes and actionable next steps for the design.
The result of this usability test showed us that the design was largely well received as many were able to navigate through the interface with little to no difficulty. However, it was without it's frictions. One participant in particular mentioned that they would rather have everything smaller on screen, so that more information could be seen at a glance. I found this to be intersting because it showed the desire for an information heavy seatmap. However, knowing that simply populating the screen with more informatino would inpair usability, I reframed this insight from trying to understand "How much needed to be on screen" to "What information is vital at first glance when selecting a seat?"
Re-Visiting Seat Selection
While my term at SAP Concur ended, I was often still thinking about this seat map design and where it could still improve for better usability. One area that I felt could be improved was in the legend and displaying seat amenities.
Rather than having the legend be hidden in the pull up sheet, I replaced the “save” button with a question mark icon.
Tapping on this icon would reveal an overlay, showing a complete legend of the icons used in the interface to better onboard new rail travellers.
Reusing a pattern from the design system, I moved the CTA to the bottom, where the "save" button would be shown once a seat was selected.
The amenities was now shown once users swiped up on the action sheet, revealing the amenities in both text and icon to better communicate what amenities were available with each seat.
