Custom Theme Process Overview

Initial Request

Interactive Design has built and maintained Boston University’s websites for years—often refreshing them every 4–5 years so that they can stay relevant. We work closely with many experts, inside and outside of Creative Services, throughout these custom theme projects.

A foundation, college, department, student group, or individual of BU becomes our client when they contact us through Creative Services’ Account Management department.

Our best work happens when we see the client relationship as a partnership.

Scoping and Prioritization

After the initial ticket request, a project manager gathers initial key stakeholders and some early team members to define the project scope, estimate hours, set priorities, and fit it into the schedule amid resourcing.

Supervisor creative directors handle bigger estimates and project timing. For small projects, the project manager may ask a prospective lead designer for a rough time estimate. The project manager then assigns the tasks, sets schedules, and ensures projects stay on time and budget!

If a designer or developer are unsure about taking on a request, it’s okay to ask to regroup with the team early in the workflow.

Work Begins!

Once the scope, timeline, and team are set: work starts after the project manager sets up a project on our ActiveCollab platform.

Depending on the project, we may occasionally work with teams outside of Marketing & Communications [MarCom]—like BU’s IS&T and sometimes outside vendors like 10Up and TargetX.

Understanding roles and responsibilities and who to involve is crucial. A typical I.D. web project team consists of:

• Creative Direction [an ACD or CD]
• Design & Front-End Development [a Designer]
• Backend Development [a Dev]
• Content [a Content Manager]
• Project Management & Planning [a PM]
• Account Management [an AE]
• Strategy [a Strategist, Analytics, and/or SEO Specialist]

Custom Theme Process

Intake Phase

Initial discussions regarding the needs of the project, its business objectives, and requirements (including budget constraints) happen during this time.

1. Initial Intake: account executive and/or a project manager are notified about a new project work order via a ticket from ServiceNow.
2. Client Information: Background information is then gathered by the account executive from the client—either through a meeting (or series of meetings), or by providing the client with a Web Project Intake Form.
3. Internal Meetings: The account executive then has initial, internal meetings with the project manager to discuss initial estimates and resources that will be needed for the strategy and estimation, and planning phases.

Key Stakeholders

• Key stakeholders of Creative Services and MarCom become involved in presentations for approvals. Assistant Director of Account Management Lisa Bernier-Moulton is consulted to advise on stakeholders to be involved.

Strategy & Planning Phase

A big project requires greater strategy, estimation, and planning.

(Smaller theme aspects or component asks will likely sidestep some or all of these phases aspects with a project manager seeking a creative director or lead designer to estimate so a smaller work order can be drafted.)

Strategy

• Current website assessed for content, data, SEO, and functionality audits
• Strategy identifies content gaps, organizational issues, and custom functionalities aligned with client needs.
• Strategist and account executive present findings and recommendations to the client, including a site map and any relevant information architecture [IA].
• A statement of work [SOW] is drafted during this phase [in tandem with the aforementioned] by the account executive and creative director. It’s then proposed for client sign-off following content, analytics, SEO findings, and recommendations presentation to key stakeholders of Creative Services and MarCom and the client.

Estimation & Planning

• Depending on what’s needed for the project: a project manager gathers either a creative director and/or a designer to determine an estimation of implementation phase deliverables using a copy of the Brock-O-Tron. The group engages with the dev director and a developer for any extremely complex deliverables. Investigation and research into possibly relevant, external IS&T web apps that may be involved occur during this time.
• Scoping from the statement of work, coupled with the outcomes from estimation helps the project manager set up a schedule with SmartSheet. Meetings among relevant team members throughout are scheduled by the project manager. They’re followed throughout the project [using a client release model] for client meeting presentations and [a sprint model] for implementation.
• A project kick-off with client happens with all resourced members of the project team attending.
• Lead designer works with the creative director to determine [depending on the project] what wireframes to create using the relevant I.D.’s wireframe template files.
• Wireframes are created by the designer and then submitted to the creative director for internal alignment and sign-off. Completed wireframes are uploaded to a webteam space set up by the designer for the client to access. It’s updated prior to each round of client release presentations at the approval of the creative director, account executive, and project manager.
• Following Client presentation, and their approval (to the account executive) of Wireframes: the creative director saves a copy of the Content Org Guide [renaming it to its Project Title in ActiveCollab] and [in collaboration with the designer] determines what WordPress or I.D. custom page templates, post types, plugins, or widgets may solve for what needs that are aligned with the aforementioned wireframes, strategic findings, and recommendations.
• The project’s content org guide is then passed to the content manager ahead of the Implementation process to ensure consistency and efficiency as they assist and advise with the client in content creation and application.

Implementation Phase

Implementation Planning + Responsibilities

Design

