← Back

Rebrand with Design System

Rebrand the McAfee Enterprise support sites (support portal, community forums, and agent portal) to align with brand guidelines for newly formed company.

Context:
McAfee’s enterprise business was sold to a private equity firm and merged with another enterprise security software company, FireEye, to form a new company, Trellix.

Objective:
Rebrand the McAfee Enterprise support sites (support portal, community forums, and agent portal) to align with brand guidelines for the newly formed company.

Timeline:
6 months

My Role:
Stakeholder and responsible for all aspects of the rebrand for all three sites

  • Project Manager
  • CX/UX/UI Designer
  • Content Editor
  • Web Developer – HTML/CSS
  • QA
Tools:
  • Adobe Creative Suite (XD, Dreamweaver, Photoshop, Illustrator, Acrobat)
  • Khoros
  • Zeplin
  • JIRA
  • Aisera
  • MS Office

Considerations and Challenges:

  • Merging the McAfee Enterprise and FireEye support sites is out of scope. The timing for this has not been determined.
  • IT/Development has contractors available to begin work immediately.
  • I am the only design resource and person familiar with the existing support sites and experience.
  • Limited set of brand guidelines
    • Guidelines covered logo, font, color, image, and icon for documents, emails and PowerPoints.
    • Marketing will be building out the guidelines and corporate site in parallel with the support rebrand.

Research and Planning:

  • Created an inventory list of site pages, assets, documents, tools, and apps to be rebranded for all three sites.
  • Based on the inventory list, developed a project plan with tasks, milestones, priority, owner/resource, dependencies, estimated time to complete the task, and notes.
    • Tasks were prioritized based on visibility (internal/external), dependencies, and time/resources required to complete.
    • The project plan was color-coded to highlight what could be implemented in two months to give the impression visually that the site had been rebranded based on a request from executives.
  • Built a reference library of UI layouts, colors, and elements from the Trellix promotional site.

Design and Define:

  • Based on atomic design, developed a design system.
  • Created low-fidelity mock-ups in Adobe XD for at least one page in each section of the site that had a unique layout or interaction.
    • The goal was to build out the design system and minimize UI variations in order to speed up development by ensuring code/styles could be reused.
    • Over 100 high-fidelity mock-ups were created.
  • Since I did not have the bandwidth to create UI specifications and could not use XD to share specifications due to network security, Zeplin was used.
  • For the support portal, two stories and an epic were created in JIRA to define requirements and reviewed with the development team.
    • Story 1 included requirements for shared UI elements and styles (e.g., fonts, font sizes, colors, buttons, links, and icons), header, footer and page templates.
      • This story was the quickest way for me to give work to the development team.
    • Story 2 was an epic containing stories for each section of the support portal.
      • As a section was completed, requirements and mock-ups were handed off to development to begin work.
      • I also referenced other sections/stories when similar UI elements/interactions were used to push code reuse and save time/effort.
    • Story 3 addressed one-off pages such as 404 and 500 error pages.
  • For the community, JIRA stories were created for login, forgot password and registration pages since these were part of single sign-on (SSO) and managed by IT/development.
    • I was responsible for rebranding the remainder of the community site and updating content in Khoros.
  • Since most of the agent portal was internally facing and both myself and development had limited bandwidth, a single JIRA story was created for the login and forgot password pages that were accessible externally.
    • A second JIRA story was created for the logged-in pages, which would be picked up after the initial release.

Development, Testing and Implementation:

  • Scheduled stand-up meetings with the development team twice a week to discuss the status and review work in progress or completed.
  • Tested and accepted user stories in the staging environment.
  • Made UI and content updates in the portal CMS and Khoros.
  • Edited and rebranded support guides and handbooks available for download from the support site.

Post-implementation:

  • Served as the point of contact for issues resulting from the domain change.
  • Prioritized defects for development and completed content updates in the portal CMS and Khoros.

Rebranded sites: