Designing an e-commerce website with over 3,000 products can be quite intimidating. You want to make sure shoppers can find products with ease. You also want to encourage add-on sales while making the check-out process quick and easy. No matter how much you prepare for a website of this size there is always a lot of unknown going into it. This is what made this project a lot of fun to work on.

When I got word that I had successfully landed the AAA Vacuum website re-design, I was thrilled. The initial meetings with the client went extremely well. They gave me a small list of things they wanted to see in the new website and were eager to see what other enhancements I could bring to the table. I began creating wireframes that were a little more detailed than your average wireframes. I find this process makes the transition into the design stage easier, while still allowing for quick revisions to the wireframes if necessary.

Wireframes were created at various screen resolutions to illustrate to the client and developer how elements would be affected based on viewport size.

Once the client, developer and myself were happy with the wireframes we had a solid foundation to start designing around. The header was  a crucial part of the website so I started there. From the header, shoppers can browse through AAA Vacuums’ main categories, search for a product, subscribe to the AAA Vacuum newsletter, download the latest newsletter, and see what products are in their cart. These options and features were organized in an interface that was clean and easy to navigate.

One of the client’s early request was that the home page have a side bar to the left that displayed all of the brands they carry. Shoppers who are looking for a specific part will see this bar and scroll down until they see the manufacturer they’re looking for. We also thought it would be a good opportunity to push promotions and important items on the right hand side of this area on the home page as shoppers scrolled down. A slider area was created with multiple graphics, one being the announcement of AAA Vacuums’ 40 year anniversary. Once past all the promotional graphics, I wanted to get right into the products and allow visitors to begin shopping, even if they haven’t clicked anywhere at this point.

A lot of thought went into designing the interface for the products. Another one of the client’s requests was to have continuous scrolling whenever a shoppers was scrolling through all the product results. At the same time, it was important to allow shoppers to check-out quickly so we wanted a quick “Add to Cart” button accessible without having to click into the product itself. My original wireframe included an “Add to Cart” button as well as a “View Details” button that were visible at all times. When using this method with continuous scrolling, I found that the buttons took up too much real-estate on the page. Because of this, I altered my design and did a reveal on hover for the “Add to Cart” and “View Details” button. On tablet and mobile devices I decided to go back to having the buttons displayed at all times.

When shoppers click on the brands page, they are taken to a page that lays out all of AAA Vacuum’s trusted brands in tiles. Shoppers can click through a brand to browse all of their available products.

While working on this project with AAA Vacuum, I came to realize that the client always runs into the scenario where they want to upload various content that belongs to a specific supplier of theirs. Trying to allow for future unknown content while keeping the overall website organized was challenging. I wanted to build something fluid that would work well for a brand that had a lot of unique content, and work just as well for a brand that had no unique content.

The solution was this drawer that appears at the top of every catalog page designated to a specific brand. On page load, the drawer would start in its open state. The drawer’s content allows for a carousel (image and text), videos, and files that visitors can download. After a couple seconds the drawer slides up and closes. This tells shoppers that the drawer exists and there’s more content available to them without getting in the way of their shopping experience.

The shoppers who already know all about the product they’re looking for may be inclined to use the quick “Add to Cart” button, but for those who want to know more, the product page is crucial. Essential product information such as product name, sku, price, description, and specifications are displayed in a clean and easy-to-find interface. Shoppers can also review a product they purchased and read other customer’s reviews. The option to upload a video about that product is also made available to AAA Vacuum.

To increase sales and push add-on items, the right column of this page would display related products. If a shopper is looking for a particular vacuum, they can find the bags or filters that go with that vacuum on the right hand side. Comparable items are listed below in the case they were looking to save a little bit of money or spend a bit more for something slightly better. If these items are not populated, the fall back is to display sale items on the right hand side and items within the same category below.

Thank you for watching and be sure to check out the live site at:
www.aaavacuum.ca

Back In Motion Rehab & Wellness Centre, 2015.

Caught In The Act Event Photobooth – Primary Logo, 2014.

Caught In The Act Event Photobooth – Secondary Logo, 2014.

Environmental Drainage Training Centres, 2014. Commissioned through Onyx Creative Studio.

Hey! Gilly Interactive – Concept, 2015.

Lee Gargano Identity, 2013.

NetMoms – Concept, 2015.

Plum Group Foods – Concept, 2015.

Rockhouse Construction, 2014.

In need of branding and a strong online presence, Caught In The Act Event Photobooth commissioned me to help create their identity and website. 

