PositivePromo_Feature800.jpg
 

Website Design for Positive Promotions

This project was to refresh the Positive Promotions website, positioning the brand as modern and professional with an upbeat vibe. The primary goal was to establish and strengthen the online brand identity by coordinating visual elements, organizing information clearly, and making select functionality improvements. This project included developing an online style guide defining a color palette, fonts and treatment for links and buttons.

 
 

CLIENT:

Positive Promotions, a business offering a variety of top-quality personalized promotional items to the Education, Healthcare, Public Safety and Corporate marketplace

 

SKILLS:

Wireframing
User Experience
Design
Page Layout
Illustration

 

SOFTWARE:

Photoshop
Illustrator

 
 
BackgroundPatternKP.gif

Homepage Wireframes & Design

 

There was considerable room for improvement to the merchandising and marketing efforts on the homepage. The feature slider was kept, as requested by the client, to provide messaging to its various markets. Thumbnail graphics were replaced by text, which would be more insightful for customers.

Added below the feature is an area to build shoppers’ confidence and present the business’ unique selling points. Included is their longevity, free sample program and customer service expectations.

The most substantial enhancements to the homepage were the next two sections. The first presents links to the business’ core product lines. The second displays unique artwork on their turnkey, ready-to-ship solutions—a product offering that sets them apart from competitors.

 
 
PositivePromo_Home.jpg
PositivePromo_HomeBefore.jpg
PositivePromo_HomeWireframe.jpg
 
 
BackgroundPatternKP.gif

Site Header

 
PositivePromo_Header.jpg
 
 
PositivePromo_HeaderBefore.jpg
 

The header was designed to encompass the new online brand identity. The cart tab was emphasized using a pop of color and space for promotional messaging was added along the top of the site.

Research indicated high usage of the search feature. For this reason, it was centrally located in the header and surrounded by white space. The tagline was repurposed as a search suggestion to take advantage of this frequently viewed area.

The light blue background behind the main navigation helps to define the header area as well as give it visual presence.

Modern icons were created for the customer service links and information.

The functionality for the shopping cart preview window was added on mouse click. The mega menu window was refreshed with larger font sizes, more spacing between links, and additional ad space.

PositivePromo_HeaderCart.jpg
PositivePromo_HeaderMenu.jpg
 
BackgroundPatternKP.gif

Site Footer

 
PositivePromo_Footer.jpg
 

The footer was revamped beginning with adding a section for Positive Promotion to feature upcoming events that are important to their target market. A high-contrast blue bar is used to emphasize the contact information and email sign up form.

The footer links were reassigned to four, new, intuitive category headings and a section was constructed to highlight the most important links in an orange font. A space centered at the bottom of the page was established for social media links, which are branded in vibrant orange.

PositivePromo_FooterBefore.jpg
 
 
BackgroundPatternKP.gif

Product Detail Page Refreshed

 
PositivePromo_PDP.jpg
PositivePromo_PDPBefore.jpg
 
 

Alternative Solution for Personalized Products

The following was a rough draft of a solution for the product detail page that meant to provide visual consistency for the various product options. It was important in this layout to keep the product image visible for a future project that would allow the image to update as options were selected and customization was added.

PositivePromo_PDP_Alt1a.jpg
PositivePromo_PDP_Alt1b.jpg
PositivePromo_PDP_Alt1c.jpg
 
 
 
BackgroundPatternKP.gif

Checkout Process

 
PositivePromo_Checkout1.jpg
PositivePromo_Checkout2.jpg
PositivePromo_Checkout3.jpg
PositivePromo_CheckoutBefore.jpg
 
PositivePromo_Confirm.jpg
PositivePromo_ConfirmBefore.jpg
 
 
BackgroundPatternKP.gif

Fonts & Colors

 

The color palette was chosen for colors that are perceived to be professional and vibrant. These colors can be characterized as saturated in nature. Previous versions of the website and logo frequently utilized various shades of blue. For this reason, an dark royal blue was selected as the base color. It was paired with a dynamic orange for a pop of color and energy.

The color palette is rounded out with a vibrant azure and a light baby blue; a modern, clean gray in two shades; a brilliant yellow that would contrast well against the royal blue; and a luminous red to depict key information.

Since the the logo uses serif and the business has roots in publishing, it only made sense to use a serif as the primary font. In this case, Merriweather was selected for its perfect balance of a timelessness and open, airy nature. It was paired with Roboto for its clean modern lines.

PosPromo_StyleGuide.png