I began the discover phase of the process with a competitive analysis to better understand the consumer packaged goods landscape and how our brand positioning might fit within that sector. Our digital strategist compiled a project Kick-Off document listing competitors and their sites from which I took notes to evaluate their promise and shortcomings. I then made a bulleted list of words and attributes to detail what the site should include or dismiss, conceptually, aesthetically and technically. No design should be created in a vaccuum so I regularly visit Pinterest, Dribbble and Codepen for design inspiration. 

After assessing various design resources, I consider what is appropriate for the client and target market. The client had no existing website or content direction beyond the product packaging so I had to consider how to display and present the available information within a sitemap architecture. Sketching rough wireframes helps me to organize my thoughts in regards to what the content is and how it is displayed for the user. I then share this content with our copywriter so he can begin writing to the format I've established. After presenting to the internal team I make the collective changes.

Few clients would be impressed with sketches, so I recreated my chicken scratch concepts into higher fidelity wireframes. Prototypes and user flows show the relationship between pages and helps the client understand each page in the broader context of the site. Wireframes are a great way to get client and internal buy-in on the site structure so we're not making unnecessary changes later on. Graphics are intentionally simple and text is a combination of greek and descriptive copy to reinforce the idea that specific details are not being fleshed out yet.

Once the wireframes are approved by the client I begin mocking up 3 pages in both desktop and mobile format to establish the overall user interface style. I generally work within Photoshop, utilizing layer comps for alternate page states and libraries for consistent graphical treatment sitewide.

A big consideration of mine when designing websites is page speed. One problem that we ran into during this phase of the project was the headline font which was quite heavy. I used the webfont format of the typography used on the product packaging, however this textured style font was huge because of the numerous intricate waypoints. I opted for a very similar and simpler font which greatly reduced the kilobytes. The brand included several vector illustrations which I was able to export as SVG files as opposed to JPGs or PNGs which are much heavier in size.

Design intentions canot always be related in mockups. Once the designs were approved I collected all notes and assets that might aid the developer in understanding my vision. Notes included specific technical considerations such as flexbox and fallback options as well as desired file types and animations. In order to visualize motion design, I created some animated GIFs and citied Codepen examples. In addition to handing over a library of graphical assets, I also indicated header and paragraph type treatment, as well as brand colors and general rules of UI proximity.

The team's existing design process was pretty open and loose, with no specific process for web design previous to my involvement, so I established many of the expectations for design rounds, design tools and review on this project and others. After our developer built the site in Wordpress, I went through a two stage quality assurance process. Stage one involved meticulously analyzing and detailing the front-end desktop and mobile page designs within a single browser for visual errors as well as calling out back-end optimizations to make it user friendly for the client. Once the glaring issues were resolved, stage two began with a complete browser test to ensure that nothing was inherently broken. I used a variety of tools including Skitch, Dropbox and ToDoist to catalogue bugs and ensure they were resolved.

User studies show that motion is paramount when gaining clicks. I designed and built this interactive HTML5 banner ad as a proof of concept to achieve that end.

Once the site was complete and launched, Bellisio asked us to manage a paid social media campaign. I began by conceptualizing a dozen different themes that were distinctly different and which could easily be repurposed from week to week. I created website click ads, carousel ads and video ads within Facebook's Creative Hub so that copy and graphical assets could easily be pushed live.