Caught In The Act Event Photobooth are really passionate about their product and the end result. They care about their clients and their events. It was important to capture this passion and excitement into the website. Designing a landing page that relied heavily on photos which conveyed that excitement and those feel-good times in a CITA Photobooth, allowed us to make the right first impression. The photos in this grid randomly alternate, helping illustrate the quality and endless options and add-ons to a CITA Photobooth.

Understanding how you can put together your CITA Photobooth is made easy with step-by-step narrative style content. The “Our Booth” page delivers just enough of the right information as you scroll to help you put together the CITA Photobooth that’s right for your party. The widget control on the right of your screen allows you to navigate to any section on this page.

Marcantonio Designs was in need of a website redesign and approached me with a list of objectives that the new website needed to accomplish. The redesign needed to be modern and user friendly. An easy way to browse through collections of high-end and hand-crafted furniture needed to be created. In order to increase accessibility to Marcantonio Designs’ private re-sellers, the new website needed to be responsive, fast and light. The user interface needed to be easy to comprehend. Getting from product to product without having to go backwards was a primary goal. The new Marcantonio Designs website would be light on copy and the main focus would be photos of the furniture.

Wanting to bring something unique to the home page, I treated it as one big interactive carousel. However, it wasn’t your typical carousel. I designed a controller that stayed fix to the right of the screen. This controller allowed visitors to pan up or down through products which Marcantonio Designs chose to feature. Although visitors had this controller made available to them, the carousel was also put on a timer so that products would scroll up and down on their own. The products were fairly large in size so that visitors got a sense of detail that went into all of Marcantonio Designs’ craftsmanship.

Marcantonio Designs releases a new collection every year that includes many sofas, ottomans, beds, and chairs. The new collection will always be easy to find as it has its own category in the catalog. However, re-sellers would still need to find their old favourites quickly and easily. In the top right corner of every page was a search icon. Clicking the search icon would bring out a side bar that filtered results as visitors typed.

Wanting to bring in an element that had some edginess to it, the main navigation would act as an element that complimented the modern and unique styles you could find in Marcantonio Designs’ furniture. I designed a full screen take-over menu that would be activated by clicking the main menu icon located at the top left of every page. Menu items would take up a different amount of space and on hover or touch, sub-menu items would appear in that space.

The center piece of the new website would be the catalog area. It was designed to be extremely easy to navigate. Visitors could filter and find products quickly, and the catalog was designed to be optimized across all devices.

Once visitors had selected a product to view, they were brought to the product overview page. Creating a great user experience for viewing products was important. The interface allowed visitors to move forward with viewing other products, rather than making them go back to make their next selection. To accomplish this, a drawer was designed that would hide under the main header and slide out whenever the visitor selected one of the six categories; new items, sofa collections, chairs, beds, dining chairs, or ottomans. In this drawer visitors could continue to browse products just as they would on the main catalog page.

The remaining interior pages of the new Marcantonio Designs website organized content and information by breaking it down into small sections while maximizing white space. Myself and Andrew decided to give life to some page’s elements by using parallax scrolling. It gave the website an attractive appeal. While visitors read information and scrolled through content, some examples of actions that occurred were photos of sofas unfolded, and photos of tools would slide in at various points. Video was also used on the ‘Craft’ page as a background to enhance the page.

You can view the full website at
www.marcantoniodesigns.com

Reflex Medical Centre, located in Mississauga, Ontario, Canada, is a brand new state-of-the-art facility which houses all of your health care needs under one roof. The facility had recently been open with some construction still going on when I was commissioned to design a brand new website that would help capture that same feeling of amazement when you walked into the building.

I was originally hired to handle some of the marketing and print material for Reflex when they reached out to me to come on board and help with their website. The project was already underway but the client felt that it was lacking visually. At this point the budget only allowed for a new desktop design that their developer would then take and dissect in order to make responsive.

In order to successfully build any website it is imperative to understand your demographic. With the help of Marie Helou-Tawfik, Project Manager, and Tarek Tawfik, Advisor, we determined that Reflex Medical Centre’s demographic could range from the ages of 19 to 85+ and be both male and female. It was a fairly large demographic based on all the service Reflex offers. However, we knew we needed to design the website for the elderly because if we could accommodate their needs, we could cover most, if not all, of the younger people’s needs as well.

For this reason design decisions like using a large readable black font on a white background and clear legible headers were made. Colour coordinated sections were also used to help visitors keep track of which branch of services they were viewing as they dove deeper into the website. For example, Medical Services were represented by blue, Aesthetic services by purple and Pharmacy services by green. We also used animated indicators to let visitors know that there was more content off screen or below the fold.

