Niq's OA Resources

Start-up Process

Last Updated: 06/13/2024

Back
  1. Sign-up comes in

    2. Customer Support Rep

  2. Email them, schedule first meeting
  3. First meeting
    • Gather info and resources about company
    • Fill out customer hub
    • Get/check content
  4. Get the startup document to content team to get their content together

    5. SEO Dept

  5. Fill out startup document with content, send back to Customer Support Rep

    6. Customer Support Rep

  6. Assign document to Design Dept, with what the customer wants in it.

    7. Designer

  7. Create a figma mockup of the homepage design (Time: 40 work hours or less)
      8. Design Mockup
    1. Visit customer’s exiting website, and material provided for the customer's branding
    2. Check company's competitors to make sure your design is not the same
    3. In the file server, under "Customers" > "Customer Files", if there is not one already, make a folder called "[company name] [CID]", in there, create a new folder, title it "Graphics"
      (Any graphics you get/use/purchase should be copied into this folder)
    4. In Figma, create a new design file under "Drafts", name the file "[company name] 2024 Design Mockup"
    5. Design Mockup accordingly (Both a desktop and mobile version):
        6. 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. Create a task for the Design auditor to check the design, once returned, make the necessary changes, and comment @ the auditor noting the changes.
  9. While the design is being audited, you can start building the global layout on the website.
    10. Create Global Layout
  10. This can be done while the Auditor is checking the design. Begin building the global layout in the site. (So the site has some design elements when the customer support rep is going over the content with the customer).
    • Create and add a Font Awesome Kit (documentation)
    • Create Header block
      You can usually use the design of the homepage header, but it might have to be different, and there are components you must have:
      • 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>"
    • Create Footer block
      Usually the footer in the homepage is the same usually globally, but you might have to tweak it.
    • Create global layout with these blocks, and assign it globally on the site.
  11. Once the layout is created and assigned, assign the design task to the customer support rep with links to a customer presenting desktop and mobile version of the mockup

    12. Customer Support Rep

  12. Cusomter Support Rep gets approval from the customer of the design, and go back and forth with changes.
  13. Once the Customer Support Rep gets final approval from the customer they send the task back to the Designer to let them know to start building the design in HTML
  14. Customer Support Rep will go through the site with the customer at a later point making sure the subpages are in place

    15. Designer

  15. Once approved to build, build the homepage in HTML (Time: 40 work hours or less)
    • Establish Homepage layout
        • 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"
    • Build the mockup in HTML using the existing homepage, 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 sizes up to 4k.
    • Purchase any stock images necessary
    • Make sure all the images and files related to the design are in the Deisgn folder set up in their customer folder earlier
    • Make sure a favicon is made
    • 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
    • Update the global layout to reflect the changes made to the homepage design
    • 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 PagePilot Page Scanner on the homepage
      • Confirm no spelling errors
      • Confirm no HTML errors
    • Run lighthouse for mobile on your design, take care of any further optimizations that you can
  16. Once the HTML is built completely and checked, create a "SEO Audit" task under the parent ticket, and assign it to the Products and Business Dept with a link to the temp domain of the website.

    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. Designer

  18. Proceed with the changes from the SEO dept, several back and forth will have to happen with the dept to make sure the changes are satasfactory.
  19. Once everything is optimized and tweaked, and SEO changes are approved, the SEO Audit task is marked as complete, and the design task gets sent back to the Customer Support Rep to get final approval from the customer.

    20. Customer Support Rep

  20. The customer support rep shares the website with the customer to get the final approval, once the customer does, the task gets sent back to the designer, letting them know to prep the site to go live.

    21. Designer

  21. Prep for live (Time: 1 Work Day)
    • Make sure your global layout is updated to reflect any design changes, and homepage layout is also established
    • Add your CSS, javascript, and other site options to each layout
      • If you can, avoid adding all the additional CSS for the homepage to the global layout, ideally it should just be your header and footer styles, and the ssButton.
      • Make sure there are settings for the headings and links
    • Double check there is the ssButton class available in the global layout
    • Create social media Graphics (You can find the templates in the file server under "Graphics" > "Designers" > "social media graphics"):
      • Logo (name "2024 Startup Logo")
      • OpenGraph (name "2024 Startup OpenGraph")
      • Google (name "2024 Startup Google")
      • Bing (name "2024 Startup Bing")
      • Facebook (name "2024 Startup Facebook")
    • Create Social media welcome graphic (You can find the templates in the file server under "Graphics" > "Designers" > "Social Media Announcements")
      • Welcome graphic (name "2024 Startup Welcome 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 all the images and files related to the design are in the Graphics folder set up in their customer folder earlier
    • Subpage cleanup:
      • Add hours to customer's Contact Us page
      • Add google map embed to Contact Us page
      • Delete toll free number from Contact Us page if not used
      • Organize pages and folder, deleting content the customer does not serve
    • 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] Design.png" in the file server "Graphics" > "Designers" > "Website Design Gallery"
  22. Once the prep is ready, comment @ the customer support rep that the site is ready to go live, and mark the design task as complete.

    23. Customer Support Rep

  23. Perform final audits
  24. Set live