Niq's OA Resources

Start-up Process

Last Updated: 02/07/2025

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 Coordinator

    7. Coordinator

  7. Schedule meeting and contact customer
    • Fill out design portion of startup document
      • Get design wants
      • References to things they like
      • Anything else once that document gets reworked
    • Get all design materials the company has
      • Logos (high res, preferably svg/ai files of the logo
      • Any branding material, like a design guide
      • Any additional design material, like brochures, postcards, etc.
      • Pictures!!! Pictures of their van(s), team, owner, etc. These are instrumental for the website
  8. Create the task attached to the primary ticket for the Startup:
    Additional changes may require additional tasks down the line
    • Design Mockup
    • Design Audit
    • Design Changes
    • Build HTML
    • SEO audit
    • Live Prep
  9. Assign the "Design Mockup" task to the graphics dept

    10. Designer

  10. Create a figma mockup of the homepage design (Time: 40 work hours or less)
      11. 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] 2025 Design Mockup"
      • Use the figma design template to as a reference of screen sizes required (1920px wide) with other tools, including what sections to design for on the global layout
    5. Design Mockup accordingly (Desktop & Mobile versions of both the homepage and subpage):
        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
        • Homepage
        Header & Hero Section
      • Company Logo
      • Phone Number
      • Menu
      • H1
      • CTA (At least one obvious button like "Schedule Service")
        • 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)
        • Global Layout
        Header
      • Company Logo
      • Phone Number
      • Menu
      • Page Title
      • CTA (At least one obvious button like "Schedule Service")
        • Subpage Elements
      • ssButton
      • CTA Bar
      • Service Boxes
      • Wide CTA Bar
      • Bullet List
      • FAQ
      • (optional) section headings
        • Footer
      • Same points for the homepage footer, majority of the time, it's the same footer, but if you want a unique subpage one, look for the same above points
  11. Once the mockup is built in figma, post a figma link to the coordinator, and have them send the design audit task to the design auditor.

    12. Coordinator

  12. 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. Make sure the link has the subpage design on it

    13. Designer

  13. 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. Also if it hasn't been shared already, make sure a preview link to the figma mockup, both the desktop and mobile are on the task (the global layout is not needed).

    14. Coordinator

  14. Double check the design audit and make sure all the points presented were appropriately addressed
  15. Design coordinator gets approval from customer then hands it to designer.
    • 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 is that designer is unavailable.
    • Any changes to the content given in the google document should be noted if the customer changed/removed any of it.
  16. Once customer has final approval, assign the "build HTML" task to the design team.

    17. Designer

  17. Once approved to build, build the homepage in HTML (Time: 40 work hours or less)
    • Create and add a Font Awesome Kit (documentation)
    • Switch the site from foundation to bootstrap, and make sure to save the layout before start building so the bootstrap CSS is compiled
    • I would advise adding this CSS to both the homepage and global layout. I makes the font behave more like it does in figma: html body{-webkit-font-smoothing:antialiased;}
      • 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 doesn't have to be fantastic, but the content should still be accessible, and the backgrounds should not cut off on the sizes up to 4k, and the content should stay away from the sides of the pages.
    • Purchase any stock images necessary
    • Make sure all the images and files related to the design are in the design folder set up in their customer folder earlier
    • 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
      Create Global Layout
    • In the Site Template Layout Tool, make a new layout titled "2025 Global Layout" that consists of:
      • A "2025 Global Header" block, with the content block for that
      • A "Global Body" Block that is the page tag surrounded in a container (<div class="container"><#Page></div>}
      • A "2025 Global Footer" block, with the content block for that
    • Assign that layout globally
    • Create a new page for the global design test page. (You can copy the tags from here)
    • Design the page according to the mockup.
      • Final Housekeeping
    • Make sure the design is as faithful to the mockup as possible. If there are struggles getting it close in some areas, reach out to your supervisor.
    • Make sure a favicon is made
    • Cross Browser Check the homepage (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 homepage design, take care of any further optimizations that you can
    • Make sure all the images and files related to the design are in the Graphics folder set up in their customer folder earlier
  18. Once the HTML site is built in its entirety and checked, comment @ the coordinator with a link to the homepage and the test subpage, and assign the task to them.

    19. Coordinator

  19. In the "SEO Audit" task, link the homepage and test subpage, 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.

    20. SEO Dept

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

    21. Coordinator

  21. Once the audit is returned, pass it to the designer to make any appropriate changes.

    22. Designer

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

    24. Coordinator

  24. Double check that the SEO audit is satisfactory, and double check all the website is satisfactory.
  25. 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)
  26. Assign the "Live Prep" task to the designer with the date, having contacted them to find the date suitable for that

    27. Designer

  27. 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 in the Site Template Layout
      • Make sure there are settings for the headings and links in the STL for the global layout
    • 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 "2025 Startup Logo")
      • OpenGraph (name "2025 Startup OpenGraph")
      • Google (name "2025 Startup Google")
      • Bing (name "2025 Startup Bing")
      • Facebook (name "2025 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 "2025 Startup Welcome Graphic")
    • All social media graphics should be added in the customer folder > "Graphics" > "Social Media" as both .png files and .psd files (if it's not there, create it)
    • 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 "2025 [company name] Design.png" in the file server "Graphics" > "Designers" > "Website Design Gallery"
  28. Comment @ the coordinator in the task that the site is ready to go live, and assign the task to them.

    29. Coordinator

  29. 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
  30. Assign the design task to Customer Support Rep, noting anything important that needs to be communicated
  31. Set live