Foureyes Script Tool
Design + Front-end Development
Foureyes needed to design a landing page and results page for their new script tool. It allowed users to submit their own website address in order to see a list of all the scripts that their site is using. It was a way to show potential customers how much their data was being accessed, with the goal to bring them on as clients through further discussion.
The vision was described to me, and I took that loose idea and created mocks. After several iterations, I then coded the front end on the Craft site for the stakeholders to interact with before a final round of revisions.
In designing the mocks, I used brand assets and design modules already used on the Foureyes site.
The main content section on the landing page had a hover effect over each subtitle that would display a different image to the right.
The report page had the potential to very long and overwhelming, with a ton of scripts listed in a row. My goal was to structure those results in a way that was easily digestible on first glance, with the ability to dive deeper with dropdowns or modals.
The two main data points were featured large at the top of the page.
Also, they wanted to incorporate checks and X’s so that the user could mark the scripts with a check, X, or ? as they looked through them. Their selection would then show up on the printable PDF for their use.
This is an example of a script report from toyotaofportland.com. A clear CTA at the top will send the results in PDF format through email.
The results section gives the total number of scripts and script containers, including a comparison to averages.
I designed the scripts section by breaking down the hierarchy of information. There are multiple kinds of GTM containers, which can contain multiple websites, which can contain multiple scripts.
A brief summary describes the purpose of the scripts, including a note about how many dealers also use that script.
While selecting one of these three buttons isn’t required, it is meant to be helpful for the user. When the results are sent in PDF form, it will include the notation that the user selected in the browser.
Explainer text appears as you hover over each button. When a button is selected, the others fade slightly.
The final step of this project was to create 3 different images to go with the main content on the landing page. This felt like a true ‘icing on the cake’ moment. I layered screenshots of the finished tool with shapes and textures that are key to the Foureyes brand.