Once the design decisions were made to suit our demographic the next thing that needed to be accomplished was to establish a great first impression when a visitor first lands on Reflex Medical Centre’s website. While doing that, educating visitors on how Reflex Medical Centre was different from your average Doctor’s office was also crucial. I decided to go with a full splash landing take-over with a powerful slogan which Tarek had created, “Your Health, Our Priority”. Accompanying that would be a short introduction about Reflex and then below that the 4 main categories of services would be listed. These 4 categories would then stick to the top of the page on scroll and act as the main menu with new links of “About Us” and “Contact Us” fading in.

This main landing area would be dynamic and the content would be responsive. The message and image would be altered for returning visitors so that Reflex could push any promotional items they had going on at the time. There was no need to introduce Reflex Medical Centre over and over again every time someone visited the website.

The demographic also determined that most visitors were visiting Reflex’s website in order to find operating hours, contact information and directions. This information was placed immediately after the landing area so that it would be found quickly and easily.

Another integral part of the home page design was having the 4 main sections of services easily identifiable and if it wasn’t accomplished through the website’s main navigation, fairly large sized boxes were placed after the hours of operation, contact information and directions to accomplish this goal.

Once a visitor selects  one of the 4 main sections of services they would be brought to an overview page that would break down the available services even further. By utilizing a card design, each service was easy to find and visitors could read brief excerpt about that service.

It was important for the visitor not to get lost in the website as they dove deeper into it. Once a visitor selected a service there was a large blue (depending on which section they were in) button that let them know they could go back to view all the services. I wanted to save the visitor some time though, so I decided to place next and previous service buttons to the left and right of the website that would stick. They could use these buttons to go through all the services without having to go back to the main overview page.

If a visitor found a service that  was right for them, they could use the large yellow button that sticks to the main header to quickly book their appointment.

The design of the Team page was to help convey how the Doctors, Nurses, and other staff members at Reflex Medical Centre specialized in certain areas while being diverse, so you could get the best possible care for whatever was ailing you. A visitor could view information about a Doctor, Nurse or staff member so they would feel comfortable knowing about them when they arrived to the centre. Visitors could also use this page to request an appointment with that specific Doctor. Again, a card design was utilized here to help with the organization of all the information. Whenever the user clicked on a staff member that information was brought to the forefront while everything else hid in the background.

The Contact Us page design had every piece of information the visitor would need in order to make an appointment with or without a specific Doctor, inquire about any of the services Reflex offers, find  the centre’s hours of operation and get directions to the centre.

Sometimes my favourite part of a design is all the thought and preparation that goes into the process behind it. It can be a grueling and daunting task with any project when you have to portray a lot of information in a clean and easy-to-navigate way, but when the people using your product are over-joyed by its simplicity, that’s when you know all the thinking and hard work paid off.

While working under contract at Engine Advertising Inc. the team was asked to create a 55” multi-touch display that would be populated with all of the client’s community material. This material includes home renderings, floor plans, site plans and amentities map. Customers in their Sales Centre would be able to use these touch screens to browse through all of this content and send any content they may be interested in to their email.

I started out by laying out some basic wireframes to Illustrate how we would organize and display data.

The Home screen gave users the option to view new homes, view inventory homes and view inventory lots. In the instance they chose to view new homes (‘Browse Homes’), we categorized the homes by lot size and type on the next screen. Excluding the option to view townhomes (we’ll get to that later), all other options would bring the user to a list screen. Once a user selects a home from this list, they’re brought to the screen below.

At this screen the user is viewing a specific home model. Here the user has the option to click on a set of buttons under the render or swipe left/right directly on the render to view the home’s elevations. From this screen the user can view the next and previous homes without having to go back to the previous list screen. The client requested a full-screen option that would enlarge the floor plan. With the floor plan’s current size, it wasn’t necessary — but this feature was useful when viewing the townhomes so we left it on for this view as well. The footer allows the user to quickly go back, jump to the site plan or amenities map, or go to the home screen.

As mentioned earlier, the townhome section to this multi-touch display was a little unique from the other categories. The client wanted users to be able to browse these homes by models as well as by block; so we added an extra step that would ask the user if they wanted to browse by block or browse by model.

