When I started, we had a small team of three designers (two product designers, and myself). I actively supported the team with visual and motion work, and collaborated on building out the Design System. I also ensured the brand was aligned across marketing and product for a seamless user experience.
As part of the new illustration style and branding, I spearheaded the motion style, and reimagined the animated product experience. Through this process, I have enabled future improvements as a lot of these UI motions are already conceptualized that can be developed and reflected on Product.
Below are some examples of the Lottie animations (built in After Effects) I created for the marketing website, showcasing a simplified version of the ZenHub product experience and offerings.
Colour library
I worked closely with our Product Designers to tackle the restructure of the colour library, and develop new colour swatches (that reflected our rebrand, as well as light/dark mode).
We streamlined the Legacy colours and duplicated labels, making it easier for our developers to reference in their code, and will help increase efficiency, and reduce the margin of error when updating colours across the Product.
We gathered inspiration and research from other design teams, and followed GitHub's design library's structure:
The same scale system was applied across the new brand and product colours. Both light and dark mode refer to the same scale for the swatches, making it easier to locate and update colours for future changes.
The two main considerations when developing our new colour swathces were:
- colour scalability for light/dark mode
- accessibility (good contrast, meets WCAG standards, and colour blindness).
One of the available tools/platform we used to determine accessibility was coolors.co. Their constrast tool follows the WCAG standards. They also offer a great colour blindness test against 8 different types of colour blindness.
Icons and empty states
Because the ZenHub platform is integrated with GitHub, this means with each GitHub UI change, we would need to reflect similar changes on our platform to ensure a more seamless experience for our users.
We audited our extensive list of Legacy icons, and I refreshed the icon system. Some icons needed minor tweaking, while others took on a new graphic that communicates its function better.
Empty states
I created empty state illustrations across all touchpoints of the Product that reflected the space theme. Below are some ideation sketches in efforts to translate the function of each part of our Product in a fun and understandable way. Some key visual elements that are consistent across the empty states are the sparkles, colour treatments, and Polaris (symbolizing the true North, and source of truth).
The main challenge was to have the same empty state SVG work for both day/night mode. This means that the same SVG would need to have enough contrast and colour swatch/opacity that would work on dark and light backgrounds.
In efforts to elevate our product experience, I pushed for Lottie animations within the product experience.
I transformed the empty states into Lottie animations, and mocked it up for the team to better visualize the potential, and opportunity to create moments of delight for our users.
Avatars
What turned out to be a single avatar update, became a set of avatars that were playful and inline with space entites.
Below are other touchpoints in the Product that I've helped create illustrations for.
I also worked on the team's email signature, and animated star graphics to mirror our space brand (along with a few static options).
It has been a tremendous collective effort with the Product Designers and dev team to reflect the brand colours and theme, and to develop a Design System that supports dark mode in two months.
I now have a better appreciation of the amount of detail and system structure required to map out each colour swatch and elements in our Design Library, and the level of dedicated effort to maintain it as a source of truth. These experiences has humbled me to expand my procress when scaling illustrations and motion styles.
Although a new rebrand is in motion with an external brand agency (Q1 2022) , I am proud of what the team and I have accomplished thus far. We have certainly leveled up our visual front, and am excited to see what our growing team has in store for the upcoming year.