reCollect2 Company | Product Website
Brand Refresh, Website Replatform, and Customer Experience Improvement
About the Company
reCollect2 Company assists and supports the recycling efforts of organizations via the reCollect2® recycler, a customizable recycling receptacle manufactured in Wisconsin. The reCollect2 is recyclable in and of itself, making it a truly green solution for hospitality, office, education, and other facilities and businesses.
Website: www.reCollect2recycler.com
My Objective
My objective as the brand/user experience creative director and web designer for this website initiative:
Improve the website’s overall visual look-and-feel, content architecture, and administrative capabilities by transitioning from client’s old platform to WordPress platform. But, above all else, I wanted to work very closely with Ann, owner of reCollect2 Company, to realize her vision for a better website experience for her customers and her company.
Process At-A-Glance
- Learned about brand and content requirements through Discovery.
- Developed new website sitemap along with wireframes.
- Indexed all pages and content to ensure any obsolete pages would be redirected to new ones.
- Reorganized entire content structure with copy suggestions and improved calls-to-action within a shared spreadsheet, so client could easily see the website come together without waiting for development.
- Created ‘Style Tile’ to narrow in on new brand.
- Mocked up homepage based on the approved Style Tile to further solidify the new brand look-and-feel.
- Built website on WordPress page-by-page with frequent client review.
- Optimized titles and meta descriptions for search engines, and coded redirects to ensure obsolete pages still indexed by search had a new home.
- Conducted final QA testing across several devices to ensure the website looked perfect at every size.
- Provided a “quick-start” guide and training session to ensure my client could make any adjustments and updates if necessary.
THE TRIGGER
Client challenges, which sparked this initiative
Dissatisfied with the performance of her website and platform-provider, Ann, the owner of reCollect2 Company, initially contacted me to help her refresh just the homepage inside of her current website platform. She wanted an updated brand look-and-feel, something more fresh, vibrant, and representative of her company’s product and vision. After some discussion about her content-goals for the future, she thought it best to cut ties with the former platform and move to my proposed solution of WordPress as her CMS. I sensed Ann needed someone who could absorb her feedback, but grab a good hold of the creative direction reigns, so to speak. I was definitely up for the challenge!
I made the following three goals my north star for the entire length of our engagement together:
Goals for the rebrand and website improvement initiative:
- Better Customer Experience:
Improve the architecture and content so the website feels more cohesive and users are able to travel through each page with ease and actionable direction on what to do next. - Beautiful, Refreshed Brand Design:
Improve the art direction and visual branding of the website, add more color and revise the background photography using nature as a muse, in order to remind website visitors of the intended mission behind reCollect2. - Easier Website Development & Administration:
Lay the groundwork for a website that could be maintained and updated by my client or someone within her company, if she wanted to take the reigns at any point. This includes using a WYSIWYG component-driven theme and providing training time and documentation (how to post a blog, update content sections, upload images, etc.)
My Solution
A glimpse into my project lifecycle
Better Customer Experience
To fine tune my client’s customer experience, we needed to hone in on every piece of copy and call-to-action within the entire website. With our new sitemap and wireframes as a base, the content spreadsheet became an invaluable toolfor us throughout the engagement. In the early phase of the project, my client could see page structure come together without waiting for the website development, and then easily rewrite copy and make architectural suggestions. Working within a shared spreadsheet—rather than comments marked on wireframes or mockups—helped expedite the overall development process.
sitemap
content spreadsheet
wireframes
Beautiful, refreshed brand design
I crafted a new brand look-and-feel for reCollect2 by starting with a Style Tile. A style tile—more than a moodboard, but not quite a fully mocked up homepage—is a visual tool to help refresh a website’s look-and-feel, with some user interface elements (buttons, for example).
TYPEFACE: I selected sans-serif Questrial for the main body type as it most closely resembled the font Avant Garde used in the reCollect2 logo, but as a secondary font for headlines and button text, I also chose Volkhov, a sophisticated, but friendly typeface that would enhance the warmth of the content and overarching story.
COLOR: Our biggest challenge at this stage was determining the brand’s primary support color. Green was too obvious and used by most of reCollect2’s industry peers, partners, and competitors. Ann wanted to stand apart. A deep burgundy was a potential choice, in order to keep the earthy warmness that would complement the product, but another peer in the industry had recently rebranded with a similar primary hue. We finally landed on a warmer-toned, dusty blue—another color associated with recycling—that would be used sparingly as button and link only. We also decided to use green as a secondary color to highlight certain icons, text, and buttons. Both colors would also be well-represented within the photography.
PHOTOGRAPHY: Ann suggested we leverage the photography of a colleague of her’s: Wisconsin nature photographer Chris Herriott. What I love about Chris’s photography is the lushness and detail of his landscapes. There’s so much to take in, so I decided to focus on smaller sections of each image: a swatch of texture in the trees, the grass, the sky. My challenge was to incorporate Chris’s work in such a way that it would not just be a backdrop for Ann’s product, but instead, I would use the photography as a supporting character woven into her product’s story. I applied a bit of a treatment to each photo so white text on top would be legible, and then I added an uneven paper edge so banners would appear as though we ripped away the website to reveal the earth beneath.
style tile
homepage
Easier Website Development & Administration
To expedite the delivery of the website within six-weeks, I dismissed coding from scratch and selected Uncode, a robust theme with lots of structural versatility, but minimal design, so, visually, we could make it our own. With my client’s collaboration, together we improved several areas of the website experience.
With Ann’s content assistance, together we improved 3 main development areas:
1. An enhanced Product Page:
Along with using iconography to quickly illustrate the key benefits of the reCollect2, I designed an animated banner to show how uniquely this product comes together: both in its ease of separation and the different ways a customer can imprint the surface. Then, through copywriting and images, together we told the story of how a customer can work with reCollect2 Company to pick their product’s color, imprint messaging, and imprint layout.
Product Page | Before
Product Page | After
2. A new Get A Quote page:
The original website architecture included a “Pricing” page: a very basic form with a few fields. Using the Contact Form 7 plugin, and with Ann’s customer knowledge and guidance, I coded a new robust form, including new fields for each of the reCollect2’s selectable assets: color, imprint, layout. For those customers who have outstanding questions and aren’t able to fill out a quote form just yet: the page also features a final footer call-to-action that directs visitors to the Contact Page.
Pricing Page | Before
Get A Quote Page | After
3. A new Recycling Resources page:
A space dedicated to a curated list of links to recycling articles, tips, and processes was another new page Ann wanted to include in the updated architecture. Because this page would likely require updating from time-to-time, I wanted to ensure new resource links were easy for someone else to add. The great thing about the Uncode theme is that, in the back-end, content boxes can literally be copied and pasted below one another. With a little bit of training, if Ann decides to add new links, she can accomplish this with no coding experience required.
Additionally, together we worked to enhance the About Us page to include more content than the original website, as well as an area to showcase the reCollect2 Instagram photos. I also streamlined the visual presentation of the reCollect2 blog experience—aptly named Collectivity—as well as provided training materials so Ann could add new blog posts without my assistance. And finally, as the pages came together, I adjusted various content blocks and code to ensure the website looked just as great on smaller devices like tablets and phones. For example, the Resources page on a desktop computer or laptop looks great with the circular images next to each link, but on a tablet and phone, these images are a bit excessive and take up valuable real estate, so I removed them for these devices only.
Final Thoughts
A constant flow of communication between myself and my client was crucial to the website’s success, which included my client’s participation in copywriting and content feedback: an area of scope that can frequently delay a project launch. Without this collaboration, a six-week project cycle would not have been possible. I must also add that this partnership was such a success, my client has sincehired me to craft additional pieces of business collateral for reCollect2. This way, the brand will remain consistent across all sales and marketing channels.
The New reCollect2recycler.com
“As The Crow is a tremendous asset to our small business. Katie has a wealth of creativity, is highly professional and always completes projects in a timely manner. I would recommend Katie’s talent to any business looking to re-brand, create a new website or design marketing pieces and/or strategies. (Everything looks incredible Katie. Your creativity, responsiveness, organization and execution has exceeded my expectations. Thank you thank you for making this project a great experience.)”
more work. check it.
ZEON SOLUTIONS
eBusiness Services
AUGUSTA ACTIVE
Sportswear eCommerce
THE FLASH NITES
Illuminate History
TOSA TONIGHT
Summer Concert Series
