Advanse has created a dynamic ad designing platform that was in need of a redesign. I’ve worked hand-in-hand with front end developers in order to create a better UX for the platform. My team started our process by picking through relevant 18F methods, then moved onto sketching wireframes, and then moved onto prototyping. We are currently in our last stage of user testing and have been collaborating with our devs in Atlassian’s Jira.
Content Audit
We started the process out by conducting a content audit. The current AdStudio had a lot of random options/settings that needed to be sorted through. A lot of these options are not utilized by users of the platform which clogs up the current UI. This proved to be one of the most helpful methods; it was referenced during the entire redesign by different teams across the company.
Comparative Analysis
Conducting a comparative analysis allowed us to see what other ad design platforms were doing. This allowed us to see what areas AdStudio could improve upon and helped spark inspiration / ideas early on in the process.
Heuristic Analysis
We put together a Heuristic Analysis to thoroughly analyze all aspects of AdStudio. This helped us find which parts of the system needed more work than others. The analysis was a method we referenced a lot in the design/prototype phases, as we came up with a ton of findings.
User Interviews
User interviews are great. They enable us to step outside of our boxes and into someone else’s shoes. I think this might be one of my favorite methods, as you can learn so much by seeing from different perspectives.
We interviewed designers who work in AdStudio, stakeholders and folks who have previous experience at direct competitors. Click here to see our question list.
Process Sketches
We spent a lot of time sketching out new and old components of AdStudio. Making a lot of sketches allowed us to visually work through foggy interactions as a group, helped us create very low fidelity wireframes and also let us work through the new features we planned on implementing into AdStudio.
Click here to see the process sketches.
Balsamiq - Low Fidelity Prototype
Early on, we created Balsamiq file so that developers can easily visualize the interactions and new functionalities that take place in the updated AdStudio. This was one of the very first iterations, and the overall design has changed a lot. That being said, feel free to take a look at what we came up with!
You can also find a few additional low-fidelity wireframes that were used for meetings / discussions below:
Preview Creative Mockups
Reporting Data Mockups
Adobe XD - High Fidelity Prototypes
In order to set up a template in AdStudio, a user must first encounter the welcome screen to begin building creative. You can find the welcome screen prototype here.
Here is the initial canvas interface, including navigation, toolbars, and annotations for devs! You can find the final canvas/navigation prototype here.