Tool Install link
If you'd like to try out Stein's;Gate for yourself, you can install it by clicking the button below:
INSTALL STEIN'S;GATE CHROME EXTENSION
Overview
Stein's;Gate is a Chrome extension that can perform any action or series of actions that is done by a user on a browser i.e. type, scroll, click, etc. It can be programmed to perform or simplify tasks that are repetitive and time-consuming for the user. It requires no coding knowledge. It is an internal Amazon tool.
In pioneering the design side of this tool, my tasks were
- To develop a logo for the tool keeping in mind that this logo would be used as a tiny Chrome-extension icon
- To create instructional material around it to help educate non-dev teams and operations teams about the benefits of this tool.
Apart from this, I also designed several 'Award' badges that employees could display in their internal profiles as a bonus incentive for installing the tool, or improving the tool giving the dev-team feedback and more.
Logo Inspiration
Stein's;Gate as a tool is designed for integration testing/units tests which is a set of tests developers use on their code to make sure the code is running as intended. The tool's purpose is to run such tests for the code so that the developers don't have to. If you think of testing your code like gate and you're checking if your code can pass through the gate, it made sense to think of this tool as a "Gate", hence the name and also partly the reason for the Tori gate idea. The other part of the reasoning was that the dev behind this tool wanted to use something iconically Japanese to commemorate the anime that this tool is named after.
Since Stein's;Gate has such automation-esque capabilities, the developer decided to also make it a Chrome extension as it can perform all the actions a user can perform on the browser. It made sense to keep the same name for the tool and as well as the Chrome extension since they had the same capabilities and performed the similar tasks, just at different places. So therefore the logo would also be used in both places.
Designing the logo as a Chrome-extension icon
Google's documentation for designing chrome-extension logo images specifies that
The logo should fit within either a square or circle shape
Should be a front-facing image
Should be supplied in the following dimensions: 16px x 16px, 32px x 32px, 48px x 48px and 128px x 128px
To comply with this, I chose to use the square shape as the Tori gate is box-shaped than round. I also made the Tori gate front-facing.
You can read the documentation here: https://developer.chrome.com/docs/webstore/images#icons
Making a pixel perfect icon
Since the minimum dimensions is only 16px x 16px and a Tori gate as an icon at that size would have relatively skinny lines and less solid color filled areas than something chunky/filled like the calendar and Youtube icon in the above example from Google, I needed to ensure that the logo-image will still be visible and recognisable at that size. The way to achieve this is by making the icon Pixel Perfect.
A pixel-perfect icon is an icon that is designed to be sharp and look identical on different devices, even when scaled. Pixel-perfect icons are created by ensuring that every element, including the stroke width, inner elements, Bézier curves, detail amount, perspective, and scaling, are meticulously crafted and positioned to align perfectly with the pixel grid of the canvas. This approach creates a seamless and visually harmonious composition that is free of aberrations, blurring, distortions, and other design imperfections.
The difference between a pixel-perfect icon and one that isn't is especially obvious on high resolution screens, such as iPhones or Retina laptops, where the text surrounding the icon is sharp and the pixel-perfect icon appears much sharper. This can give the design a higher quality feel, even if the average user doesn't notice that the icon is on the pixel grid.
Icon creation time-lapse
Below is a video time-lapse of my process designing this logo to be a pixel perfect icon.
Colors
The logo was 60% negative space and 40% positive space. Because this was already a skinny logo and lacked chunky, solid sections for it to be legible at small sizes, I needed to make sure that my color choices helps it stand out and be clearly visible on all backgrounds.
I had noticed that Google chrome's default UI themes seem to have the follow the below formula for their color scheme:
In dark theme, no matter the hue, the Saturation is always less than or equal to 50% and the Brightness is always less than or equal to 30%.
In light theme, no matter the hue, the Saturation is always less than or equal to 10% and the Brightness is always greater than or equal to 90%
So I needed to ensure that the icon's majority color or colors has a Saturation greater than 51% and a brightness somewhere between 31%-89% to have a good contrast ratio against these background colours no natter what hue the user chooses for their chrome UI theme.
For the Primary color, I chose a typical Tori-gate red-ish/orange-ish color with a high hue and high saturation so that it will stand out. This color occupied 70% of the icon.
For the secondary color, I chose a cyan/teal color as it is directly opposite to on the color wheel a.k.a. its complimentary color. This color occupied 23.75% of the icon. I chose to lower the saturation so that it won't appear too jarring next to the bright red. I chose to lower the brightness so that it will still have a good contrast ratio on a white or light background
For the detail on the Tori gate I chose a beige/brown and white. The brown had a low-medium saturation and medium-high brightness as this will be visible against light backgrounds. The white due to it's high brightness will be visible against dark backgrounds.
#F23030
#80CBC4
#998061
#FFFFFF
Tool-Usage Award Design
As an added incentive for using this new tool, testing out its features and providing feedback on it, I created the below 3 award badges that internal employees could add to their page. This also aides with marketing of this tool to new users as collecting such badges was seen a fun activity among employees.
The design for this was a tiny bit challenging as the dimensions for these badges are 120px x 30px and needed to include text as well. I designed it using serif fonts and left-aligned sentence-case for the text to ensure readability on such a small size.
In-situ Mockup
Below is a rough mockup of the employee portal where these award badges were used.
Presentation/Marketing Assets/Instructional design
Below is the instructional material I designed for educating internal teams about this tool and its capabilities. The following was sent out as newsletters and shared as presentations during meetings to educate users about process improvement tools.
Newsletters/Other Marketing Assets
Along with this I also made the below cheat-sheet style instructional material that was sent out as infographics, newsletters and PDFs for new users to copy the code in the below cheat-sheet and try using the tool to familiarize themselves with it.
Thanks for viewing!