Ad Builder
What is it?
A studio where you can build HTML5 ads quickly and easily
Spongecell is an Ad Tech company that collaborates with Brands, Media Agencies, and Creative Agencies to serve the right ads to the right people. Their main offering is a Creative Management Platform (CMP) which lets you create and manage your online ad campaigns.
The focus of this project is to update the previous iteration of the HTML5 ad builder to improve visuals, refine workflow, and make it easier to use.
Problem
The existing Ad Builder was functional and usable, however as an MVP it had its share of issues in usability and layout. The placement of the builder’s components can be inconsistent because they adjust to the size of the ad being built rather than scaling to the size of the window. With a push for the business to go in a self-service direction, the Ad Builder needed a visual update as well making it easier to use and learn.
Hypothesis
I believe that by making the Ad Builder scale to the screen, we can give components more consistent placement and open up the layout to make things easier to read between sizes
Combined with incorporating user feedback from the existing Ad Builder, we will avoid many of the pitfalls of the previous iteration.
Research & Ideation
Combining product with user requirements
Since this project is an improvement on an existing tool, we needed to gather as much feedback as possible from the internal team that used it everyday. Opening the Ad Builder up to client self-service means that usability is a major focus.
We conducted interviews with the internal production team. We divided the team to seven small groups and walked through a list of general questions and drilling in on specifics along the way. We found many consistent issues and sorted through them for insights.
Some consistent findings:
Everyone really wants an “Undo” and “Copy/Paste” functionality
More information needs to carry over between ads of various sizes within a set
Being able to lock and hide layers while building the ad
User Flow
Iterations
This is one of the initial explorations. Components are attached to sides of the window allowing it to scale. The panel on the right shows what screen you are currently working on and the button to add an element to the canvas is with in the context of that panel.
Cleaned up the top area from previous iterations and moved the screens layers and the screen switching to the left. Decided to move the “Add Element” button out of the panel and make it a big button in the bottom center because it is one of the most used buttons in the builder and should not be hidden. Assets, landing pages and other menus are on the bottom right, each opens a panel.
Added Spongecell’s colors to make the studio feel more branded. Made “screens” a component like assets, landing pages and others, and combined them into a single column on the left. Clicking on the icons would change which panel is visible.
Toned down the big color splash to and switched to subtle highlights of bright branded colors. Element properties were fleshed out at this point and added to the right of the builder. Left side panels are fully collapsible to keep the UI clean when the user wants.