• Lead designer submits styleboards to the project’s creative director for review [using the creative review needed form] for feedback and revisions, and to establish and present design recommendations in the form of color palette, possible concept, brand keywords, etc.
• Lead designer considers:
  • What does the design need to innovate on?
  • What limitations are there?
  • Is there anything the client or their prospective audience doesn’t want?
  • How best can the aspects they do want be conveyed?
  • Are there any motifs or traits of competitors that can either be leveraged or innovated upon?
• In a client meeting (which may include key stakeholders), the lead designer presents all deliverables. Each deliverable is then iterated with feedback until a final approval is provided by the client to the account executive.
• Following styleboard approval, the creative director and designer decide on a wireframe flow(s) to mockup as well as any components or aspects that require a client’s purview and a similar process from the top of this phase for styleboards is repeated for mockups. Mockups are executed for desktop, with any mobile mockups created if pertinent to be conveyed—even if only for designers’ reference later in development.
• Following mockup approval, a GitHub repository is initialized by request of the creative director from the latest version of responsive child starter by the projects developer.
• The new repository’s readme and GitHub Project issues are set up by the creative director. This entails:
  • Defining readme details.
  • Pruning any irrelevant issues not scoped.
  • Adding estimated hours to each aspect.
  • Milestones are set to align with the project’s SmartSheet schedule dates (as shared by the project manager from the Estimation & Planning phase).
• Within the new repository a designer:
  • edits, updates, and includes approved Business Requirements, approved Mockups, and any other relevant Additional Details to coordinate themselves, the project developer, and creative director.
  • Adjusting labels based on the status of an issue deliverable.
• The developer should also contribute to the repository where applicable, and raise any questions or conflicts as soon as possible.

Development/Production

• Style [front-end] and functional [back-end] development begins as the site is built based on approved designs and specs included in the finalized GitHub Project issues.
• A staging site is requested by the project manager, using a [cloned] copy of the existing production site (if a redesign). When we put in a request for a staging site [that’s not a clone], we should include the BU Calendar ID: The ID can be found in a couple of locations, but the easiest is to get it from the `BU Calendar` tab within the live/production site’s admin. Marsh Chapel’s site for example.
• Content manager is provided access to the staging site to align and verify any content migration during the aforementioned process. This staging site is where the content manager and client will collaborate on content creation and revisions and where code that’s being developed will be applied, using deploys.
• Client is notified and provided access to the staging site for new content entry. Content manager supports and advises the client in content creation and editing using best practices for content entry to align their goals with proper content formatting of pages, per the project Content Org Guide.
• Alongside the aforementioned steps, the designer clones a copy of either the root documentation site (or, if this project’s a redesign: the client’s existing documentation site).
• Designer applies the new theme design in development to the new documentation site—editing it for concise navigation.
• Designer assigns themselves to GitHub issues as they work on specific aspects, adjusting labels based on the status of an issue deliverable, submitting dev work in pull requests on GitHub for required code reviews by their fellow I.D. employees. Designer records and documents any advanced aspects, plugins added to, or created for, the theme. (To save time: designer is encouraged to adapt and edit any existing aspects of  documentation of existing custom plugins.)
• Following each successful merge of approved code, the designer or developer creates a release for a deploy with appropriate version numbers in pursuit of closing each client release milestone in the GitHub repository.
• An editor or proofreader reviews client-facing documentation and key areas of the site (if requested) for concise messaging and punctuation before client trainings and content check-ins.
• A presentation’s held with the client after all milestones have been completed to present and review the development.

Quality Assurance [QA], Editorial/Proofreading

• Designer brings in one of their fellow employees for one last test of the site and theme for quality assurance, ensuring it renders properly, and passes browser testing and minimum accessibility checks.
• An editor or proofreader reviews completed client-facing documentation and (if requested or part of scope) key areas of the site for concise messaging and punctuation before client trainings and content check-ins.
• Analytics & SEO are implemented by digital content & strategy to the staging site.
• Project manager or creative director requests a broken link report from IS&T.

Client Review

• If scheduled, a designer will walk the client through any complex custom theme functionality (beyond IS&T’s WordPress training) with the support of the creative director in a scheduled meeting.
• The client reviews the staging site alongside key stakeholders.
• Client either provides feedback and edits for final revisions or grants approval to launch.
• (If needed) final edits are made (depending on the type of edit) by either the content manager, editor or designer, and/or developer based on client feedback.

Launch!

• Project manager [avoiding Fridays for launches] submits a launch request ticket to IS&T via ServiceNow.
• Project manager or account executive notifies the client and internal team members once the site is live.
• The creative director sends a link to the new site to key stakeholders and the project team.
• I.D.’s Creative Director Jon Brousseau sends out an announcement of the launch with thanks.

Support

• Project manager schedules a post-launch review with the client and content management to gauge response. Analytics & SEO also provide training.
• Any post-launch bugs reported through ServiceNow are either handled [non-billable] by the designer and/or developer.

Smaller Projects

For a plugin, editorial feature article design, or aspect of a theme design, the above project process would be severely abbreviated and may not include all team members listed. See below for similar processes:

Custom Editorial Project’s