Share
Explore

Web design checklist

Headings you add to this page will appear here.
Use this guide for any digital asset that needs tracking and development.


1. Stakeholder questions + requirements

Make sure you work with the stakeholder on collecting everything you may need for this project. Fore more details on questions, click
here
.


2. Establish due dates with project manager

Make sure you understand what the due date is for the final design deliverable, in addition to creating a deadline for the first draft feedback.


3. Competitive + inspiration research

Before beginning on designs make sure you spend time researching ideas while following the design system guidelines. View guidelines
here
.

Content will provide you finalized, approved content prior to beginning first draft.


4. Design a first draft mockup (desktop and mobile)

Design a first draft using the design system principles for both desktop and mobile devices. Make sure to follow the
documented in RDS for each device.

Make sure you collaborate with content, SEO and development on any technical needs. Content and SEO will finalize content prior to tagging you in the project parent ticket for you to begin. Check the project parent ticket for updates or wait until you are tagged for an update.


5. Tag the XD doc for the component variable

Use the RDS component name in the comments of the XD link to notate each "component" for data layer tagging so we can better track each component. Visit the component name listed
.

Example:
component name: Card-degree


6. Provide XD doc to content team for approval

Once design is completed please tag the copywriter in the parent ticket (you can see who the copywriter is from the child tickets) for them to review the design
AND
send them a slack with the XD link to alert them its ready for their review an approval.

Ask for a quick turnaround if possible to keep the project within the timeline.


7. Share with stakeholder for feedback

Content will then tag you once they have reviewed and provided edits.

Once approved move forward and get stakeholder approval. Tag the stakeholder (if they are in Jira)
AND
slack the stakeholder for approval/review.


8. Prepare assets with animation/micro-animation examples

Make sure all assets are exportable in XD:
Images should be optimized and cropped and placed in a folder with .jpg files.
.
All content should be in the XD link or within a folder and packaged for development.
Hover states are represented or documented, and any additional animations such as sticky navigations/footers or modals are clearly distinguished.


9.
Hand off XD to data and SEO (in JIRA parent ticket)

Once stakeholder and content approves, and the package of assets including the XD doc is ready, then tag Data + SEO (see who the data and SEO person is from the child tickets) in the parent ticket in Jira
AND
slack them that the XD doc is finalized with the XD link.

The data and SEO teams will be responsible for tagging development once the requirements are finished to alert them that it's ready for development. If you have content outside of the XD doc make sure that is posted to the
dev ticket.


10. Add XD link to the XD repository

Use the link below to add your XD links to the documentation for future reference or in the XD slack channel.


11. Design QA - create a google doc with all design QA changes

Create a google doc with all design QA changes so its in one place for the development team and does not get lost in the Jira comments. Make sure to QA Desktop, tablet and mobile.



12. Communicate any changes with development, QA, and data team.

If any changes happen mid development, make sure each team is fully aware as it may impact the work they have already completed. If content makes changes we will also need to update it to the XD doc.


13. Create heatmap/user recordings

Once development launches, check launched page once more and then create a heatmap/start recordings in Hotjar.

Share
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.