Project 3- Conceptual & Physical Design

Conceptual & Physical Design

Storyboard

Task 1: Comparing real-time traffic situation

Storyboard 1: Comparing real-time traffic situation

Task 2: Booking an e-haling service

Storyboard 2: Booking an e-haling service

Task 3: Using the cashless payment option

Storyboard 3: Using the cashless payment option

Alternative Designs – Crazy 8

Alternative Design 1 – Khor Yong Hao

Alternative Design 2 – Tan Boon Huie

Alternative Design 3 – Nicholas Cho Jian Hong

Alternative Design 4 – Chee Wei Jie

Voting Results

Final design:

Final design: Blue are design choices, Green are metaphors

Justification

Design choice 1 clearly shows the name and symbol of the app, allowing the users to clearly identify that they are currently using the app and assure them of its legitimacy. Design choice 1 has a logo that has a figure that resembles an ‘X’ while the ground consists of the app’s name, JOGI, following the Gestalt principles of figure and ground. 

Design choice 2 is a simple and clear indication of the main functions of the app. It acts as a clear starting point for any users, The icons serve as an aid for the users to more intuitively understand the main functions of the app. It also follows the Gestalt principle of similarity where the three boxes are of the same format, all three have an icon and a short text. All 3 icons are also placed in obvious enclosures to show that they are separate functions. 

Design choice 3 uses color contrast to highlight the first action the user could carry out to begin calling for a ride, which is to enter their pickup location. The design has consistency in styling and content dimension and implies a similar structure for the pickup and dropoff inputs, following the Gestalt principles of similarity. It also provides a sense of continuity as the dropoff bar would be highlighted after the pickup bar is filled, acknowledging the user's actions and guiding them to the next action. 

Design choice 4 allows the users to intuitively know where their destination is relative to their current location and pickup point. It assures the user that the inputted info is correct and also allows the user to fine-tune their pickup and dropoff selection based on the map. 

Design choice 5 follows the Gestalt principle of continuity by having a similar structure to the previous page, allowing the user to intuitively know that those are their inputted locations. It also allows the user to reference the locations at any point in time during the booking process, to allow for double-checking for assurance. 

Design choice 6 provides similarity in the way each route is presented, they are shown as tickets with the necessary information inside with all of them having the same format.

Design choice 6 has alternative ticket-like boxes close to each other with those at the left and right being slightly smaller to give the perception of a spinning wheel effect. They can swipe left or right to bring the alternative routes to the front. The different colors of the wheel allow the user to intuitively relate the mode of transport to the route taken on the map. The enclosures clearly separate the different modes of transport for easier recognition. 

Design choice 7 has the map enclosed within a box to separate the location details from the trip and vehicle details below. The pickup, dropoff, passenger, and driver location are all enclosed within that box, while the ETA, vehicle number and driver details are located in a separate compartment below the map. 

In design choice 8, the profile is boxed to separate it from the account settings, which is also divided from the general settings with a line. The ‘help’ and ‘feedback’ are also enclosed in their respective boxes to separate them from the rest of the page. 

Design choice 9 allows the user to easily identify essential information about the current payment situation at a glance, allowing them to identify if they have enough money for whatever trip they plan to take. A clear demarcation line is also present to indicate the other possible payment methods that the user could activate. 

Design choice 10 is a design symmetry in regards to the arrangement of the payment methods ready to be added by the user.

Wireframes

Wireframe of Task 1: Comparing real-time traffic situation

Description Wireframe Task 1

From Project 2, Persona 1 had to check the traffic situation of his selected route. Other apps do not have this option and can only see the route determined by the app with no freedom. With JOGI, he can now check traffic conditions and choose his preferred route to avoid traffic congestion. The traffic conditions are shown using bolded sections of different colours on the selected route, such as yellow being high traffic, red being heavy traffic and dark red being severe traffic congestion. Icons will also pop up indicating the cause of the traffic such as vehicle collision, roadblock, road maintenance, etc. Users may slide the options like a spinning wheel to choose from different routes and modes of transportation to minimize their time on the road.

Wireframe of Task 2: Booking an e-haling service

Description Wireframe Task 2

From Project 2, Persona 2 had an urgent need to download an e-hailing service to reach the Senai airport including grabbing food along the way. The other e-hailing service applications on the phone have many troubles booking the service as they have too many features shown and not step-by-step instructions to book an e-hailing service. With JOGI, the design of the interface is easy and simple as the user can simply see the booking option on their phone. The icon is big enough to be seen which shows it is just work for the e-hailing service. In the home page, users can choose the “Car” option to book the service where it will direct the user to the page to insert their pick-up location and drop-off location with suggestion.  Then, it will direct users to choose the routes and type of vehicles they want. The app also shows the current traffic situation with estimated times of arrival and fare according to the types of vehicles they chose. After clicking the big “Confirm Booking” button that shows at the bottom of the interface, it will automatically direct the user to search for a ride and show the details of the ride including the information of the driver and vehicles. There will also be a notification function that will notify the user when the vehicle arrives. The users can also set the language as their own preferences in the settings of the application. After all of that, user can safely and regularly book an e-hailing service with all of the step-by-step instructions.

Wireframe of Task 3: Using the cashless payment option

Description Wireframe Task 3

In Project 2, Persona 2 is a traveler who came to visit his nephew in Johor where he encountered trouble where he wanted to use an E-wallet app to pay for his ride and he could not find the E-wallet app option available. Persona 3 is also a regular user of e-hailing service who will use the cashless payment often. With JOGI, we can now add preferred payment methods into our default payment methods to pay the ride with ease. On the home page, users can choose the option “Payment method” which will direct them to the next page which includes wallets and various payment method options. Users can choose any available payment method to link and it will direct them to their own respective bank login page. After linking successfully, the preferred method will be added alongside the wallet section as a default payment method.

Shneiderman's 8 Golden Rules

Rule 1 – Strive for consistency

Task 1: the pickup and dropoff selection is standardized and intuitive, and the interface throughout the process stays consistent in terms of its layout. Hence they do not need to rethink everything for each step.

Task 2: The layout is pretty consistent throughout the pages, where pickup and drop off selection remain on the top and the map remain on the middle so that the users is familiar with the layout and always knew the spot to check their current location.

Task 3: The homepage button and payment methods section have an equal size button, color code, tone, and layout used. The layout of the payment method is also very consistent so that nothing is missed out when there are too many payment options.

Rule 2 – Enable frequent users to use shortcuts

Task 1: Users will be directed to a shortcut homepage when entering the app, they won’t need to find the specific page to use the function. The app also retains their previous choices and sets that as the default choice (for example, suggested locations, history of destinations, and mode of transport chosen) so that they would not need to re-enter everything each time they use the app.

Task 2: When the users enter the home page, book a ride option is immediately there so that users can book a ride as soon as possible, with no need to go through different pages.

Task 3: When users are on the home page, the payment method option is already there for the users to choose. Therefore, users can access payment methods as quickly as possible with only 1 click.

Rule 3 – Offer informative feedback

Task 1: Icons on the available routes indicate the cause of the traffic condition such as car collisions or roadblocks. The optimal route is highlighted. Regions of high traffic are colour-coded as well.

Task 2: After booking a ride, a car key switching on ignition animation will be performed and users will know that their ride is confirmed and proceed to the next page where the information about the ride is given.

Task 3: When the users successfully link their cashless payment option, the card or the E-wallet is automatically added to the default payment section, where next time whenever there is a booking the payment would be done automatically through the default payment. When the user’s option has been added, they will know that they have successfully linked to the account.

Rule 4 – Design dialogue to yield closure 

Task 3: When the users successfully top up their wallet in JOGI or successfully linked their cashless payment method, a simple interaction such as “Thank you for using JOGI wallet” or “Your card is linked successfully” will be performed to users, so that they know their action is completed.

Rule 5 – Offer simple error handling

Task 1: If the user chooses an unrealistic route, a popup will appear beside his route and state “X minutes longer” to trigger them to change to another route.

Task 2: If the map fails to detect the location inserted by the users, users can use the pinpoint function in the map to pinpoint the accurate destination so that users can still arrive at their destination.

Rule 6 – Permit easy reversal of actions

Task 1: If the user’s selected route becomes congested while he is still on the app, the app will show a ‘rotating’ icon to suggest to them to choose another route.

Task 2: If the users happen to choose the wrong pickup and dropoff location, they can still return to the previous page to adjust the locations to the correct one.

Task 3: If users accidentally add the wrong cards or E-wallet, they can simply edit the default payment method and remove it from the default payment method.

Rule 7 – Support internal locus of control

Task 3: Users are free to control what payment options they desire, including they can add multiple cards into their default payment method and use a main card for payment. The users are also free to switch to other cards as they make any adjustments in their financial planning.

Rule 8 – Reduce short-term memory load

Task 1: The app does not bombard the user with information, at the home page, only 3 icons are suggested which are easy to read. During the route selection phase, only a few best routes are suggested to them instead of every possible route in existence. This makes it easier for the user to choose a route and not get stuck on the page.

Task 2: When the offered routes are given more than 1, different colors would be used to indicate different routes with their respective ETA and fare so that the users know immediately which routes they can choose by looking at the colors.

Task 3: When users are selecting the payment methods, there are only icons and their respective names such as TNG for TouchnGo, so that the user is not overwhelmed by too many payment options and lost track of them. Therefore it is much simpler when tackling icons and names.

Metaphors

From the final design illustration, the metaphors are also annotated in the sequence below.

Metaphor 1

Since this is an E-hailing app, a car symbol would be used to indicate the car as one of the modes of transport, whenever there is anything related to a car, such as transport selection or the driver’s location, a car symbol on the front or on the side can be used to illustrate it very well.

Metaphor 2

This metaphor uses a wallet-like symbol with cash or a card on it to symbolize a JOGI wallet that users can use and also as a payment method symbol. This is to give a clear direction so that this button will direct users to the payment method page.

Metaphor 3

To show the user's current location or to pinpoint any places, a teardrop-like icon is used as a marker to show and pinpoint any locations. Red color is also used to let users be more aware of their current locations and their respective destination.

Metaphor 4

Upon booking a ride, this icon will present inside a button as a confirmation for booking the ride. This button shows a car key switching on the ignition button, when the user presses the button, the car key will turn and switch on indicating to the users that the booking is confirmed and will direct them to the next page.

Metaphor 5

The driver's car plate number shown in the app upon a successful booking is modeled after a standard Malaysian car plate. This would allow the user to easily relate and understand the meaning of the icon. 

Metaphor 6

A bus icon is used to represent another mode of transport in JOGI, which is public transport. It is indicated either on the front or the side of a bus. This is useful for differentiating a car and a bus and not confusing our users when selecting their mode of transportation.

Metaphor 7 

The user profile is modeled based on the Malaysian identification card as a metaphor for the user's identity. This would allow a more intuitive feel for the user when setting up their profile.