24hrs Design Challenge
Credit Sesame summer internship design challenge
Project Type: Individual
Duration: 24 hours (Mar 2016)
Research & Design
Project for : Credit Sesame
Adobe Photoshop, Sketch
Credit Sesame provides consumers the free tools they need to reach their financial goals. Credit Sesame helps consumers find better financial products and do more with their credit score, like taking loan decisions, credit card selection etc.
The low interest credit cards is an educational page on Credit Sesame’s website. The purpose of this page is to inform the user on the advantages of low interest credit cards and to capture specific web traffic searches relating to this topic. The project task was to conceptualize and redesign the page available here.
Current design of low interest credit card page of Credit Sesame
For this challenge, I was given only a single day to redesign the Low-Interest Credit Card experience for Credit Sesame. Please click here to see the full process documentation.
Before I started on the redesign, I wanted to get some clarification so that the final outcome aligns with the project goal. I reached out to Tiffany (Thanks, Tiffany!!) to get answers to the following questions.
What are top motivations of redesigning this page?
Make it visually more appealing to the user. As you can tell we have a lot of text and would like to display the information in a more digestible way
Make branding consistent with our other public pages
How would you define the success criteria of the redesigned page? It can be one of the below, or something else - increase time spent on the webpage, navigating users to a different page OR encourage users to an action, say to apply credit card
Most the users who land on this page will find it via organic search.
The success criteria would be mainly to click to other categories, secondarily encourage users to take an action.
2) Competitive Analysis
I have not worked on a financial website a financial website before, so I wanted to do my research with whatever limited time I had. I looked at what else is out there to get a feel of competitors’ strengths and weaknesses. I observed that almost all the competitors are trying to draw users’ attention to apply credit cards for a given category without having to highlight the information about a category or the features that users wanted. One great learning from this exercise was that by just pushing users towards an action would not prompt them to do so.
I created pen and paper wireframes to jot down my thoughts, before I moved to the high fidelity mock-ups. You can find the screenshots below.
The subject of the current version of the page is somewhat ambiguous.
The webpage is more about explaining to the users what low-interest credit cards are less about helping them find one. “Find the best interest credit card” makes it confusing.
PROs and CONs segment is an easier way for users to skim through the information and get an idea of ROI
With the language modifications like changing “Low-interest Top Card” to “Top low-interest credit card for you”, the idea is to make the information more personalized.
Based on the information provided in the page, if users feel that the low interest credit card is not desirable, their click from “I should look for other cards options” will take them here.
This segment provides the users easy options to navigate to other categories and continue their credit card research.
I have also tried to keep this consistent with other parts of the webpage where these icons are used for category selections.
I replaced the current title image with the low interest icon that has been used everywhere else on the website. This change helps in bringing consistency
I observed a lot of redundancy in the information provided in summary, what, why segment.
In order to make the information easily digestible and visually appealing, I suggest presenting in the bullet form format.
If a user is interested in accessing the complete information, I’ve provided a way to achieve it. Clicking on “view full info” will flip the bullet point information and transform into full sentences. This method will also let us keep the content for SEO purposes.
b) What and Why
c) PROs and CONs
Color-coding the PROs will green and CONs with red will assist the users to parse the comparison quickly and makes it visually much more appealing.
d) Is low interest credit card for me?
I transformed the “who should own one?” segment into “is low interest card for me?” segment. The desired outcome of this action was to make this information more personalized. As mentioned in the project brief segment, the success criteria would be mainly to click to other categories, and secondarily to encourage users to take an action.
I tried to present the information such that the users’ are provided with a piece of advice rather than forcing to take an action. This helps them make a choice based on their characteristics.
e) Top low interest credit card for you
I have also brought “Apply Now” button to this page to reduce the number of steps to apply for a top credit card. In the current version of the page, users have to click on “learn more” and navigate to a different page before they can click on “apply now” to start their application.
Users can also compare other cards in the same category if they wish by clicking on “Compare others”.
f) Other credit resources for you
I understand that sliders are not great for SEOs. Given that this is content about additional resources, the SEO of the current page will not depend on this. On the other hand sliders gives us a great way to manage real estate.
In the current design, all the four resources were presented with a same image which seemed redundant and not very relevant. I have used a distinct icon to each additional resource.
5) Final Design
For more information on this project, contact me!
Thanks for looking! Interested in more?