The view for townhomes is a little different from viewing all other home types. The client wanted the user to be able to clearly see what is to the right and left of the home they were interested in. The top portion shows the entire block and users are able to select individual homes within this image. The one problem with this route was that now we weren’t showing a large render of the selected home. This forced us to make the floor plan area smaller and include a closer crop of the selected home’s render. Now that the floor plan is smaller, the full-screen button became helpful for some user’s who may have difficulty with viewing details at this size.

The client was excited for what we had built for them. It was when we put this application in the hands of real users that we knew we had built a product that was refined and extremely user friendly.

This is a complete branding project for Amacon, one of the largest residential and commercial developers in Canada. Amacon presented the challenge to Engine Advertising Inc. to come up with a story and brand behind their newest residential development in Mississauga, Ontario, Canada. This new residential area located in the heart of the city, Parkside Village, would feature several townhome blocks and after a few discovery sessions with the team at Engine Advertising Inc. ‘The Towns at Parkside Village’ (or simply, The Towns) was born. The idea behind ‘The Towns’ was that new home owners would be located in the center of the city and be surrounded by everything they needed. The team decided to go with the tagline ‘Love Coming Home.’ and wanted to put emphasis on the ‘Live, Cook, Relax’ flow that was carried through these townhomes.

Pre-Registration Website

Part of this project was to develop a website that would allow people interested in purchasing a home pre-register and get their names on a list. The people on this list would have an exclusive buying opportunity the day the homes would go on sale, before the general public. The website would feature a large impactful cover image on load, an extremely easy to use menu, the registration form itself (which unfortunately required a lot of fields at the request of the client), and subtle bits of information to tease into the features of these brand new townhomes.

Large Outdoor Signage

Along with sending out email blasts to the client’s database, the client had a fairly large piece of land outside the Sales Centre to prop up a sign to let any passerby know about the new community coming to their city. This was a way to drive traffic to the pre-registration site. Engine Advertising Inc. took a unique approach to the sign by layering the assets such as the rendering, the logo and tagline.

Ten Great Places Around Town (Amenities Map Display)

One of the walls within the Sales Centre was dedicated to showing that this new community was literally located in the center of the city. This amenities map would highlight 10 great reasons you would want to live in the area and the map would show you where in proximity to ‘The Towns’ these 10 hot-spots were located. We used acrylic lettering to bring out the title of this display board so guests of the Sales Centre knew exactly what they were looking at.

Naming the Models

My suggested plan for naming the 4 model types was centered around the ‘Love Coming Home’ tagline and life at the center of Mississauga. Keeping with this theme I suggested to name the 4 models ‘Morning’, ‘Afternoon’, ‘Evening’, and ‘Night’ – I thought this was an original idea and a good way to tie into your day-to-day living in the city. The final names for the floor plans end up being ‘TH1′, ‘TH2′, ‘TH3′, and ‘TH4′. The following are the floor plan boards I set up for each model.

Brochure & Inserts

The brochure to this project incorporated all the necessary components anyone would need to know absolutely everything about ‘The Towns’. The cover is a durable black vinyl material with a black ink screen print. The inner pages are a 100lbs matte finish paper stock and all of this is put together using a Chicago exposed screw binding. The inside back cover has a pocket that contains all the inserts that come with the brochure, things such as floor plans, pricing and feature sheet.

Features & Finishes Display

One of the walls in the Sales Centre was dedicated to showing the features and finishes that come with these townhomes. There were two packages available to potential home buyers. Keeping with the theme of this project I had come up with the idea of naming the two packages ‘AM’ and ‘PM’. Had the client stuck with the idea of naming the models as I originally pitched them this would have been an even better tie in to the theme. I was responsible for laying out the samples within a certain amount of dedicated space. Once again we used acrylic lettering to bring out the names of the packages and ‘The Towns’ logo.

Renders Display

The last wall in the Sales Centre was used to showcase the render that the client’s 3D artist had come up with. This display included the exterior town block rendering, the rooftop patio rendering and the tagline ‘Love Coming Home.’ in acrylic.

Photography

Parkside Village Hanging Banner

Now that the client was incorporating this new community into their Sales Centre Engine Advertising Inc. needed to update the large hanging banner that hung in the foyer. This wasn’t just a simple update by dropping the new ‘The Towns’ logo on the existing banner, I was given the ability to take full advantage and do a completely new design. Myself and the team wanted to capture the attitude and mood that came with living at Parkside Village in Mississauga. This banner was approximately 30 feet tall and 16 feet wide.

Sales Centre Web Tool

This was just a quick little tool we put together to help guests and sales agents look up digital copies of floor plans on the Mac computers that were in the Sales Centre.

