Ray Allen Website Redesign
Strengthening the premiere tactical K9 brand with a fresh look and an engaging website that drives customer conversions and helps to establish the brand as an authority in the industry.
My Role
UX/UI Visual designer from concept to delivery
The Tools
Adobe Photoshop, Adobe Illustrator, Wireframing, Shogun Page Builder
My Key Contributions
Visual Design, Interaction Design, Brand Guidelines, Iconography, Copy Editing, and the Competitive Audit. I also assisted in the development and implementation of the information architecture and Sitemap for the website.
My Responsibilities
Redesign of the visual design of the website for both desktop and mobile functionality from ideation to completion. Competitive audit research on direct and indirect competitors in the e-commerce marketplace. Developer of revised comprehensive brand guidelines and standards. Created a set of guidelines that outline the visual identity, tone of voice, and overall brand personality.
The Opportunity
The initial website was characterized by outdated features, as well as various limitations and issues stemming from its utilization of the Magento platform.
The Idea
In an effort to enhance the website's overall performance and align it with contemporary standards, the company embarked on a mission to revamp the site, focusing on modernizing its functionality, improving its visual appeal, and establishing the brand as a prominent contender within the industry.
Outdated Magento Design
The Brand/Story
RAY H. ALLEN
Ray Allen founded Ray Allen Manufacturing, starting as a Saddle and Harness business in 1948. He later developed a relationship with the Mule Division at Camp Carson, providing tack products. In the early '50s, he assisted the Mule Division by providing basic K-9 products, leading to the development of Ray Allen as it is today.
Competitive Research
Analysis
I compiled a list of competitor and client-selected websites that I searched through to find consistent industry themes.
Insight #1
Direct and indirect competitors have cleaner designs above the fold with full-length banners and modern header designs.
Task: Redesign the head to modernize the look and amplify the brand styling so it is no longer generic.
Insight #2
Direct and indirect competitors have a more organized and header-central information architecture for easy access to help the users access a broad range of products.
Task: Review and restructure the information architecture to emphasize and organize the outdated drop-down menus.
Insight #3
Direct and indirect competitors have a brand-directed style and aesthetic for a specific consumer base.
Task: Create a unique sylistic design for a cohesive look and feel across the website and brand.
Style Guide
I created a style guide for the website, creating a specific swatch set from the logo. We used this across the site to keep the brand cohesive and recognizable.
Oswald was chosen for headers because of its bold and strong appearance. With its clean and approachable look, Open Sans was chosen for the body text.
The logo design was already in place and established. It was not changed but only used for reference when creating the style guide.
Color Palette
Logo
Typography
New Brand Imagery
With the redesign in full force and a need to take new asset photos for the new design and a new webpage. I planned a photoshoot and gathered a photographer, a dog, and his trainer to take some pictures of our product in action. I also had a photographer take some photos of our manufacturing process in the warehouse to emphasize the quality and care we put into our products.
100+
Photos Taken
6+
Hours spent taking photos
12
Ideal Photos Used
5+
Hours Editing Photos
Unedited photography from the field photoshoot
Unedited photography from the warehouse photoshoot
Hi Fidelity Mockup
With the ideas and assets in place, it was time to build the high fidelity mockup for presentation.
Header section
I designed an appealing eye-catching above-the-fold area with a large slider section to highlight our products and define the brand. The header was designed to highlight the logo, clarify the informational architecture and provide easy-access section buttons to help the visitor navigate the wide variety of products on our page.
Call to Action
The hero is designed to update/change imagery from week to week. In the first slide, as a call to action we often highlight new products or the newest blog video. The videos that are linked here are made to boost SEO and brand awareness. The remaining slides are used as another way to attract viewers to different categories or sections of the website. These are the initial design mock ups that I had for this section.
Below the fold section
I designed this section to carry over the style from the top of the page but to also highlight the most popular categories of our website with another easy-to-access section of our website. I also included an about us/our history section to draw attention to the great history of our brand and why our products are made with high quality and are well-designed. The video link included in this section plays a video that I also storyboarded and filmed as a promotional video for our company.
Advertisement Callout / Brands highlighted / Email Sign up
I designed this section of the homepage to highlight any active advertisements and product offerings.
I included a brand section to add a focal point for top brands
At the bottom, I included a signup section to entice customers to share their email in exchange for deals and discounts.
Footer / Important Information / Site Links
This section has been crafted to incorporate the fundamental yet subsidiary components footer. Positioned beneath the site links, a distinctive element resides. Ray Allen Manufacturing is based in Colorado Springs, CO. The image features the sacred Pikes Peak and it serves as a visual representation of the companies hometown. The peak offers a breathtaking panorama of the entire city spanning for countless miles. This inclusion has been purposefully devised to reinforce our brand's status in the USA, paying an honorable tribute to the environment in which our valued staff call home.
Iterate and Improve
The foundation of the new design was agreed upon and the design was ready for testing and iteration. I built the new design in Shogun and the team began to to make further edits and iterations based on feedback.
Call to Action hero/header section
The top area was updated to include a search area with quick links to access more popular areas of the website. Just below the category links were updated to include the new hierarchy for redesigned information architecture. The banners were edited to include a black transparent box with an implanted text and button to improve SEO while removing the elements from the imagery.
Below the fold section
We removed one of the prime product squares and added another K9 Guild section to further entice new visitors to sign up for our rewards program. Below this, we added a “Top K9 Products” section where we highlighted our top sellers from the main categories on our website. Built into these product links are customer reviews so that the user can see which items carry the best consumer ratings.
About Us / Highlight Blocks
We moved down the “About Us” section and embedded the video I shot and edited from YouTube directly onto the home page for easy viewing. We added another box for the brand highlighting section to include the monthly rewards offer. I also created a Thin Blue Line graphic to help the Police officers accessing our page to locate our uniquely branded items that include the blue line.
Advertisement Callout / Brands highlighted / Email Sign up
We beefed up this section with stronger imagery and more popular links. We kept the brand section and added a social media section with a carousel of social media shares from brand ambassadors’ positive reviews and product recommendations.
Footer / Important Information / Site Links
The site map was finalized and we updated the footer links to cover a robust section of options on the website.
Lead tool #1
Pop-up offers
The K9 Guild is a rewards program our team designed to help draw a visitor further into the brand of Ray Allen and it is an ideal opportunity to prompt the visitor to share their contact details in exchange for a 10% discount and a K9 equipment resource.
Lead tool #2
Contact Us option
The marketing team created a Contact Us function built into the website to contact the team directly which ads a personal access point for potential or active customers to track orders or ask questions.
Formatted for all screens
Responsive design
The final design for this project was to make sure it looked good on all screens. When I used the Shogun Page builder I was able to maximize the design for multiple screens.
