Niq's OA Resources

Redesign Process

Last Updated: 10/23/2024

Back

    Coordinator

  1. Design request comes in
  2. Contact Customer
    • Create initial ticket to communicate to the customer
    • Copy this document, and fill out the info needed: Base Doc
      • Ask if they have a deadline (it shouldn't take the dept more than a month to do a design anyway)
      • Make we have updated versions of their logo, in high quality.
        Ask them for .svg format files of their logos, illustrator files, etc.
      • Get any other company branding components they might have to send.
      • Get any design direction.
      • Get their primary services to be highlighted for service section.
      • Make sure company hours are correct or collected.
      • Get Financing info
      • Double check if their office is a storefront or residential
      • Get/Double Check License Number
      • Check if they're co-op, nbn, have a chat wiget
      • Go through customer hub elements to make sure up to date
        • Check cities list
        • Check company hours
        • Check locations
        • Check the Services & SEO
        • Check social media links
  3. Click the "Schedule Redesign" button on the customer's PagePilot Listing
    • This creates a ticket that sometimes Customer Support will assign to the coordinator, but you should go grab it.
    • Merge your initial contact ticket with this new ticket
    • This also creates an entry in the Redesign Board
    • It also creates the basecamp checklist for that company
    • Add the following tasks to the ticket to assign out when their steps arise:
      • Content First
      • Create mockup
      • Design Audit
      • Build HTML
      • SEO audit
      • Set live
    • Additional tasks will probably need to be added to the main ticket when more changes come in
    • If the customer sends in emails that end up making new tickets (related to the redesign), merget them in with the ticket
    • Any step during the process, where the customer replaces/removes/changes the content from the original google document, make sure those changes are noted in the google document
  4. The "Content First" task, assign it to the SEO team, linking the google doc you created.

    5. SEO Dept

  5. Content department gets content together and hands it back to the coordinator

    6. Coordinator

  6. Assign the "Create Mockup" task to the design dept, with a link to the google doc, and any resources needed for the mockup

    7. Designer

  7. Design department does mockup of site (Time: 40 work hours or less)
    1. Move the design to "In Progress" in the Redesign Board
      2. Design Mockup
    2. Visit customer’s exiting website, and material provided for the customer's branding
    3. Check company's competitors to make sure your design is not the same
    4. In the file server, under "Customers" > "Customer Files" > "[company name] [CID]" > "Graphics", create a new folder, title it "2024 Redesign"
      (Any graphics you get/use/purchase should be copied into this folder)
    5. In Figma, create a new design file under "Drafts", name the file "[company name] 2024 Redesign Mockup"
    6. Design Mockup accordingly (Both a desktop and mobile version):
        7. Use company branding!
      • Use/Make color palette from company logo/branding materials
      • Pull/Match fonts from logo/branding materials
      • Prioritize using photos provided by customer of jobs and locations
      • If financing is provided, make sure is on the site somewhere
        • Hero Section
      • Company Logo
      • H1
      • CTA (At least one obvious button like "Schedule Service")
      • Phone Number
        • Body
      • Create sections according to design document
      • Primary Services should be close to the top
      • Each section does not have to be full width
        • Footer
      • Company Logos
      • License Number
      • Company Hours
      • Address(es)
      • Social Media
      • Schedule Service link
      • Payment Options
      • Primary Service links, and other important links (like promotions, guarantees, employment, email us)
  8. Mark the mock-up task as complete, assigning it to the coordinator with links to a customer presenting desktop and mobile version of the mockup

    9. Coordinator

  9. Send the figma link to the design auditor in the "Design Audit" task. Assign it to the designer when the audit is received back from the auditor.

    10. Designer

  10. Make tweaks and adjustments according to the design audit, note the changes completed or otherwise in the audit task. Marking it as complete after commenting @ the auditor and the coordinator about the changes.

    11. Coordinator

  11. Double check the design audit and make sure all the points presented were appropriately addressed
  12. Contact and present the customer the mockup
    • Designer and coordinator may have to go back and forth a few times making adjustments as the customer deems necessary.
    • New changes to the design should result in new tasks created under the main ticket to be assigned to the designer, or design team if that designer is unavailable.
    • Again, any changes to the content given in the google document should be noted if the customer changed/removed any of it.
  13. Once customer has given final approval, "Build HTML" task with a link to the figma file should be assigned to the graphics dept.

    14. Designer

  14. Take the "Build HTML" task and build the mockup in HTML (Time: 40 work hours or less)
    • Create Hidden Page for the homepage mockup
      If the original site is in foundation, use CID 2053 (Bootstrap Staging), to make a new page to mock up the design in html, if the original site is already in bootstrap, make a new hidden page in the company's site.
    • Create a hidden test page for the global layout
    • In the customer's site, make 2 new layouts
        • Hompage Layout
      • Header block with the header or hero section of the design
      • Body block of just "<#Page>"
      • Footer block with the footer content in
      • Name it "Homepage 2024"
        • Global layout
      • Create Header block (this can use the header, or some of the elements from the homepage layout):
        • Logo
        • CTA
        • Phone Number
        • Navbar
        • Page title (somewhere there needs to be what will dynamically load the page name). Should have: "<h2>{#PageName}</h2>"
        • There is a ssButton class set up
      • Create Global Body: "<div class="container"><#Page></div>"
      • Use homepage (or possibly create global) footer
      • Name it "Global Layout 2024"
    • Assign (the new) homepage layout to the hidden homepage, and global to a hidden test page, to make sure it is working
    • If the site doesn't already have a Font Awesome Kit, create and add one (documentation)
    • Build the mockup in HTML, making sure works appropriately at all screen sizes
      • Zoom out too, it doesnt have to be fantastic, but the content should still be accessible, and the backgrounds should not cut off on the sides up to 4k screen pixel width.
      • If not on the bootstrap staging site, you can go ahead and use the new homepage layout on your mockup page in the next step
    • Purchase any stock images necessary
    • Make sure all the images and files related to the design are in the Redesign folder set up in their customer folder earlier
    • Make sure a favicon is made if needed and updated with with the new design
    • Makes sure img practices are in place:
      • loading="lazy" on all img tags (or eager in the header)
      • Widths or heights on all img tags
      • aspect-ratio on all img tags (documentation)
      • All image files are webp, sized, and otherwise optimized
    • Add all links where you possibly can (check old site for exisitng links, and use friendly urls when possible).
    • Cross Browser Check (you can check on physical devices you have access to, or use the cross browser testing)
      • Windows (chrome)
      • Mac (chrome)
      • Firefox
      • Safari
      • Edge
      • Android (chrome)
      • iPhone (safari)
    • Run Lighthouse and check score, optimize where possible (This is a good time to resize your images, convert to webp, add lazy loading, and add aspect-ratios, but there is a check for that later)
    • Record Lighthouse score for Mobile
    • Record Lighthouse score for Desktop
    • Run PagePilot Page Scanner on the homepage
      • Confirm no spelling errors
      • Confirm no HTML errors
  15. Once the HTML site is built in its entirety and checked, complete the task, and link both the new hidden homepage and test page to the coordinator.

    16. Coordinator

  16. In the "SEO Audit" task, link the two pages given by the design, and assign the task to the SEO team to audit the content. Make sure any customer changes to the content has been noted in the google document with all the content.

    17. SEO Dept

  17. SEO department runs their audit on the mockup, making sure content is satisfactory, in-text links are added (with their hrefs) and bolding/underlining is added.

    18. Coordinator

  18. Once the aduit is returned, pass it to the designer to make any appropriate changes.

    19. Designer

  19. Designer ensures that the design still looks good with the current optimizations. If something absolutely cannot be reworked, then designer can contact SEO to discuss potential changes.
  20. Once everything is optimized and tweaked, and SEO changes are approved, it is then given to design coordinator.

    21. Coordinator

  21. Double check that the SEO audit is satisfactory, and double check all the website is satisfactory.
  22. Contact customer for final approval of the HTML mockup, setting a date to go live (should give a few days for the designer to be able to prep for live)
  23. Assign the "Set Live" task to the designer with the date.

    24. Designer

  24. Prep for live (make sure all is ready before the date) (Time: 1 work day)
    • If your design is on the Bootstrap staging site, copy over all the html to the customer's site in a hidden page.
    • If the site's on bootstrap already, add your CSS, javascript, and other site options to each layout
      • Ideally the global layout only needs the CSS for the header and footer, and the ssButton. Not all the CSS from the homepage.
      • Make sure link color, and heading tags style are appropriate for global
    • Create social media Graphics (You can find the templates in the file server under "Graphics" > "Designers" > "social media graphics"):
      • Logo (name "2024 Redesign Logo")
      • OpenGraph (name "2024 Redesign OpenGraph")
      • Google (name "2024 Redesign Google")
      • Bing (name "2024 Redesign Bing")
      • Facebook (name "2024 Redesign Facebook")
    • Create Social media redesign graphic (You can find the templates in the file server under "Graphics" > "Designers" > "Social Media Announcements")
      • Welcome graphic (name "2024 Redesign Graphic")
    • All social media graphis should be added in the customer folder > "Graphics" > "Social Media" as both .png files and .psd files(if it's not there, create it)
      • Make sure to save the .psd of these graphics in the re
    • Check existing site for chat widget and others to make sure they're in the new design
    • Check and make sure every anchor tag has a link
    • Copy over titles and meta tags from existing homepage
    • Make sure all the images and files related to the design are in the Redesign folder set up in their customer folder earlier
    • Take a screenshot of the site, and add it as "2024 [company name] Design.png" in the file server "Graphics" > "Designers" > "Website Design Gallery"
  25. On date, set live
    • If site is not already on boostrap, go the site template tool (go to site template layout tool, and in the URL bar of the browser, change "/sitetemplatelayout" to "/sitetemplate"), and choose "Bootstrap"
    • Move hidden homepage to the top of the menu, right click and "set as homepage"
    • Disable old homepage
    • Set global layout to the whole site in layout assignments in the Site Template Layout tool
    • If the site was on foundation, make sure all the styles, javascript, and options are set in the homepage and global layout
    • Run PagePilot Page Scanner on the new homepage
      • Confirm no broken links
      • Confirm no broken images
      • Confirm no spelling errors
      • Confirm no HTML errors
    • Cross Browser Check (you can check on physical devices you have access to, or use the cross browser testing)
      • Windows (chrome)
      • Mac (chrome)
      • Firefox
      • Safari
      • Edge
      • Android (chrome)
      • iPhone (safari)
    • Record Lighthouse score for Mobile
    • Record Lighthouse score for Desktop
    • Take a screenshot of the site, and add it as "2024 [company name] Redesign.png" in the file server "Graphics" > "Designers" > "Website Design Gallery"
    • Move the design to "Done" in the Redesign Board
  26. Complete the "Set Live" task, and comment the coordinator that the site has been set live.

    27. Coordinator

  27. Do final site check
    • Make sure all links (not in-text links, but the buttons, footer links, etc) are set up and working
    • Make sure links to external sites have 'target="_blank"' on them
    • Check the site to make sure the designer didn't miss anything
    • Set the schema for the company with the new open graph image, and appropriate text.
    • Check homepage title
    • Check homepage description
    • Make sure all social media icons are set up
  28. Contact customer noting the redesign being set live
  29. Click "Design Finished" in the company's site, and close and make sure the ticket and its tasks are done/closed, and the basecamp checklist is all checked off.

The process ends when you finish the design, but a ticket is sent to customer support "Redesign Set Live - [company name] ([CID])", which is assigned to SEO to check.