When to use this workflow
- New sites
- Redesigns of existing sites
- Reworks of site sections (ABCBS Employers or Member pages)
- Very unique marketing pages
Task management
- A service now request should be made by the requester (if coming from outside our teams).
- An Asana project is created for the new sites / major design change.
- Then in that Asana project Tasks for each stage of the workflow is made.
Roles
- Requester
- Project manager
- Designer
- Accessability Reviewer
- Developer
Roles involved: Project manager / Requester
1. Content collection
New sites
Gather content from the requester.
Existing sites
Gather existing content, plus get any new content and changes to existing content.
We do not want to get caught up in design details or how we requester wants the site to look.
Roles involved: Project manager / Designer or Developer / Requester
2. Sitemapping / User flow
Here we will take the content from the provided in step one and map out the sitemap. This may also look at how the current site or even mirror the current site.
Reviewers
- Requester
Roles involved: Project manager / Designer / Requester
3. Wireframing
In wireframing we want to be thinking about the general page layout / content flow. Avoid colors and images.
Focus areas
- What kind of sections will there be (Hero banners, callouts, sub banner, content areas)
- How would users visually / keyboard navigate the page
Reviewers
- Project manager
- Requester
Roles involved: Project manager / Designer / Developer
4. High res mockups
Here is where we start thinking about the colors and full page design.
Additional things
- Light / Dark / High contrast themes
- Animations / UX interactions
Reviewers
- Project manager
- Developer (mainly for making sure things are possible and for accessability checking)
Roles involved: Designer / Developer
5. UX / A11Y Checkup
Once the design is finished we need to check it over and make sure that colors, font sizes, line heights, etc are meeting WCAG 2.1 AA guidelines.
Roles involved:Project manager / Designer / Requester
6.Requester review / revisions
Send to the requester to review and make revisions accordingly (We do need to make sure that the requesters changes aren't thing that would cause usability and accessibility issues).
Roles involved: Designer / Developer
Generate a style library
ThThis is where the designer will hand off files and the developer will take over.
The developer will inventory the design mockups. Find all of the colors, typography styles, buttons/links styles, repeated modules, etc. Then we take all of these things and generate a style library.
Roles involved: Developer / Designer / Project manager
Coding
After the style library is created the developer will start working through the different mockups and coding them.
This may require some back and forth with the designer and project manager if additional assets or changes need to be made.
Roles involved: Developer / Designer / Project manager
Design review
Design review, the main design checks over the coded site to make sure the developer has followed the design / style library
Roles involved: Everyone
Prelaunch tasks
- Run through our front-end checklist
- Seo tags / features
- Project manager review
- Product owner review
Roles involved: Everyone
Site launch check
- Check domains, naked url, www, http, https
- Analytics installed
- More