I'm Paramasivam Santhini and I am a fresh graduate from Nanyang Technological University with a Master's degree in Information systems. I am a fresher and I have a strong foundation in the user experience design knowledge such as Human-computer interaction and Usability engineering. I am interested in UI/UX designer where I can apply the new knowledge acquired from my learning journey.
Re-Designing of Singapore Map
About Singapore Map
Singapore Map is a composite map that supports navigating in Singapore, Malaysia, Indonesia, Philippines, and Hong Kong. Some of its characteristic features are real-time bus arrival time, nearest bus-stops, and train stations. It offers offline map viewing and facilitates finding places or services quickly, with an option to add them to favorites. The application helps users to navigate and connects users to services available nearby.
​
Problem
Some dire flaws in this application that mar the user experience. For instance, the first thing that pops up when users open the app, are advertisements(ads). To make matters worse, these ads do not have a prominent close button. This ads behavior is continued with every page refresh or navigation. Secondly, some of icons in the application increase users’ cognitive load due to the lack of direct mapping. To further strain the experience, the hamburger on the top left side is not available on all pages except the main page.
Apart from the user experience issues, there were some functional issues as well. The saving functionality was convoluted, there are two different types of saves, one for saving the location, and another for saving the route.Though the application has many redeeming qualities, the disjoint workflows and interface errors diminish the application’s effectiveness. The objective of this initiative is to transform the Singapore Map into a usable and intuitive mobile app, by re-designing the user interface.
​
​
Comparative Analysis
Singapore Map Vs Google Map
A comparative analysis of the design and functionality of the existing navigation app was done, for triangulating data gathering. Google maps, being a strong competitor was selected for the study.
​
Home screen & Search
The home screen is the place where the user first arrives to get an idea of their current location. Google maps directs the users to the navigation task, simplifying the actions to be performed. It also provides a list of information about restaurants in their area, nearby gas station, and others. Whereas the Singapore map requires additional workflows to get to the app’s navigation functionality.
​
The most important element in the navigation app is to allow the users to search for and get to a destination. Google maps ask the users to “search here” whereas Singapore map says, “find business, address or services”. Google maps suggest eye-catching graphics of the locations near the user’s location, along with reviews and ratings of the place. The suggestions feature could be leveraged and improved on.
​
Google Maps and Singapore map
User Persona
Requirement Gathering
Semi-structured interview
The user expectations of navigation applications were collected with the help of semi-structured interviews. Since, the demographic of the study is to focus on people who are new to Singapore, around 5 international students were considered for the interview. The interview time was restricted to 10 mins. The questions were a mix of both essential and extra questions and based on the answers provided by the participants, further probing questions were added in order to better understand the user needs.
​
The major findings from the interview are that most people use travel applications mainly for navigation purposes. The other features like finding nearby restaurants and groceries were considered less important and they can be categorized as good to have features. One of the major concerns for users while using these kinds of applications is the privacy issues the application may impose on them. They prefer to turn on their current location only while using the app. Another concern is the constant notifications given by the application as it distracted them from their daily chores. The users prefer in-app notifications and suggestions instead.
Review from AppStore
Singapore map is an existing application available in the market and suggestions from the existing users were gathered to understand the issues of the application. Most of the users found advertisements in the application were creating hindrance in carrying out their tasks effectively. One such user’s review from play store is as follows:
​
“Horrible, I have been using this for years, but recently the ads are getting very annoying. Some even force you to watch the entire ad, plus to loading speed. Oh my... I wouldn’t have mind paying for a No Ads version but it’s not available…”
​
Usability and User experience goals
Based on the Usability and User experience goals, the existing Singapore Map application was evaluated to find the issues.
​
Evaluating the Singapore map based on the usability goals, the task related to directions needs to be improved for better effectiveness and efficiency. In terms of utility, the application provides a lot of functionalities, but the organization of the features makes it invisible for the users. Concise workflows focusing on task-oriented approaches could improve the utility of the application. The application contains redundant and poorly categorized information which reduces the learnability and memorability of the users.
User experience goals describe the subjective qualities that concern how the users feel while using the application. The map feature in the Singapore map is highly helpful in helping users find unknown locations with ease. The application uses icons to reduce the cognitive load on the users. However, the poor categorization of features and the disruptions created by advertisements throughout the applications creates frustration among users.
​
Prototype Design
​
The aim of creating a task-oriented application was a major motivating factor of the re-design. The use of Hierarchical Task Analysis (HTA) was employed to convert the aforementioned usability and user experience goals into application-oriented tasks. Varying workflows for novice and expert users were crafted based on their application experience, to maximize efficiency. Workflow identification was a fundamental step in identifying niche areas to leverage context awareness.
Task-oriented Approach
The aim was to transform the application from being a front-end that receives input, to an interactive module that allows user to accomplish an intended task. Re-designing the textual markers and prompts in a manner that is understandable by the user and relevant to the activity being performed was crucial. A user-centered application was envisioned by layering user’s context into the interface design. Establishing a metaphorical journey, which was adopted as the theme of the new interface design aided in effective user context incorporation. As previously identified, users utilize navigation apps primarily for directions. Hence, the task translation originates and is oriented along with this activity. The residual functionalities provided by the application have been intertwined with the navigation task.
High Fidelity Prototype
Extracting a hierarchical task analysis from the goals defined with the help of data-gathering instruments, permitted the development of a high-fidelity prototype. Though a high-fidelity prototype is effort-intensive, mimicking the final product allowed for visualizing and customizing functionalities better. Hence Figma was used to design a prototype that closely resembled a plausible app interface. Based on the HTA, a vertical compromise was assumed. The focus was shifted to functional depth, by streamlining the categories of functions.
Home Page
Task-oriented design featuring directions alone at the home page enhances efficiency. Use of identifiable iconography aids in ease of app use for novice users. The conversing interface design was utilized for the navigation function, which has been identified as a cornerstone feature. Previously, the interface required the user to navigate to directions tab from the home page, using the menu available at the bottom of the page. The hamburger menu posed a significant problem with the legacy version of the app. It was not linked properly to all the pages and constituted iconography repetition. Hence, the hamburger menu was removed from the prototype, to provide a minimalistic interface. The iconography was also streamlined based on the choice functionalities incorporated. A vertical ellipsis was used for customization options and infrequent user requests. Re-designing with user context, the “Where to” phrase was included to curate the experience of a journey.
Re-design of the home screen
Direction & Route Description
The directions screen was re-designed to effectively cater to user requirements. Manipulating interface was offered for the navigation functionality as the user would have arrived at directions post conversation with the system on the destination and source. Leveraging manipulating interfaces, the user can perform actions such as selecting, zooming, and closing to interact with the application. To maximize task efficiency, the following functions were introduced or re-modeled.
-
Location reversal was simplified by modifying the icon to a more relatable one.
-
Actions such as view, share, and like were introduced to maximize vertical compromise.
-
The selection of mode of transport was re-organized to add the map feature for improved visibility.
-
Traffic view was re-organized to synchronize it with the direction workflow.
-
Introducing tags like “shortest” and “fastest” to inform users of the varying route options.
Re-design of the directions screen
Based on the comparative analysis with google maps, the agenda behind the route suggestions were rectified to be purely user-oriented. The prototype was also designed with Gestalt’s principle of proximity and closure were employed to group related features on this page. Also, based on the insights gathered from the semi-structured survey, a non-vehicular transport option was included in the mode of transport cards. The route options were expanded and displayed as a vertical column in the prototype, for improved visibility. Previously, they were incorporated as a separate task, requiring additional action by the user to view them.
Re-organizing the traffic information
Nearby
The efficiency of the nearby page was improved by linking it to the directions search on the home page. Category tags were added to help novice users better categorize locations. Also, the advertisements that were disrupting the application usability were redirected to the nearby page. This re-organization improves the application’s effectiveness while capturing users’ attention.
Nearby Feature
Conversing and manipulating interfaces were offered to allow bidirectional communication between the system and the user. The interface design facilitates both novice and expert users, wherein separating the favorite location and directions aid novice users. The introduction of the filter mechanism allows more autonomy and control to expert users, to customize the application to their preference. Including characteristic social features such as sharing the location on social media platforms would establish the application’s real-world relevance.
Optimizing favorites
Recommendations
To optimize existing data to create a context-aware application, a conversing and exploring interface type, offering location-based suggestions for the user to explore was adopted. Location-context generated from previous destinations that were not tagged as the home or work location were employed for customized recommendations. Based on the data gathered, it was evident that competitors in the market were providing recommendation based on current location. With users open to suggestions from the system, leveraging past destinations to better recommend activities and services would bolster the business prospects. Re-organizing Ads to be featured on the recommendations page, like the nearby screen was a usability enhancement. Recommendations that have been saved or rated would be cleared from the feed.
Location context Recommendations
Evaluation
​
Evaluating the re-designed Singapore map application, the Heuristic evaluation method is used to inspect the interface.
Heuristic evaluation is the process of involving usability experts to assess whether each of the design elements follows the usability principles. In many cases, recruiting real users to perform the usability testing is highly critical and employing informal methods like the heuristic evaluation are cost-effective and efficient. Though, user-testing maybe unfold many issues with the functional aspects of the application, usability evaluation methods have proven to find many usability related issues that are overlooked in the former.
Conclusion
To conclude that the most important part of this project is to learn about the users and their expectations for a navigation application. Compared to previous version of the Singapore map app the new version is developed to fulfil the user needs. The application is designed in a way that assists users in navigation, without any hindrance. The re-designed application can be used by novice users too without having any difficulties, owing to the synchronized workflows that are task oriented. The application’s interface has been revitalized, to provide a minimalistic and efficient user interface. Leveraging context awareness, the recommendations have been streamlined based on user behaviour. The ads have been re-envisioned to aid the context-aware suggestions. A cohesive and consistent user experience has been achieved by successfully translating usability goals into tasks that users perform.
​
My Role
For this project , my role was to explore ways to take the nagivation app to next level through research, analysis and
best practices in UX design. Developed the prototype design of the Direction Page and further wanted to make the interface attractive to the users.
​