Building a design approval system for Frito-Lay using WordPress
When Frito-Lay approached us to build a new tool for managing their creative projects, we were beyond thrilled to work with them. The most exciting part was being able to use the best tool for just about any job–WordPress. Using the WordPress admin, we created a full-blown project management system which allowed us to reimagine what WordPress can do as a Basecamp-like app for design approvals.
Designing the Elements
To design the app, we chose to view the design as a breakdown of elements instead of focusing on page design. We know WordPress like the back of our hand and have a pretty good handle on the myriad of widgets, buttons, text snippets, and interface elements inside the WordPress admin. By designing individual and group elements and then stitching those elements together into viewable comps we were able to create a useful design inventory for visual consistency throughout the app, and quickly move to rapid prototyping.
We created custom workflows within the admin that allows projects to go through various stages of approval and review. Using custom post statuses, we set up triggers that fire off emails to various stakeholders at different times throughout each project cycle. When a project is submitted by an external party, it is then reviewed and approved by a design manager before being assigned a designer for completion of the work.
Re-skinning the Admin
One of the biggest tasks was re-skinning the admin. We removed all WordPress branding and converted it into a white-label, custom CMS. The front-end is redirected to the admin and requires user authentication to sign in and use the app. Once logged in, a custom logo and admin bar greet the user with a soft color palette and refreshing design. The traditional Publish meta box has been completely replaced with a custom one which factors in the custom workflow mentioned above.
One of the biggest factors for a project management system is the amount of storage needed for file uploads, especially for designers. At times, it is completely normal to see 500MB files uploaded containing massive print-quality PSDs. It was important for our architecture to be able to handle that. Fortunately, with the help of Amazon S3 and Brad Touesnard’s Amazon S3 & CloudFront plugin, we were able to allow users to upload files directly to the server, after which they are transferred to the Amazon S3 bucket and deleted from the web server. This allows us to store all files in a single S3 bucket and keep the web server free of giant media files.
Displaying Project Updates
Another important element for a project management tool is showing activity within a project. Luckily, the amazing Stream plugin came out just around the time we started work on this project. We dropped that straight into the project and customized it just a tad to show only the most relevant project data. The default data it tracks is a bit much for this type of project, so we nixed a few things like login and logout events.
Because this app is being used mostly by a small group, we set it up on a single Digital Ocean droplet and served media files from Amazon S3. With Digital Ocean’s ability to scale up as needed, we launched the app and began working on additional features.