Bailey Nurseries
Responsive Web Design
Branding
Bailey Nurseries is a well established, wholesale nursery based in Saint Paul, Minnesota that aims to bring innovation to the horticulture industry; and the highest quality products to both businesses and consumers. Founded in 1905, their brand is well known and they are often thought of as one of the best providers of quality trees, shrubs, and perennials in the country.
Team Makeup: UX designer (me), creative director, lead front-end developer, lead backend developer
Project Duration: 1 year
Tools Used: Sketch, Illustrator, Photoshop
Site Link: baileynurseries.com
Project Overview
Having gone through a recent brand refresh, Bailey was looking for a new website to match. This is where my team came in. After learning more about what the client was looking for, it was decided that I needed to design a website that was rich in story-telling and while simultaneously helping Bailey driving product sales.
Strategy
I met with and collaborated with project managers, my creative director, and people from Bailey Nurseries to map out and execute a plan to deliver this story-telling, product-driving site design that would tie in with their brand.
Branding
Many of the existing branding work for Bailey had already been done prior to my involvement, including their new color palette and logo. However, part of my job was to identify and create complimentary elements to their brand that would work for their website. This included selecting fonts, creating custom icons, and creating a strategy for their new website’s photography.
Custom Iconography
I created the custom iconography for Bailey and all their sub-brands. These user-friendly icons they were meant to tie in to the previously established brand and sub-brands. To do this, I used colors of all their brands and stylized lines to tie them in with the brand’s new fonts and imagery.
Colors & Images
Bailey has bold colors and exceptional photography, which I made sure to highlight throughout the website.
For colors, I intentionally used them sparingly to highlight important pieces of content, such as CTA boxes, buttons, and hero images.
Additionally, I had a lot of fun helping convey the imagery of out-of-the-box thinking and growth to represent Bailey’s brand and products.
Examples of this can be seen showing product images frequently “breaking outside” their containers when used on cards.
Home
HIGHLIGHTSFull-screen hero video with scroll indicators to draw in the attention of users
Full-width banners with bold cutouts of products to spotlight Bailey’s stunning photography and giving the users a preview of what content to expect inside each page.
Content frequently breaks outside of its container to speak to out-of-the-box thinking and mirror the idea of “growth”.
Category Pages
Two main kinds of category pages:
The first being Bailey brand pages. These were customer-focused pages that more heavily relied on custom icons and images to help advertise the Bailey’s brands to their customers.
The second being their Programs pages. These were aimed at potential retailer- and grower-partners. These pages relied more heavily on informational graphics and parallax scrolling, to help lend to the forward-thinking technology Bailey is known for.
Use of Parallax
We used parallax scrolling sparingly on the website to highlight product features and, as can be seen in this example, further elude to the imagery of “growth”.
Note: this feature is no longer enabled on their live site.
In Review
While changes have been made since my involvement with the design, the website are live and have helped bring Bailey’s digital presence into the modern age.