OVERVIEW
In this case study I will go through the process of creating a responsive marketing page for McCain's SureCrisp french fries. You'll see how I conducted research, worked through the UX layout by wireframing, prototyping, and designing the user interface elements. From the first iteration to the final product, I will go through the steps of my design process in this case study.
PROJECT DURATION
2 weeks
PRODUCT
Responsive Marketing Page for McCain's SureCrisp Fries
ROLE
Research & Strategy
IA & Wireframing
Design Assets
Prototyping
UI Design
Client Presentation
THE BRIEF
McCain was launching a new french fry called SureCrisp. This product was designed to solve the soggy french fry problem when ordering through delivery apps like UberEats or Foodora. SureCrisp fries were guaranteed to retain their crispness for up to 30 minutes and were available through operator partners, take outs and online delivery apps. I was tasked with creating a consumer facing responsive marketing page to showcase the new french fries and give consumers more information about the product.
THE GOAL
The main goal was to create a one-page responsive marketing page for McCain's new SureCrisp french fries. The marketing page needed to address the the benefits of the new fry, create a hub where those who want to learn more about the fries, and where they can be ordered from. Originally there was also supposed to be a hub where operators could login and download assets like logos and sell sheets, but later on clients removed that request.
DELIVERABLES & CONSIDERATIONS
1. Wireframes and Design of the consumer facing 1 page website
2. Design of the B2B interface landing page once logged in
3. Creative design and assets
4. Canada - Multilanguage English and French toggle
5. Must be responsive - smallest possible version for mobile, and widest possible version for desktop
6. Accessibility must be considered
7. Operator login button
8. Click through options for 3rd party delivery partners might vary between EN/FR and US versions
FIRST STEPS
FINDING INSPIRATION
Once the project brief meeting was completed and I understood the requirements, I started my path into research for inspiration. I looked at several other marketing pages to see what current patterns were, how other pages were laid out, how they organized their information, and how they designed the look of their product pages to spark some ideas of how this could function and look since I was starting from scratch.
Some of the marketing pages I looked at included, UberEats, WealthSimple, Foodora, McDonalds, Postmates, SkipTheDishes, Ritual, Hello Fresh, and of course other McCain's product pages. I was looking at these product or food based apps to see what patterns existed were and what the general best practices were.
A SKETCHY SITUATION
After taking a look at several marketing pages and gathering inspiration and ideas, I started to draw out several different responsive design layouts from mobile to desktop. I did this without the actual copy because the copywriter wasn't available, so I designed it a little bit blindly and placed where I thought information might go based on the project brief. I built the visual hierarchy with the most bold and eye catching hero image, logo and tagline with a call to action first, and proceeded to put the secondary information and tertiary towards the end finishing it off with the last call to action. Here are 2 of the 4 the sketches I did for the initial designs.
.jpg)
DIGITAL WIREFRAMES
Once I completed the sketches I took them to my leader to get some feedback. My leader selected the one he thought would work best for the client and I proceeded to make digital wireframes, still waiting on the copy and style guide. I created digital wireframes only for mobile at this point because I wanted to get the "OK" from the client first to save time on designing the desktop version. Here are some of the early digital wireframes I created as I slowly acquired the style guide, copy, photography, logos, and some digital files from the style guide.
VERSION 1
VERSION 3
By version 3 I got the copy and the font files, Brix Slab, and TradeGothic along with the product photography and SureCrisp logos. I was still waiting on the style guide, and the delivery app vendors weren't determined yet so I created the vendor buttons based on the most popular apps. I was almost ready to run through the layout with the clients at this stage of the design but I did an accessibility test using the Stark plug-in on and it didn't quite pass because of low contrast, so I overhauled the colours and changed it to a dark theme.
VERSION 4
VERSION 5
I was finally ready to present the design to the clients for feedback after testing the contrast and colour. The design passed the accessibility requirements for the colour blind or visually impaired. I ran through the design with the clients and explained why I made specific design decisions, then I opened the discussion to receive feedback. They wanted the images replaced with photos with a hands in them to emphasize the crispiness of the fries and to use an additional photo in the design. They also had information on vendors they would be using, which were Postmates for U.S. customers, and UberEats for Canadian customers. Once the meeting was complete, I discussed the client asks with my leader and went back to make necessary changes to the mobile version seen below.
DESKTOP VERSIONS
Once I completed the necessary changes to the mobile version, I started to build out several desktop versions. I proceeded to adapt the mobile version into a desktop version in Sketch. I kept designing and iterating until I had around 7 digital versions. I narrowed the sevel down to the top 3 based on usability and visual design. As I was designing and iterating, I asked peers and colleagues for feedback and suggestions along the way. Here are some digital desktop versions I created.
VERSION 6
VERSION 7
FINAL CLIENT REVIEW
After addressing the client asks from the first round of reviews and building the desktop version of the SureCrisp marketing page, I prepared for the next round of client reviews. During the review I walked the clients through the new designs and spoke to why I made specific choices. Upon completion of the final review the clients had a few more requests which were simple to implicate. They decided to remove the operator page, so the operator button needed to be removed, and they requested the call to action button be higher up on the page. Overall they were happy with the look and feel of both the desktop and mobile version. Take a look below to see the final responsive designs. See below for the final mobile and desktop iterations.
THANKS
Thank you for reading about how I created the SureCrisp marketing page campaign for McCain's. I hope you enjoyed the read and learning about my process in building this responsive design.
FINAL VERSIONS
