Improving Multiple Trip Booking Feature
Home Assignment from Flixbus
--
First of all, I went beyond the task a little and tried to improve the current visual design too. Because redesigning or even just reproducing the same design is really helpful to understand the dynamics of the interface. So, I thought it would help me in the actual task too. But, I didn’t prefer to do a full redesign as my time is limited and also, usually this kind of approach is not healthy for a couple of reasons. So, I just tried to improve the visual design without changing things a lot.
Secondly, my designs usually improve a lot when I try them on-hand. So, I did a very high-fidelity prototype. It helped me to fine-tune many details on the way. I think I wouldn’t see these details if I just made a click-based prototype.
I spent around three full-time days on this project. You can download all of the design files and prototype videos from this link in better quality.
The Prototype
There are two videos of the prototype. First one is an on-hand video to show the real experience and the second one is a screen-capture video to show the details more clearly. You can download the second video in a better quality from the Dropbox link I gave before.
It’s a Framer prototype, so you can try it yourself on any device with the link below. For the best experience, please use Safari browser on a computer or an iOS device (iPhone 8 size or bigger) for on-hand. There might be a couple of bugs as it’s not a fully complete prototype, for example sometimes you might need to tap on things twice.
Ideas on the Flaws and What to Improve
Normally, it’s needed to iterate on the design by testing for a couple of times to ideate. It would be good to have user data and do some user research to base the ideas on. But as I didn’t have time or resource for these, this design should be considered as an early concept.
The Cart Panel
The first problem with the cart design (collapsed state) is that the next button stays very close to the drag handle ( — ). This might prevent users to use the dragging gesture. Also, they might not realize that the panel can be opened and closed with the button on the left too, so they wouldn’t be able to open the cart panel at all. But, I think this possibility is very small. Still, it would be better to test it of course.
To fix the second possibility, an arrow could be used to indicate that the panel is openable — like in the original design. I tried this in the initial version. But it takes additional space from both sides (to keep the design symmetric), and I didn’t want to do it, because in a smaller screen and a language with a long translation of “next”, the space left for the next button might not be enough. Again, it could be tested if putting an arrow or something else makes a significant difference or not.
One design alternative for the first problem (next button is too close to the handle) could be putting the next button on the right side. I didn’t want to go with this because I think it might reduce the prominence of the “add another trip button” as it would be located in the middle of other two elements and looks very similar to the cart button. Applying different styles to each element to make them stand out might damage the design and the clear look.
My second concern with the cart design is the “add another trip icon”. I wonder if users would understand it or not. When the cart panel extends, the label of the button shows up and the button becomes clear, but I’m not sure if users generally prefer to open the cart before proceeding or not. So users might be skipping the opportunity of seeing it. Maybe the button could be improved by making the icon more detailed or putting additional indicators around it.
Add Another Trip Panel
I think a faster transition from cart panel to add another trip panel could be tested. For example, sliding or changing the panel content inside could be used instead of closing one panel and opening the other one.
Conclusion
I tried to come up with simple (probably very obvious) design solution. I think it could be improved a lot more, or there might be better ways. Of course, more time, user data and testing would bring a better result.
