{"id":22837,"date":"2024-12-03T20:20:53","date_gmt":"2024-12-03T20:20:53","guid":{"rendered":"https:\/\/ashleylawton.com\/staging\/6601\/?post_type=portfolio&p=22837"},"modified":"2024-12-05T15:40:43","modified_gmt":"2024-12-05T15:40:43","slug":"cnet-money-credit-card-template","status":"publish","type":"portfolio","link":"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-money-credit-card-template\/","title":{"rendered":"CNET Money Credit Card Template"},"content":{"rendered":"

CNET Money Credit Card Template<\/h1>

CNET Money is focused on providing users with unbiased, financial advice and recommendations. This project was focused around optimizing how we show credit card information and recommendations on site.<\/span><\/p>\n<\/div>[vc_empty_space height=”64px”][vc_single_image image=”22789″ img_size=”full” alignment=”center” css=””]<\/div><\/div><\/div><\/section>

<\/div>
  • ROLE<\/span>Lead Senior Product Designer<\/li>
  • TOOLS<\/span>Figma<\/li>
  • TEAM<\/span>Senior Product Designer, Product Manager, Engineer, Legal Rep<\/li>
  • PROJECT LENGTH<\/span>3 months (6 weeks for research\/design and 6 weeks for development and QA)<\/li>
  • YEAR<\/span>April \u2013 June 2023<\/li>
  • BRAND<\/span>CNET Money<\/li><\/ul><\/div><\/div><\/div>
    [vc_single_image image=”22790″ img_size=”full” css=””]<\/div><\/div><\/div><\/section>
    <\/div>

    Project Goals<\/h2><\/div><\/div><\/div><\/section>
    <\/div>
    01.<\/span>ENGAGEMENT<\/span><\/div>

    Increase CTR and interaction within credit card precaps and listicles, specifically on desktop.<\/span><\/p>\n<\/div><\/div><\/div><\/div><\/div>

    02.<\/span>USER EXPERIENCE<\/span><\/div>

    Improve overall user experience and provide users with easy-to-read and compare information quickly.<\/span><\/p>\n<\/div><\/div><\/div><\/div><\/div>

    03.<\/span>OPTIMIZATION<\/span><\/div>

    Discover additional opportunities through competitive research.<\/span><\/p>\n<\/div><\/div><\/div><\/div><\/div><\/section>

    <\/div>

    Competitive Research<\/h2>

    This was my first project working on credit cards, so to start this project, I began with researching our competitors. I discovered that for many of our competitor’s components, they were providing users with more visible and comparable card information than we were. Looking at our current experience, I was also able to identify potential quick wins at the top of our page experience like allowing more breathing room for our right rail on desktop.<\/span><\/p>\n<\/div><\/div><\/div><\/div><\/section>

    <\/div>
    [vc_single_image image=”22841″ img_size=”full” alignment=”center” css=””]<\/div><\/div><\/div>
    [vc_single_image image=”22842″ img_size=”full” alignment=”center” css=””]<\/div><\/div><\/div>
    [vc_single_image image=”22840″ img_size=”full” alignment=”center” css=””]<\/div><\/div><\/div><\/section>
    <\/div>

    Medium-Fidelity Designs<\/h2>

    After completing some competitive research and analysis, I quickly created layouts that focused on optimizing the top of our page experience and giving our product team new opportunities for A\/B testing. I then presented my findings to stakeholders for buy-in and review.<\/span><\/p>\n<\/div>[vc_empty_space][vc_btn title=”View Presentation” style=”outline-custom” outline_custom_color=”#1F1F1F” outline_custom_hover_background=”#45B8AC” align=”center” css=”” link=”url:https%3A%2F%2Fwww.figma.com%2Fproto%2FqoxyYreidMuhbNFJdLGEct%2FPortfolio%3Fpage-id%3D2%253A14%26node-id%3D128-31369%26node-type%3Dframe%26viewport%3D345%252C-1710%252C0.06%26t%3DgXOvlICgMSEgAwFE-9%26scaling%3Dscale-down-width%26content-scaling%3Dfixed%26starting-point-node-id%3D128%253A31369%26show-proto-sidebar%3D1|target:_blank”]<\/div><\/div><\/div><\/section>

    <\/div>
    [vc_single_image image=”22791″ img_size=”full” alignment=”center” css=””]<\/div><\/div><\/div>
    [vc_single_image image=”22792″ img_size=”full” alignment=”center” css=””]<\/div><\/div><\/div><\/section>
    <\/div>
    [vc_single_image image=”22844″ img_size=”full” alignment=”center” css=””]<\/div><\/div><\/div>

    Approval Challenges<\/h2>

    Since credit cards are a highly-regulated topic, we had to provide our new designs to our credit card issuers. This process included getting approvals from our legal team and creating content-specific mocks for each of our credit card issuers.<\/span><\/p>\n<\/div><\/div><\/div><\/div><\/section>

    <\/div>

    Final Design<\/h2>

    The final designs of these page templates included a new, top-of-page experience with less visual clutter and highlighted information like CNET score, annual fees, and rewards rates. Deeper within the experience, new listicle designs included more vertical scannability of important card information and maximized usable space on the mobile experience.<\/span><\/p>\n<\/div><\/div><\/div><\/div><\/section>

    <\/div>
    [vc_single_image image=”22787″ img_size=”full” alignment=”center” css_animation=”fadeInUp” css=”” el_class=”margin-35px-bottom xs-margin-15px-bottom”][vc_single_image image=”22786″ img_size=”full” alignment=”center” css_animation=”fadeInUp” css=”” el_class=”margin-35px-bottom xs-margin-15px-bottom”][vc_single_image image=”22788″ img_size=”full” alignment=”center” css_animation=”fadeInUp” css=”” el_class=”margin-35px-bottom xs-margin-15px-bottom”]<\/div><\/div><\/div><\/section>
    <\/div>

    Business Impact & Learnings<\/h2>

    After the new page templates were tested, they proved to outperform the existing experience with +26% increase in registration per visit and an increase in initial CTR by +11%. From this experience, we learned that if we give users an easy way to not only compare credit cards, but also give more valuable information up front, our audience is more likely to click through to the next step of the experience.<\/span><\/p>\n<\/div><\/div><\/div><\/div><\/section>

    <\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"CNET Money Credit Card TemplateCNET Money is focused on providing users with unbiased, financial advice and recommendations. This project was focused around optimizing how we show credit card information and recommendations on site. [vc_empty_space height=\"64px\"][vc_single_image image=\"22789\" img_size=\"full\" alignment=\"center\" css=\"\"]ROLELead Senior Product DesignerTOOLSFigmaTEAMSenior Product Designer, Product Manager, Engineer, Legal RepPROJECT LENGTH3 months (6 weeks for research\/design and 6 weeks for development and QA)YEARApril \u2013 June 2023BRANDCNET Money[vc_single_image image=\"22790\" img_size=\"full\" css=\"\"]Project Goals01.ENGAGEMENTIncrease CTR and interaction within credit card precaps and listicles, specifically on desktop. 02.USER EXPERIENCEImprove overall user experience and provide users with easy-to-read and compare information quickly. 03.OPTIMIZATIONDiscover additional opportunities through competitive research. Competitive ResearchThis was my first project working on credit cards, so to start this project, I began with researching our competitors. I discovered that for many of our competitor's components, they were providing users with more visible and comparable card information than we were. Looking at our current experience, I was also able to identify potential quick wins at the top of our page experience like allowing more breathing room for our right rail on desktop. [vc_single_image image=\"22841\" img_size=\"full\" alignment=\"center\" css=\"\"][vc_single_image image=\"22842\" img_size=\"full\" alignment=\"center\" css=\"\"][vc_single_image image=\"22840\" img_size=\"full\" alignment=\"center\" css=\"\"]Medium-Fidelity DesignsAfter completing some competitive research and analysis, I quickly...","protected":false},"featured_media":22790,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","class_list":["post-22837","portfolio","type-portfolio","status-publish","format-standard","has-post-thumbnail","hentry","portfolio-tags-case-study"],"yoast_head":"\nCNET Money Credit Card Template - Ashley Lawton Portfolio<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-money-credit-card-template\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CNET Money Credit Card Template - Ashley Lawton Portfolio\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-money-credit-card-template\/\" \/>\n<meta property=\"og:site_name\" content=\"Ashley Lawton Portfolio\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-05T15:40:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ashleylawton.com\/staging\/6601\/wp-content\/uploads\/2024\/11\/CNET-credit-card_logo_800x800.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ashleylawton.com\\\/staging\\\/6601\\\/portfolio\\\/cnet-money-credit-card-template\\\/\",\"url\":\"https:\\\/\\\/ashleylawton.com\\\/staging\\\/6601\\\/portfolio\\\/cnet-money-credit-card-template\\\/\",\"name\":\"CNET Money Credit Card Template - Ashley Lawton Portfolio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ashleylawton.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ashleylawton.com\\\/staging\\\/6601\\\/portfolio\\\/cnet-money-credit-card-template\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ashleylawton.com\\\/staging\\\/6601\\\/portfolio\\\/cnet-money-credit-card-template\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/ashleylawton.com\\\/staging\\\/6601\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/CNET-credit-card_logo_800x800.png?fit=800%2C800&ssl=1\",\"datePublished\":\"2024-12-03T20:20:53+00:00\",\"dateModified\":\"2024-12-05T15:40:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ashleylawton.com\\\/staging\\\/6601\\\/portfolio\\\/cnet-money-credit-card-template\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ashleylawton.com\\\/staging\\\/6601\\\/portfolio\\\/cnet-money-credit-card-template\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ashleylawton.com\\\/staging\\\/6601\\\/portfolio\\\/cnet-money-credit-card-template\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/ashleylawton.com\\\/staging\\\/6601\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/CNET-credit-card_logo_800x800.png?fit=800%2C800&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/ashleylawton.com\\\/staging\\\/6601\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/CNET-credit-card_logo_800x800.png?fit=800%2C800&ssl=1\",\"width\":800,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ashleylawton.com\\\/staging\\\/6601\\\/portfolio\\\/cnet-money-credit-card-template\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ashleylawton.com\\\/staging\\\/6601\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Portfolio\",\"item\":\"https:\\\/\\\/ashleylawton.com\\\/staging\\\/6601\\\/portfolio\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CNET Money Credit Card Template\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ashleylawton.com\\\/#website\",\"url\":\"https:\\\/\\\/ashleylawton.com\\\/\",\"name\":\"Ashley Lawton Portfolio\",\"description\":\"Senior Product Designer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ashleylawton.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CNET Money Credit Card Template - Ashley Lawton Portfolio","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-money-credit-card-template\/","og_locale":"en_US","og_type":"article","og_title":"CNET Money Credit Card Template - Ashley Lawton Portfolio","og_url":"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-money-credit-card-template\/","og_site_name":"Ashley Lawton Portfolio","article_modified_time":"2024-12-05T15:40:43+00:00","og_image":[{"width":800,"height":800,"url":"https:\/\/ashleylawton.com\/staging\/6601\/wp-content\/uploads\/2024\/11\/CNET-credit-card_logo_800x800.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-money-credit-card-template\/","url":"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-money-credit-card-template\/","name":"CNET Money Credit Card Template - Ashley Lawton Portfolio","isPartOf":{"@id":"https:\/\/ashleylawton.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-money-credit-card-template\/#primaryimage"},"image":{"@id":"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-money-credit-card-template\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/ashleylawton.com\/staging\/6601\/wp-content\/uploads\/2024\/11\/CNET-credit-card_logo_800x800.png?fit=800%2C800&ssl=1","datePublished":"2024-12-03T20:20:53+00:00","dateModified":"2024-12-05T15:40:43+00:00","breadcrumb":{"@id":"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-money-credit-card-template\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-money-credit-card-template\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-money-credit-card-template\/#primaryimage","url":"https:\/\/i0.wp.com\/ashleylawton.com\/staging\/6601\/wp-content\/uploads\/2024\/11\/CNET-credit-card_logo_800x800.png?fit=800%2C800&ssl=1","contentUrl":"https:\/\/i0.wp.com\/ashleylawton.com\/staging\/6601\/wp-content\/uploads\/2024\/11\/CNET-credit-card_logo_800x800.png?fit=800%2C800&ssl=1","width":800,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-money-credit-card-template\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ashleylawton.com\/staging\/6601\/"},{"@type":"ListItem","position":2,"name":"Portfolio","item":"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/"},{"@type":"ListItem","position":3,"name":"CNET Money Credit Card Template"}]},{"@type":"WebSite","@id":"https:\/\/ashleylawton.com\/#website","url":"https:\/\/ashleylawton.com\/","name":"Ashley Lawton Portfolio","description":"Senior Product Designer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ashleylawton.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ashleylawton.com\/staging\/6601\/wp-json\/wp\/v2\/portfolio\/22837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ashleylawton.com\/staging\/6601\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/ashleylawton.com\/staging\/6601\/wp-json\/wp\/v2\/types\/portfolio"}],"replies":[{"embeddable":true,"href":"https:\/\/ashleylawton.com\/staging\/6601\/wp-json\/wp\/v2\/comments?post=22837"}],"version-history":[{"count":6,"href":"https:\/\/ashleylawton.com\/staging\/6601\/wp-json\/wp\/v2\/portfolio\/22837\/revisions"}],"predecessor-version":[{"id":22896,"href":"https:\/\/ashleylawton.com\/staging\/6601\/wp-json\/wp\/v2\/portfolio\/22837\/revisions\/22896"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ashleylawton.com\/staging\/6601\/wp-json\/wp\/v2\/media\/22790"}],"wp:attachment":[{"href":"https:\/\/ashleylawton.com\/staging\/6601\/wp-json\/wp\/v2\/media?parent=22837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}