Steelhouse Design System

The Steelhouse advertising suite is a platform that allows brands and agencies to launch retargeting campaigns. We took a self serve advertising platform from a single desktop layout to multi-screen break point system.
Organization
SteelHouse
Role
UI Designer
Team
Addison Smyth
Lyandre Pierre
Marwan Sorhaier

Problem

We needed to identify the need for alternate versions of components and layouts that were fundamentally flawed and did not lend themselves to a system or to best practices for the web.

Solution

To test, correct, and ultimately verify the Design System. By identifying where the designs would break in regards to scale, layout, and overall cohesion, we made the system simple, flexible, and impactful. To do this, we needed to recreate each screen template in 3 sizes using the Design System.

Research

In-App surveys and user testing sessions were created internally and with clients which revealed some pain points.

- Users were not able to complete steps, drop off on ad builder phase
- Ad builder was not up to par, lacking usability
- Users did not want to create their ads, themselves
- Staff assistance was needed in order to understand function
- Highest number of users were experiencing screen cut off
- No confidence in how the way their money was being spent

Resizing UI

We started with once of the big issues, which was to resizes all UI if it didn't work at 768 it would be re-designed.

Layour Grid

1440px

12 Columns
margin: 32px
gutter: 16px

1024px

8 Columns
margin: 32px
gutter: 16px

768px

8 Columns
margin: 32px
gutter: 16px

Creative

Audience Report

Retargeting Setup

Final Components

In-App surveys and user testing with clients revealed some pain points.Also created a Heuristics check.