Niq's OA Resources
Start-up Process
Last Updated: 03/24/2026
- Content First
- Sign-up comes in
- Email them, schedule first meeting
- First meeting
- Gather info and resources about company
- Fill out customer hub
- Get/check content
- Get the startup document to content team to get their content together
- Fill out startup document with content, send back to Customer Support Rep
- Assign document to Design Coordinator
- 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
- 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
- Assign the "Design Mockup" task to the graphics dept
- Design Mockup
- Visit customer’s exiting website, and material provided for the customer's branding
- Check company's competitors to make sure your design is not the same
- 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) - In Figma, create a new design file under "Drafts", name the file "[company name] 2026 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
- Design Mockup accordingly (Desktop & Mobile versions of both the homepage and subpage):
- 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
- Company Logo
- Phone Number
- Menu
- H1
- CTA (At least one obvious button like "Schedule Service")
- Create sections according to design document
- Primary Services should be close to the top
- Each section does not have to be full width
- Check that sesonal sections are designed accordingly (Outside the file should be a mockup of what other seasons should look like)
- 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)
- Company Logo
- Phone Number
- Menu
- Page Title
- CTA (At least one obvious button like "Schedule Service")
- ssButton
- CTA Bar
- Service Boxes
- Wide CTA Bar
- Bullet List
- FAQ
- (optional) section headings
- Make sure to check what blocks are marked as global in the design doc, and include them.
- 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
- Design Audit
- 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
- Check the figma file, and compare it to the design document. Make sure the points and sections were appropriately made, and critique elements of the design to bring them to the desire of the customer, and see any minor flaws or suggestions are fixed or made.
- 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).
- Design Changes
- Double check the design audit and make sure all the points presented were appropriately addressed
- 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.
- From the '4. Design Changes' task, make adjustment to the mockup as listed. There will most likely be back-and-forth, since customer input and changes will happen.
- Make sure customer changes are noted in the task, not just verbally talked about, or on slack.
- Once customer has final approval, assign the "build HTML" task to the design team.
- HTML Build
- Create and add a Font Awesome Kit (documentation)
- Check if site needs to be switched to bootstrap, and do so if needed.
- Make sure to save the layout options in the Site Template Layout before start building so the bootstrap CSS is compiled
- Add some styles to the body to makes sure the font behaves like figma, and that the text has the font family and colors from the design:
- When making the hero section, preload the background image using this code:
- If the hero background has a desktop and mobile image, do this twice: one for both image versions
- 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
- In the Site Template Layout Tool, make a new layout titled "2026 Global Layout" that consists of:
- A "2026 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 "2026 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.
- 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 Google PageSpeed Insights 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.
- UIUX Audit
- In the "6. Design UIUX Audit" task, link the homepage and test subpage, and link the base figma file. Make an @ comment to the auditor, and assign the task to them.
- Compare the HTML build to the figma file, checking desktop then mobile. Making note of discrepancies, try to note where it can be as close as possible, but apply reason.
- Check the in-between sizes, while they weren't mocked up, it is good to make sure the sections still look good on every size, the content flows appropriately, etc.
- Repeat for the subpage layout
- Comment notes back to the coordinator
- Once the audit is returned, pass it to the designer to make any appropriate changes.
- Make changes as possible according the notes of the auditor. Reach out for clarification or help.
- Reassign to coordinator when done, with any notes of non-changes with reasoning, or just that they're complete
- SEO Audit
- 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.
- 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.
- Once the audit is returned, pass it to the designer to make any appropriate changes.
- 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.
- Follow the Requirements listed in the audit, making sure to change what you can, or explain why it can't or isn't the way they said it should be.
- Look over the Comments/Concerns section. Do not make notes if you do or don't do them, but make sure to look over them, consider them, and apply what makes sense.
- Once everything is optimized and tweaked, and SEO changes are approved, it is then given to design coordinator and marked as complete.
- Double check that the SEO audit is satisfactory, and double check all the website is satisfactory.
- 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)
- Assign the "Live Prep" task to the designer with the date, having contacted them to find the date suitable for that
- Going Live
- 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 your homepage section are in content blocks
- 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 "2026 Startup Logo")
- OpenGraph (name "2026 Startup OpenGraph")
- Google (name "2026 Startup Google")
- Bing (name "2026 Startup Bing")
- Facebook (name "2026 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 "2026 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)
- Check some of the common subpages, like contact us, about, schedule, etc. to make sure they work. And make sure list tags, paragraph, heading, table tags all are inheriting styles.
- Take a screenshot of the site, and add it as "2026 [company name] Design.png" in the file server "Graphics" > "Designers" > "Website Design Gallery"
- 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
- Assign the design task to Customer Support Rep, noting anything important that needs to be communicated
- Set live
Customer Support Rep
SEO Dept
Customer Support Rep
Coordinator
(Time Anticipated: 40 work hours or less)
Designer/Coder
Use company branding!
Homepage
Header & Hero Section
Body
Footer
Global Layout
Header
Subpage Elements
Footer
Once the mockup is built in figma, post 4 figma preview links (for homepage/global, desktop/mobile) in a comment on the design task, @'ing the coordinator, then assign it to them.
Coordinator
Auditor
Designer
Coordinator
Designer
Coordinator
(Time: 40 work hours or less)
Designer/Coder
Hompage Layout
Create Global Layout
Final Housekeeping
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.
Coordinator
Auditor
Coordinator
Designer
Coordinator
SEO Dept
Coordinator
Designer
Coordinator
(Time: 1 Work Day)
Designer
Comment @ the coordinator in the task that the site is ready to go live, and assign the task to them.