MS Transportation Hub LAnding PaGe
Website UI Layout Comparison
Goal Compare different layouts for the landing page of the Transportation Hub website. The intention here is to bring out the pros and cons of each concept, which would help make an informed decision of how to best represent the services.
Role UI Designer
Skills Wireframes, Visual Design, Interaction Design
Length 3 weeks
Tools Adobe XD
OVERVIew
This is an extension of Transportation Hub application. Please visit this link to learn more.
The landing page for Transportation hub is the first page any user who visits the site sees. The goal is to showcase the various different commute service we have to offer, so that the user can learn about them and take the desired action. The site has two states, when the user is signed in and when the user is not signed in.
When a user signs in, the experience is personalized. They can see their upcoming trips, make changes to their trips, view recent trips or book a new one.
Here are three different layouts for the landing page. In each option, the mock up of the left shows the version in which the users haven’t signed in, whereas the mockup on the right show the version in which the users have signed in.
OPTION 1
The ‘not signed in’ version of the wireframe allows you to sign in and showcases the different commute options in a grid available to employees.
The ‘signed in’ wireframe shows your upcoming trips and your past trips for easy booking on the left, along with the a map showing the current traffic on the right. Details about the different commute options are listed at the bottom in a grid.
OPTION 2
The ‘not signed in’ wireframe shows a video advertisement about the transportation services at Microsoft and a placeholder for your trips when you sign in. It shows a few of the commute options available to employees with an option to ‘see more’ which takes you to a different page with all the options.
The ‘signed in’ wireframe shows a map of the current traffic on the left and your upcoming trips on the right. It also shows your past trips in the middle for easy booking in. Details about a few of the different commute options are listed at the bottom, with the option to ‘see more’ which takes you to a different page with all the options.
OPTION 3
The ‘not signed in’ version of the wireframe shows a video advertisement about the transportation services at Microsoft and a placeholder for your trips when you sign in. It also showcases the different commute options in a carousel available to employees.
The ‘signed in’ wireframe shows a map of the current traffic on the left and your upcoming trips on the right. It also shows your past trips for easy booking in. Details about the different commute options are listed in a carousel at the bottom.
Usability Testing
We used the above mockups to perform usability testing, to understand which one would be intuitive and resourceful to the user.
The users were asked to perform different tasks like the following.
Look up about the different commute options.
Make a change to an existing booking.
Look up a recent trip and book it again.
We observed how the users performed these tasks, their actions and feelings.
OUTCOME
A side by side comparison of the different landing options allows one to easily see the benefits of each design. The usability study helped determine which one was intuitive to the users.
This exercise also allowed the business owner and stakeholders to experience how the potential landing page of the application would look like and make any recommendations of how to improve the product.