Task
Please describe the journey map on Bobobox Mobile App Booking Process Flow and present any improvement ideas on what could solve existing problems or be done better and also present your proposed design based on your solutions.
User Journey Map
UI Analysis and Redesign
Mini Demo : link
Open Application & Register
Welcoming Screen
Current design
In the current application, there is only a splash screen applied. After a splash screen, it directs users to a login screen.
To improve the experience for users, adding an additional screen which has user can choose to log in or continue as a guest.
Redesign
Adding a screen for the user to choose if they want to log in or continue as a guest.
Because bobobox mobile application is still part of a booking application, to engage more user to use this application it will be more effective to give this choice for the users.
The user tends to want to see the room and service detail first. If the user requires to login first to use the application, usually they just quit and find a different application.
Login and Register Screen
Current design
The current UI for login and register a lack of simplicity for users. There is a small button to change the login/register option and this makes it quite hard for some user because the spacing between the text button and the input field is narrow.
For the button and a text below have the same issue with spacing. It’s too near that user can by mistake click the button to switch between register and log in.
Another issue is the usage of white space, to improve this problem giving a new login/register option is a good additional for user to use.
Redesign
This redesign UI has added some additional UI elements like a title and subtitle to give a warm welcome for users.
Improving the switch tab for login/register option, with giving an indicator for the current option it improves the information more.
Adding a new option to login/register using google account. By integrating this feature will give users more option and easy access to just click a button, without filling the input field.
Fixing the white spacing and maximize the screen.
Explore Application
Home Screen
Current design
In the current design, there is an issue with the title that overlaps the status bar.
The CTA for searching a pod is not quite engaging for the user.
The inconsistency of language use, in the announcement the title use English and the description is in Bahasa Indonesia.
Our pod section should be an important piece of information, this section can be placed beneath the search pod content.
The way to present “Our Pods” is not quite effective, user need to scroll to search the pod area, this section can be improved by creating each area category.
Redesign
To fix the title issue, placing it in the left side and adding a subtitle with a leading question, creates a more friendly approach for the user. This is part of UX writing where the application tries to be more friendly and approachable.
Redesigning the search pod content, by adding icons to represent and inform the user about the fields. Improving the CTA from “Search” to “Find a pod”. A CTA is important to give information for users that indicate the button purpose. Because their main activity in this section is to find a pod, giving the CTA “Find a pod” feels more clear.
Adding a language toggle at the header gives the user an option to choose what language they want. By giving this feature the application will have a consistency language use.
Our pod section has been redesign to icon button and navigates in each section.
Pod Details
Current design
To access the screen users need to scroll and find each Bobobox Pods.
In this screen, it only contains pods information and descriptions.
The is lack of CTA to engage user, adding a CTA for booking function a pod they look to is a great addition.
Redesign
By improving the use of “Our Pod” section in the home screen, now user can navigate to each pod area. For example in this UI base on Bandung pod area, user can tap or swipe to each pod in Bandung and see the information and descriptions.
Adding an icon for the map, this will increase user visibility.
Add a CTA to “Check pods availability”, this CTA gives the user an action either to see the pods or to book a pod.
Book a Room
Booking
Current design
The inefficient use of “See Pods” button that will direct users to another screen, this will create more time to consume just to book a pod.
There is no indication of how the booking process will be and lead confusion for users.
Having a booking button in each pod card content is a waste of space, and create confusion for the user that want to book multiple pods.
Redesign
Improve the “See Pods” button into a dropdown menu, this makes it more easy and simple for the user to change pods.
Adding a progress bar to indicate the booking process. With the additional progress bar information, it can increase user visibility.
Redesign the pods card content simpler by taking out the booking button and create only one CTA button to book now at the button bar to give more consistent design and layout. This way user can do multiple books in one tap.
Reservation Confirmation
Current design
Same issue with the previous screen, there is no progress bar to indicate the booking.
Not much visual and, have wide white space that is not used for efficient.
Redesign
Adding a progress bar to indicate the booking process. With the additional progress bar information, it can increase user visibility.
To maximise the screen, adding an image is a nice touch for use that confirm the visual pod, is it the right choice or not to book.
Changing the buttons with icon buttons, to create a simpler look.
If a user is not logged in there will be an indicator that the user is not logged in, but when the user is logged in, a user detail will be shown. This is an additional feature to give useful information that if they want to book a pod they need to be logged in first.
Payment
Payment Option
Current design
Continuing from the previous process, in this screen has also no progress bar indicator for user.
The visual is to plain with a grey background and has small buttons.
Redesign
Adding a progress bar to indicate the booking process. With the additional progress bar information, it can increase user visibility.
Redesign the payment option and create a radio button interface for the user to choose what payment method they want to use.
For consistency UI and layout, in the button navigation bar add a CTA button to pay now.
Adding more payment option like PayPal and Google Pay to engage the international user.
Follow up
Stays and Notifications
Current design
Current stay design use buttons to move between each section.
The history icon is too small and hard to access.
There is no notification history to guide use track the action they have made.
Redesign
Redesigning the buttons into a tab view where users can swipe or tap the menu. It’s a consistent UI design with other tab view menu.
Adding a notification icon for the user to access the notification they receive.
Accessing the notification icon will navigate to notification screen that has all the notifications.
With including this feature it will assist the user to keep in track of the application activity and give feedback.
Profile
Redesigning profile screen where bottom navigation bar “about option” is moved to the account screen.
Maximise the use of white space and give a more nice visual look.
If the user is not logged in, there will be no information displayed, and the user needs to log in. This will give more freedom of use to the application, either the user needs to log in or not.
Where if the user is logged in, all information will be displayed and have the option to log out.
