1. Goal identification, scope, and project kickoff
NEW Websites:
Who is the primary audience?
What is its primary purpose?
What goals does the new website need to fulfill?
It may be useful to write out one or more clearly identified goals, or a one-paragraph summary of the expected aims.
How much research has been done? Is there data available?
How do we measure success?
EXISTING Websites:
Who is the primary audience?
What problem are users experiencing? What do you know about the problem? What do you not know about the problem?
How much research has been done? Is there data available?
How do we measure success?
Who are the key stakeholders/ decision makers?
What is the project completion date?
Which platforms and technologies?
State template?
Bootstrap?
NPM?
React?
Data integration
.NET?
CMS?
Forms processing (Data Collection Processing)?
Define what teams/units might be involved
User Experience Research/ Design?
DevOps?
Data Engineering?
Software Development?
CAWeb?
C/CMS?
2. Design
In this stage you need to work with a UX designer, UX researcher, content designer, etc.
Build homepage's section and content elements keeping you framework and template constraints in mind
Build inside pages and other content elements
Create sitemaps (identify all inside pages and how user will get there (links))
Use Adobe XD or Figma for wireframing
3. Content creation
- Content designer needs to populate wireframe sections with legitimate content
5. Visual inventory and design system
Do visual research (look for the images and illustrations that might associate and support your website purpose and goals). You can use our gettyimages.com account to explore possible images and illustrations.
Pick accessible color schemes (you can use existing State Template color schemes or generate your own. THis accessible palette color builder could be handy https://toolness.github.io/accessible-color-matrix/.
Design/find icons or infographics if necessary.
Identify typography (headers fonts) that would go in line with the site's purpose and goals if necessary, otherwise use State template's typography.
6. High fidelity prototypes.
Design high fidelity prototypes using final visuals, typography and content. Use Adobe XD or in Figma, When designing web pages keep in mind technology frameworks or state template constraints. Always communicate with project web developers and engineers about the feasibility of your design.
Make sure you create the creative library of your project typography, colors and major components inside the Figma or Adobe XD along the way.
7. Review and test, make the adjustments
Review high fidelity prototypes with stakeholders and get feedback from your target audience.
Make necessary adjustments based on user feedback.
8. Web development and engineering
Start developing a website by using your chosen framework.
Make sure that major website sections such as utility header, branding, navigation, site footer and set up as reusable web components.
Use as less server request as possible to boost your site's performance
Use CDN for the core css and js files if necessary
Make sure your code/web element is accessible from the early development stages
Always develop mobile first
Test your site locally (Set up Docker, npm, or .net local servers if necessary)
Accessibility along with tools to use enhancing every Website’s a11y
9. User testing, accessibility testing and Launch
Set up repository either in GitHub or in CalEnterprise and make initial commit
Work with DevOps unit to setup your web services, hosting needs and the pipelines
Make sure you have staging and production environments.
Thoroughly test each page to make sure all links are working and that the website loads properly on all devices and browsers.
Add your staging and production site to SiteImprove and do manual a11y testing.
When everything has been thoroughly tested, and you’re happy with the site, it’s time to launch.
Want to print your doc? This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (