To improve the current result page design so that the user could find the needed information to compare the credit cards easily and without distractions. The most important things being done at this stage are competitive analysis, usability testing, prioritisation based on users need. The main goal was to provide a solution which won't have a big technological ask and will simplify the users financial journey.
Other than SingSaver there are several other online financial comparison platforms in Singapore market. Two of the main competitors are Moneysmart and GoBear. There's a fierce competition to dominate the saturated SG market.
Below is the comparison of the result pages of the both competitors.
What makes Moneysmart or GoBear different? The answer is better consumer journey. While the result pages were 80% similar, GoBear offered a unique rating feature and Moneysmart had sophisticated filters.
To find out user's pain points and what they think of the current app, we also asked a few "jobs to be done questions". Mainly to find out the reason "how the users use the features" and "what do they use it for". This helped us save some time and come up with more focused issues and unique feature requests.
During the usability test, users were asked to verbalise their thoughts. Follow up questions such as “why” and “tell me more about that” were asked to get users to elaborate on their thought process.
After gathering the insights through user interviews and usability testings, we categorised the insights in Extreme pains and essentials. This essentially helped us prioritise and differentiate the findings and put them in the clusters.
2×2 prioritization matrix
Subsequently, we prioritized the pain points based on their importance to a user as well as to SingSaver.
Based on the matrix and the project timeline, we decided to focus on improving filters feature specifically on Credit Card result pages. As well as the bookmark feature which complements the ease in comparison on the result page.
Pain Point 1: Make the filters simplified and remove the repetitive options.
We realised a lot of filters were too macro and a normal user was unaware of the necessity of the filter. Hence, never clicking on them. They were also repetitive and multiple selections would override the previous filter.
Because of their fragmented placement on the page, consumers would often forget about their existence.
A few overall improvements that help the user focus and avoid distraction. Placing all the filters together and separating them according to their usage. We listed the "category" first as most of the searches were done using that filter. After that came "Bank". And as a last supplementary filter we combined the smaller yet necessary sorting options.
All alternative filter options, such as category, bank, have been placed in the upper navigation menu. Additional filters have been collapsed in an attempt to avoid clutter. Further research needs to show the possible up- and downsides of hiding these filters. The new alignment also allows to have more cards in one screen. Making it easier to compare them.
Imagery and colours
Imagery is an important element that helps people to recognise the product faster. However, when user has a particular card in mind, it helps to have them on left where user can scan through them faster. It is based on research done by the Nielsen Norman Group, a UX research consulting firm, who conducted an eye-tracking study and found that people typically read blocks of text and assets in an F pattern.
To help people refine their search for the ideal card, a few categories have been added, such as ‘Shopping’ and ‘Airmiles’. These can be refined according to further research. Also the language has been simplified to make it more relatable, such as saying 'Bank' instead of 'SingSavers Providers'.
Clicking on the 'bookmark' sign saves the card as your favourite. You can save up to 3 cards and they will be reflected in the bookmark symbol located on the top bar. Upon clicking on it, a light overlay will cover the background in order to focus the user’s attention on the list of the selected cards. User can go back and choose different cards or proceed to compare.
A screen with side by side comparison table will then appear and will make cards comparison easier.
Due to time and development constraints, the pain points were prioritised accordingly. Further testing needs to be conducted in order to refine and validate the solution.
Looking into many different comparison websitess — Nerdwallet, CredirKarma etc. — this is an attempt to make the ‘comparison and filter’ easier. However, there is not a single smooth solution yet. More user research into behavorial aspects of the user will help refine the solution.