{"id":22898,"date":"2024-12-05T15:44:57","date_gmt":"2024-12-05T15:44:57","guid":{"rendered":"https:\/\/ashleylawton.com\/staging\/6601\/?post_type=portfolio&p=22898"},"modified":"2024-12-06T15:22:49","modified_gmt":"2024-12-06T15:22:49","slug":"cnet-brand-expansion","status":"publish","type":"portfolio","link":"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-brand-expansion\/","title":{"rendered":"CNET Brand Expansion"},"content":{"rendered":"

CNET Brand Expansion<\/h1>

CNET went through a brand expansion at the end of 2023 and beginning of 2024. This was a design-lead project focusing on expanding and modernizing the CNET brand and improving overall site UX and internal efficiencies. My role was to take our creative director\u2019s vision, refine his front door concept, and create a functional design system for our team to start expanding off of.<\/span><\/p>\n<\/div>[vc_empty_space height=”64px”][vc_single_image image=”22904″ img_size=”full” alignment=”center” css=””]<\/div><\/div><\/div><\/section>

<\/div>
  • ROLE<\/span>Lead Senior Product Designer<\/li>
  • TOOLS<\/span>Figma<\/li>
  • TEAM<\/span>Design Team, UX Researcher, Product Manager, Engineering Team, Business and SEO Analysts<\/li>
  • PROJECT LENGTH<\/span>5 months (6 weeks for concepts\/stakeholder buy in, 8 weeks for design\/research, 8 weeks for development and QA) <\/li>
  • YEAR<\/span>October 2023 \u2013 February 2024<\/li>
  • BRAND<\/span>CNET<\/li><\/ul><\/div><\/div><\/div>
    [vc_single_image image=”22905″ img_size=”full” css=””]<\/div><\/div><\/div><\/section>
    <\/div>

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

    Focus on reflecting in our tech roots and move towards visual treatments that bring excitement back into our experience.<\/span><\/p>\n<\/div><\/div><\/div><\/div><\/div>

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

    Create a cohesive system that can be shared across functions and set consistent expectations for our users.<\/span><\/p>\n<\/div><\/div><\/div><\/div><\/div>

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

    Create a front end design system to aid in fast communication and shipment of assets.<\/span><\/p>\n<\/div><\/div><\/div><\/div><\/div><\/section>

    <\/div>

    Beginning Phases<\/h2>

    In the beginning phases of this project, our creative director began to share new conceptual directions on layout, typography, and color with our team for a new front door. My responsibility in this phase was to provide feedback and start to define our color palette. I was able to successful propose a simplified color palette in this phase by combining scales and eliminating repetitive colors.<\/span><\/p>\n<\/div><\/div><\/div><\/div>

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

    Refining the Front Door<\/h2>

    After the initial conceptual direction, the project began to gain momentum with our senior leadership on the possibility of expanding the CNET brand. Our creative director passed off his front door concept to me where I focused on refining the layout, creating the mobile experience, and restyling the navigation.<\/span><\/p>\n<\/div><\/div><\/div><\/div><\/section>

    <\/div>
    \"\"<\/div>
    \"\"<\/div>
    \"\"<\/div>
    \"\"<\/div><\/div>
    <\/div><\/div><\/div><\/div><\/div><\/section>
    <\/div>
    [vc_single_image image=”22907″ img_size=”full” alignment=”center” css=””]<\/div><\/div><\/div>

    User Testing<\/h2>

    After refinement of the initial concept, I worked with our ux researcher to get the new front door in front of our users. Our goal was to make sure users were receptive to the new layout and the experience was not hindering the perception of the CNET brand. In testing we learned that users were receptive to the new brand direction and found it to be more exciting and engaging than our current experience. We also discovered some actionable feedback from users, including where users felt overwhelmed. I was able to take that feedback to further iterate on the design.<\/span><\/p>\n<\/div><\/div><\/div><\/div><\/section>

    <\/div>

    Final Front Door Design<\/h2>

    Our final version of the front door not only improved the overall experience for our users, but it also introduced CNET in a different light. The new color palette is shown throughout the UI and roots the design back to CNET\u2019s tech roots. The new layout also increases our authority and brand trust by highlighting our experts, bringing our human element back into our brand. For the engineering handoff, I made sure to include all screen sizes and interaction breakdowns of each new component.<\/span><\/p>\n<\/div><\/div><\/div><\/div><\/section>

    <\/div>
    [vc_single_image image=”22923″ img_size=”full” alignment=”center” css_animation=”fadeInUp” css=”” el_class=”margin-35px-bottom xs-margin-15px-bottom”][vc_single_image image=”22902″ img_size=”full” alignment=”center” css_animation=”fadeInUp” css=”” el_class=”margin-35px-bottom xs-margin-15px-bottom”][vc_single_image image=”22900″ img_size=”full” alignment=”center” css_animation=”fadeInUp” css=”” el_class=”margin-35px-bottom xs-margin-15px-bottom”][vc_single_image image=”22895″ img_size=”full” alignment=”center” css_animation=”fadeInUp” css=”” el_class=”margin-35px-bottom xs-margin-15px-bottom”][vc_single_image image=”22897″ img_size=”full” alignment=”center” css_animation=”fadeInUp” css=”” el_class=”margin-35px-bottom xs-margin-15px-bottom”][vc_single_image image=”22920″ img_size=”full” alignment=”center” css_animation=”fadeInUp” css=”” el_class=”margin-35px-bottom xs-margin-15px-bottom”][vc_single_image image=”22921″ img_size=”full” alignment=”center” css_animation=”fadeInUp” css=”” el_class=”margin-35px-bottom xs-margin-15px-bottom”]<\/div><\/div><\/div><\/section>
    <\/div>

    Expanding Across Site<\/h2>

    Now that the front door was established, it was time to explore and outline how the new branding would expand to the rest of the site. My role here was to create a functioning, global UI kit that our designers and developers could use as a baseline to begin updating global styles and elements and track our progress. The UI kit included new colors, typography, buttons, links, filters, and icons with token documentation for our engineering team.<\/span><\/p>\n<\/div>[vc_empty_space][vc_btn title=”View Full UI Kit” style=”outline-custom” outline_custom_color=”#FFFFFF” 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%3D219-90717%26node-type%3Dframe%26viewport%3D345%252C-1710%252C0.06%26t%3DgXOvlICgMSEgAwFE-9%26scaling%3Dscale-down-width%26content-scaling%3Dfixed%26starting-point-node-id%3D219%253A90717%26show-proto-sidebar%3D1″]<\/div><\/div><\/div><\/section>

    <\/div>
    [vc_single_image image=”22909″ img_size=”full” alignment=”center” css_animation=”fadeInUp” css=”” el_class=”margin-35px-bottom xs-margin-15px-bottom”][vc_single_image image=”22910″ img_size=”full” alignment=”center” css_animation=”fadeInUp” css=”” el_class=”margin-35px-bottom xs-margin-15px-bottom”][vc_single_image image=”22911″ img_size=”full” alignment=”center” css_animation=”fadeInUp” css=”” el_class=”margin-35px-bottom xs-margin-15px-bottom”][vc_single_image image=”22912″ img_size=”full” alignment=”center” css_animation=”fadeInUp” css=”” el_class=”margin-35px-bottom xs-margin-15px-bottom”][vc_single_image image=”22913″ img_size=”full” alignment=”center” css_animation=”fadeInUp” css=”” el_class=”margin-35px-bottom xs-margin-15px-bottom”][vc_single_image image=”22914″ img_size=”full” alignment=”center” css_animation=”fadeInUp” css=”” el_class=”margin-35px-bottom xs-margin-15px-bottom”][vc_single_image image=”22915″ img_size=”full” alignment=”center” css_animation=”fadeInUp” css=”” el_class=”margin-35px-bottom xs-margin-15px-bottom”][vc_single_image image=”22917″ 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>

    The CNET brand expansion revitalized not only the brand itself but also the teams behind it. Marketing and sales teams embraced the fresh look and feel, leveraging it to captivate potential partners. Engineering teams were energized by the newfound uniformity and consistency, which streamlined workflows and boosted efficiency across site products. Business teams identified significant opportunities for testing and innovation, paving the way for future growth. Not only did the rebrand win an Ozzy Award, but it also positioned CNET to expand its site experience, creating a solid foundation for new initiatives like AI Atlas and 100 Days of Holiday, as well as potential sub-branding opportunities.<\/span><\/p>\n<\/div><\/div><\/div><\/div><\/section>

    <\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"CNET Brand ExpansionCNET went through a brand expansion at the end of 2023 and beginning of 2024. This was a design-lead project focusing on expanding and modernizing the CNET brand and improving overall site UX and internal efficiencies. My role was to take our creative director\u2019s vision, refine his front door concept, and create a functional design system for our team to start expanding off of. [vc_empty_space height=\"64px\"][vc_single_image image=\"22904\" img_size=\"full\" alignment=\"center\" css=\"\"]ROLELead Senior Product DesignerTOOLSFigmaTEAMDesign Team, UX Researcher, Product Manager, Engineering Team, Business and SEO AnalystsPROJECT LENGTH5 months (6 weeks for concepts\/stakeholder buy in, 8 weeks for design\/research, 8 weeks for development and QA) YEAROctober 2023 \u2013 February 2024BRANDCNET[vc_single_image image=\"22905\" img_size=\"full\" css=\"\"]Project Goals01.BRANDFocus on reflecting in our tech roots and move towards visual treatments that bring excitement back into our experience. 02.USER EXPERIENCECreate a cohesive system that can be shared across functions and set consistent expectations for our users. 03.EFFICIENCYCreate a front end design system to aid in fast communication and shipment of assets. Beginning PhasesIn the beginning phases of this project, our creative director began to share new conceptual directions on layout, typography, and color with our team for a new front door. My responsibility in this phase was...","protected":false},"featured_media":22905,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","class_list":["post-22898","portfolio","type-portfolio","status-publish","format-standard","has-post-thumbnail","hentry","portfolio-tags-case-study"],"yoast_head":"\nCNET Brand Expansion - 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-brand-expansion\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CNET Brand Expansion - Ashley Lawton Portfolio\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-brand-expansion\/\" \/>\n<meta property=\"og:site_name\" content=\"Ashley Lawton Portfolio\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-06T15:22:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ashleylawton.com\/staging\/6601\/wp-content\/uploads\/2024\/12\/CNET-brand_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=\"5 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-brand-expansion\\\/\",\"url\":\"https:\\\/\\\/ashleylawton.com\\\/staging\\\/6601\\\/portfolio\\\/cnet-brand-expansion\\\/\",\"name\":\"CNET Brand Expansion - Ashley Lawton Portfolio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ashleylawton.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ashleylawton.com\\\/staging\\\/6601\\\/portfolio\\\/cnet-brand-expansion\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ashleylawton.com\\\/staging\\\/6601\\\/portfolio\\\/cnet-brand-expansion\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/ashleylawton.com\\\/staging\\\/6601\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/CNET-brand_logo_800x800.png?fit=800%2C800&ssl=1\",\"datePublished\":\"2024-12-05T15:44:57+00:00\",\"dateModified\":\"2024-12-06T15:22:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ashleylawton.com\\\/staging\\\/6601\\\/portfolio\\\/cnet-brand-expansion\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ashleylawton.com\\\/staging\\\/6601\\\/portfolio\\\/cnet-brand-expansion\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ashleylawton.com\\\/staging\\\/6601\\\/portfolio\\\/cnet-brand-expansion\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/ashleylawton.com\\\/staging\\\/6601\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/CNET-brand_logo_800x800.png?fit=800%2C800&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/ashleylawton.com\\\/staging\\\/6601\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/CNET-brand_logo_800x800.png?fit=800%2C800&ssl=1\",\"width\":800,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ashleylawton.com\\\/staging\\\/6601\\\/portfolio\\\/cnet-brand-expansion\\\/#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 Brand Expansion\"}]},{\"@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 Brand Expansion - 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-brand-expansion\/","og_locale":"en_US","og_type":"article","og_title":"CNET Brand Expansion - Ashley Lawton Portfolio","og_url":"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-brand-expansion\/","og_site_name":"Ashley Lawton Portfolio","article_modified_time":"2024-12-06T15:22:49+00:00","og_image":[{"width":800,"height":800,"url":"https:\/\/ashleylawton.com\/staging\/6601\/wp-content\/uploads\/2024\/12\/CNET-brand_logo_800x800.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-brand-expansion\/","url":"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-brand-expansion\/","name":"CNET Brand Expansion - Ashley Lawton Portfolio","isPartOf":{"@id":"https:\/\/ashleylawton.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-brand-expansion\/#primaryimage"},"image":{"@id":"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-brand-expansion\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/ashleylawton.com\/staging\/6601\/wp-content\/uploads\/2024\/12\/CNET-brand_logo_800x800.png?fit=800%2C800&ssl=1","datePublished":"2024-12-05T15:44:57+00:00","dateModified":"2024-12-06T15:22:49+00:00","breadcrumb":{"@id":"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-brand-expansion\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-brand-expansion\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-brand-expansion\/#primaryimage","url":"https:\/\/i0.wp.com\/ashleylawton.com\/staging\/6601\/wp-content\/uploads\/2024\/12\/CNET-brand_logo_800x800.png?fit=800%2C800&ssl=1","contentUrl":"https:\/\/i0.wp.com\/ashleylawton.com\/staging\/6601\/wp-content\/uploads\/2024\/12\/CNET-brand_logo_800x800.png?fit=800%2C800&ssl=1","width":800,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/ashleylawton.com\/staging\/6601\/portfolio\/cnet-brand-expansion\/#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 Brand Expansion"}]},{"@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\/22898","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=22898"}],"version-history":[{"count":11,"href":"https:\/\/ashleylawton.com\/staging\/6601\/wp-json\/wp\/v2\/portfolio\/22898\/revisions"}],"predecessor-version":[{"id":22976,"href":"https:\/\/ashleylawton.com\/staging\/6601\/wp-json\/wp\/v2\/portfolio\/22898\/revisions\/22976"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ashleylawton.com\/staging\/6601\/wp-json\/wp\/v2\/media\/22905"}],"wp:attachment":[{"href":"https:\/\/ashleylawton.com\/staging\/6601\/wp-json\/wp\/v2\/media?parent=22898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}