Design Systems

Leveraging the existing icons colors, scale and layout, were used to differentiate the information they represented; blue for key benefits and grey for resources that could be downloaded. Set up as components in the design system, it made for a very flexible module of varying numbers of benefits/resources.

Developing a color palette took from existing brand colors with a few minor adjustments. The 12-column, 1170px grid with 30px gutters was decided on based on its flexibility to be used with already existing frameworks like Bootstrap. The developers made the announcement Zeplin would be used. From a coding perspective, this saved us all time as Zeplin pulls the style guide from the Sketch files converting it to code. This way I could also focus on the branding and design.

Initially designed for a parallax scroll for what was once called "Thought Leadership", this module became a case study section. CA Tech has a vast amount of case studies for each of their products. The top image shows a mockup for the homepage that would still have parallax scrolling while the bottom mockup was for the category, subcategory and product page.

The thinking behind this decision was for the homepage to be able to draw the user into wanting to know more about one of the most successful product lines for the company. Once the user was two to four clicks into the APIM journey on the website, the static approach would make it an easier way to scroll through information, instead of having to wait for it to parallax scroll through all three case studies and move on to the next section.

Atlassian and InVision were both prime examples of a highly developed and branded direction to illustration. Both companies reinforced their brand through color while communicating what is at the core of their service or product i.e.; helping teams work together – more efficiently.

The illustrations focus on the kind of teams they help and hint at how. Appropriate text relating to the illustration is flowed in while depicting diversity across skin tone, dress, gender and people of determination (people who need assistance because of limits to their intellectual and/or physical abilities).

Initial explorations were done with stock illustrations. Working with the illustrator we decided product and high value asset illustrations need to communicate one set represented related products and the other was a resource (downloadable pdf, whitepaper, etc).

Incorporating feedback from the team, it was decided to move towards a direction that hinted at the product’s functionality and differentiate itself from a download. This also solved the issue of the stock illustrations not resizing very well for use as a smaller illustration.*

On the downloadable assets, considered "high value", they were developed into illustrations representing the company or case study it highlighted. These became more of an environment, rather than a stand alone icon-like illustration.

*Product illustrations do not represent final colors.

The final pages went live right before Broadcom acquired CA Technologies. Unfortunately because of this, we were not able to finish the project in full. The intent was to build the user experience from the bottom up. This way, once the homepage refresh was done, all the content would be there for the full user experience. The hompage redesign was not completed and the APIM category, subcategory and product pages went through a Broadcom branding update.

• Next project: Navigational Icons

• Back to Homepage