ABCBS Design / Dev Flow

• When to use
• Task management
• Roles
• 1. Content collection
• 2. Sitemapping / User flow
• 3. Wireframing
• 4. High Res mockups
• 5. UX / A11Y Check
• 6. Requester review / revisions
• 7. Generate Style library
• Coding
• Prelaunch tasks
• Prelaunch tasks
• Launch

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

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.

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.

Sitemap example

---

Reviewers

• 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

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)

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.

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

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.

---

Example: https://healthadvantage-hmo.com/style-guide

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.

Design review

Design review, the main design checks over the coded site to make sure the developer has followed the design / style library

Prelaunch tasks

1. Run through our front-end checklist
2. Seo tags / features
3. Project manager review
4. Product owner review

Site launch check

1. Check domains, naked url, www, http, https
2. Analytics installed
3. More