EAT! Frozen Entrées

Web Design
Bellisio Foods, headquartered in Minneapolis, asked our team to create a new brand and website based on their product packaging. I designed a new responsive website for them that considered the user experience and millennial target market.

Discovery, Competitive Analysis and Creative Exploration

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. 

Low Fidelity Wireframing

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.

High Fidelity Wireframes

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.

Design

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.
Let's Collaborate

Prototyping with InVision

This project was more than a simple brochure website. I designed the JSON styling for an interactive, real time product locator map and a multi-step contact form amongst other things. These interactive modules and animations are best visualized through a prototype so I used InVision to sync my layer compositions and indicate each page's relationship to one another as well as show alternate states of buttons and interactive animations. Because the prototype is cloud based I was able to share the live link with our off-site developer and the rest of our team to gain their feedback early in the process. The internal team gave me constructive feedback which I implemented before presenting the proposed designs to the client.

Dev Handoff

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.

Quality Assurance

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.

Designing & Building an HTML5 Banner Ad

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.

Paid Social Media Advertising

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.

Conclusion

This was a complex project that required creative and technical execution. Throughout my process I regularly consulted my team and checked in with my project manager to ensure that I was both effective and efficient. As a designer, I seek early and frequent feedback to ensure the project is meeting expectations and minimize changes. This resulted in ensuring the project met projected deadlines.
See the live website
Let's Collaborate
Thank you, your message has been sent. Look for me to be in touch with you soon.
Oops! Something went wrong while submitting the form. Please try again.