Anzo Smart Data Lake screens, captured from Demo Video

 

Anzo Software
Graphical Elements

Client Cambridge Semantics Inc.

Role Visual/UI Design Contractor

Discipline Illustrator, System Design,
Branding, Technical Design, SVG & PNG

Duration 10 months


Cambridge Semantics Inc., The Smart Data Company®, is an enterprise Big Data Management and Exploratory Analytics software company. The Anzo Smart Data Lake® solution, allows IT departments and their business users to semantically link, analyze and manage diverse data whether internal or external, structured or unstructured, with speed, at big data scale and at a fraction of the implementation costs of using traditional approaches.
— CambidgeSemantics.com

At Cambridge Semantics, I was responsible for the graphical elements in the Anzo Smart Data Lake Software. Under the management of the User Experience Designer, Zoe Monosson, I helped define the cosmetic experience of Anzo creating the logo and 200+ icons and visual elements. In this role, I was introduced to the Agile development process as well as the Atlassian products, Confluence and Jira. It was during this time period I decided I wanted to pursue my career in product design.


Logo | Finding Balance

The primary size constraint when creating the Anzo Logo was that its placement needed to be clearly visible in the top left navigation bar of the software.

After exploring with pen and paper I naturally started to leverage and pull inspiration from the graphic feature, ‘linking circles’ from the companies existing logo. I began making the ‘O’ in Anzo, as one of the linking ‘perfect’ circles. From this point I struggled to find an existing geometrical front that looked balanced when paired with the remaining letters ‘A’, ‘N’ and ‘Z’.

Cambridge Semantics Logo 2017

Cambridge Semantics Logo 2017

Contrary to it’s appearance, the letter ‘O’ is not a perfect circle. When horizontal and vertical strokes are the same thickness for letter, the horizontal strokes will look heavier. To prevent this, all letters are designed to be optically adjusted. Moving forward, in order to keep the ‘O’ in Anzo a perfect circle I had to create my own modified, vectored letters for the ‘A’ ‘N’ ‘Z’ letters to achieve balance.

When creating the three linking ‘O's, I also had to be carful that the logo did not accidentally read ‘Anzooo’

Anzo Logo

Anzo Logo

Conference Booth Design Data Summit 2017

Conference Booth Design Data Summit 2017

Logo on Apparel

Logo on Apparel


Color Palette
A color palette was defined and helped with the challenge of creating a cohesive package of graphical elements. The icons are restricted to the 16 colors in the color palette not including white.

Anzo Color | Specific Color Use

The entire palette can be used universally across all the Cambridge Semantics products. Regulations for the color palette should be applied as described. 

(primary palette)
Should dominate visually, made up of white, monochromatic increments of gray and Anzo teal.
These colors anchor and balance color expressions when used with secondary and extended palettes,

(secondary palette)
These colors span the color spectrum. Providing more variety to enhance visual communications 

(extended palette)
Applied minimally to subtly call out, accentuate, highlights important nuances for the user.

Gradients
Gradients are restricted to the 4 analogous, duotone color transitions. I chose them to add dimension and depth to the flat design. They are applied with the darker color to the right and lighter color to the left to produce the illusion of a light source which emphasizes movement and energy.

*Challenge/Take Away: When testing SVG icons with the gradients in the dev environment they did not behave as designed. It was quickly determined that SVG’ s with gradients did not adapt for web without the addition undertaking from the developer to manually code the style for each gradient.

Screen+Shot+2019-01-19+at+7.03.01+PM.jpg

Visually Simplify Complex Data Features

A majority of my time I spent talking out and sketching concepts for iconography that would best visually capture the data ingestions process. While working on this project the functionality of the software was evolving, The company was developing a cutting edge one-stop-shop for data ingestions and I was designing along with ideation. This was my favorite part of the whole process! In order to do this I learned a great deal about big data, its terminology, the different kinds of data and common ways data can be ingested and broken down.

Vocabulary List

Datasource: The location of where your data is coming from (i.e. database, csv, etc).

Data Connections: A data connection is where you identify which data sources you want to upload into the data lake.

Ontology: An Ontology is used to define the concepts, attributes, and relationships for a specific subject domain.

Dataset: Is multidimensional data that has been ingested into the data lake.

Graphmart: A group of datasets that can used to create dashboards from.

Dashboard: A group of visualizations that allow the user to gain insight and meaning from their data.

Schema: A replication of the data source’s structure and is basically a description of what the data looks like.

Mapping: Shows the relationship between the schema and the ontology.

File system location: The location where you are pulling data from (i.e. your computer, a database, etc). This is configured by an admin and data ingestion users would not interact with this section of the UI.

Ingestion Project: A project is a group of jobs. A job is the configuration that connects the data that you want to where you want to load it. Once a job is published, the data will get loaded into the desired location.

Provenance Explorer: Where you can see the history/lineage of your data.

High level description of data ingestion: Data ingestion and harmonization enables users to quickly upload and map data from any source

Preliminary Data Ingestion Process

Preliminary Data Ingestion Process

As a started to learned more about the stages of data ingestion, I then began setting up my art boards in the same order.

Screen Shot 2019-01-20 at 12.59.43 AM.png

Optimizing for Web

SVG’s have code attached to them, the more points, layers, and elements they have, the more code they have. To prevent lagging and improve loading time on a page it’s best to have as little code as possible. Steps for optimizing to reduce code included, making sure I was using minimal points in Adobe Illustrator, removing guides, and ungrouping and removing all hidden elements underneath each vector. One way to check if there were hidden elements is to turn the view to an outline view in illustrator.

Outline View in Illustrator

Outline View in Illustrator


Technical Issues
A major challenge at first was creating illustrator files that would efficiently supported on-going alterations for exporting 200+ individual elements based on developer specifications. 

For alignment, instead of using guidelines, which are not good for optimization, I took full advantage of the background grid.

Testing
To test icons I had two options. I either photoshopped them into screenshots of the interface or I would have them sent to the QA environment. Testing in the QA environment was most important for the monochromatic glyph icons. The glyph icons are created with an emphasis on simplicity because they appear much smaller than the rest of the colored icons. When testing them in QA, it became apparent that they needed to have a larger width than height.

Screen Shot 2019-01-19 at 5.52.13 PM.png

Exporting
The art board panel was extremely useful. The name of each art board become the name of the icon. The names would carry over when I exported and handed them off to the developer. It also helped everyone involved know exactly which icon was being discussed, tested or needed to be modified. This become critical as the collection of icons grew. As a result of this project I came to learn that illustrator can only handle a maximum of 100 art boards in one file, and I ended up needing to make multiple Illustrator files to handle all of the icons.

Even though the name carried over from the art boards when exporting, so did the name of the file which would be the beginning of every singe icon. I would normally name the file a single character like ‘1’ so that I would only have to remove ‘1-’ at the beginning of each icon before handing them over to development to test. Eventually this step in the process became extremely cumbersome so I created a batch scrip on my computer that would remove the first two character of each icons name. This saved me loads of time.

Screen Shot 2019-01-19 at 6.13.54 PM.png
SDLContactSheet_Page_1.jpg
SDLContactSheet_Page_2.jpg
Anzo Smart Data Lake Flat Icons

Anzo Smart Data Lake Flat Icons

SDLContactSheet_Page_4.jpg
Anzo Smart Data Lake Glyphs

Anzo Smart Data Lake Glyphs

Anzo Graph Icons

Anzo Graph Icons

Anzo Graph Glyphs

Anzo Graph Glyphs

GlyphSDL_Page_1.jpg
Other Flat Icons

Other Flat Icons

Other Glyphs

Other Glyphs