Mage Scan



January 2016


Ecommerce Platforms specifically Magento

Project Duties


Web Fonts

Web Design


User Experience

User Interface


Redesign of a web application user interface making a better user experience for Magento developers and clients.



Mage Scan is a tool invented for Magento developers.

Mage Scan logo

Mage Scan gives updates on signs of outdated software, missing patches, and general bad practices for e-commerce sites.

The tool scans online stores that are built on Magento and gives the user a snapshot of the e-commerce site.


Web Application Before


Web Application After


Mage Scan is not our first tech centered client, but it was a different type of target audience. Developers, specifically invested in the Magento platform. The client asked for a modern look with an easy and entertaining interface.

The Four wanted to show a glimpse of humor in the design, plus add some light heartedness to the “your store gots problems” model. 

There was also the problem of how to display information in an informative and visually appealing way, while drawing attention to certain security threats that were more important than others.

We sketched some wireframes and discussed with the developer some options, we came to the conclusion that color was going to play a major role in the different categories of mage scan features.

Mage Scan animated loading user experience

After the initial flow was decided The Four started adding the magic to Mage Scan. We created blocks on the about page that still remained a clean, developer friendly aesthetic. And at the same time through simple illustrations gave Mage Scan the playful look suggested by the logo.