This entire project took just over 2 months to complete. Planning started early 2013 but things didn’t get kicked into full gear until mid-June of 2013. The community and project launched at the end of August 2013 and what a wonderful experience this was for me. It’s a project I’m extremely proud of and one of the larger scopes I took on at Engine Advertising Inc. The homes sold quickly and the client was thrilled with the brand we had come up with behind ‘The Towns’. It was something different from the ordinary, and had a modern and simple twist to it which is something that had just started to creep into other residential developments.

The Pentacon Group were looking for a fresh new website that was up to par with today’s standards. What was originally presented can be seen above in the introduction photo. I loved the idea of a monochromatic hero graphic on the home page. After discussing this idea with the client we determined it was better to leave the photos’ colour unaltered. This would help visitors really see the impact and the quality of work The Pentacon Group does with their interior construction.

When organizing the hierarchy of content for this project, the client was in agreement with us that most mobile users would be more interested in seeing examples of their work. We came up with a way that the site would give a traditional home page experience to desktop visitors while giving mobile visitors a portfolio experience.

Desktop users could still access the portfolio fairly quickly due to it being a highlighted menu item that was broken away from the rest of the menu. When clicked, projects would overlay whatever content the user was currently viewing. These routes made accessing the portfolio quickly no matter what device was being used to visit the site.

The Pentacon Group does some beautiful work and we wanted the photos to speak for themselves. If accessing the projects through tablets or larger devices, visitors would have their entire screens taken over by impactful photos.

Although these pages are heavily photo driven, the rest of the site hosts some lengthy copy. The contact page is another page that came together really well when translating over different devices.

To view the site in it’s entirety please visit
www.thepentacongroup.ca

Every year Student Price Card (or SPC) releases a new campaign promoting their loyalty rewards program exclusively for students. When this project was received at Engine Advertising Inc. we sat down with the client and were able to come up with some extremely creative campaigns for the card. SPC’s loyalty partners are placed into six categories: fashion, dining, sports, travel, beauty and lifestyle. The client was sold on the idea of a campaign centered around the idea that parents, teachers and other authority figures couldn’t grasp these six categories. Things like fashion, sports and beauty were for the students to understand and that’s why the card belonged to them.

Several concepts for the card were presented to the client. Including variations of black and white cards that would come with a sharpie in the package for students to sign on the front with. Typically students are required to sign the back of the card, by bringing the signature to the front and including a sharpie we wanted to push the feeling of owning an exclusive card.

The final card took a different route and was one I tried to make look more elegant and luxurious. The inspiration for this card comes from security features on higher-end credit cards. In very fine print the words ‘Student Price Card’ formed a line pattern across the background of the card.

The final packaging featured the card itself large and center, colourful hexagons that represented the six SPC categories, and all information in the top half. This was by design so that when cards were placed at cash registers in holders, none of the information would be hidden, as the bottom half of the package would have been covered.

Posters were created to help push the campaign through high schools.

The most challenging part of this project was the redesign of SPC’s website. Engine Advertising Inc. was commissioned to only do the design work for this, and the agency which currently handled their website would layer my design on top of the site’s already existing interface. This meant I could not change much about the site and that my new graphics would have to fit directly on top of their old graphics. If a call-to-action box was 200 pixels by 200 pixels, my new design for that box had to be 200 pixels by 200 pixels.

I was able to design something that matched the new campaign and although it was challenging (because things could have been altered/shifted/resized to make them better) my design followed the same interface and structure as the old design.

The mobile website was another challenging part of the scope for a similar reason. Another agency was working on the development of the site and wireframes had been sent to us. Development started the same time I started my designs, so once again I couldn’t stray too far off from the path that was set out for me.

Similar to the mobile website, the iOS app had wireframes already made. I quickly got started on my designs for the new app and when it was finished, we were miles ahead from where the old SPC app was.

Xyience is the official energy drink of the UFC®. Several campaigns are created at Engine Advertising Inc. throughout the year for Xyience, and these campaigns require in-store POPs at stores like Mac’s Convenience, 7-Eleven, Pioneer and Quickie. These items consist of a case-stackers with header-boards and fridge static clings. The header-boards and clings promote a contest give-away (usually tickets to an upcoming UFC® event and a trip to the hosting city) and inform people on how to enter.

The online contest page was reworked several times, the following design simplified entering the contest by allowing users to use their Facebook, Twitter or Google accounts to enter. The steps of the contest also became more fluid and was nowhere near complex as it used to be. I also designed a much better mobile experience, allowing users to easily enter while walking out of the store with the can of Xyience they just purchased.