This was a large project at my current job, which is a children’s toy company that has a large assortment of outdoor play products, mainly swings. Although we had many product listings of the swings, there was not a lot of content or a focus section on the website that talked about the brands lines. The idea of doing a large landing page to bring together all the swing’s listings, as well as allow customers to compare benefits between swings was therefore launched.

SwingGuide_2LONG.jpg

Being a smaller company, we do not employ a developer or full time front-end dev, but I decided to take on the role since I had already been coding and producing our blog pages. I also took on the role of project manager since it would allow me to control deadlines and the proofing schedule since this was due to be launched before the start of Q4.

After basic brainstorming sessions we drafted out a total of three pages, all covering different topics. The largest of which would be the comparison guide of all the swings themselves. While our copywriter got down to work gathering all the information needed, I wire-framed out the basic look of the page as well as tackling how it would respond on mobile. We needed the guide to function just as well for mobile as a large part of our customer base shops and visits our site exclusively on their phones. I also wanted to have the chart written in code, instead of relying on just images so that it would follow ADA compliance and be assessable to all.

Screen Shot 2022-03-17 at 9.03.44 AM.png
SwingGuide_2LONG.jpg
Chart view on Desktop
Chart view on Mobile

I settled on a series of rows and columns that would display the top four attributes that our customers are more looking for in a swing (with several place linking back to the product’s listing so that conversion can be achieved quickly). We also separated swings but shape, and then ordered by carrying capacity.

This comparison chart was not only affective in customer engagement and conversion but turned out to be an internal asset as well in the training and education of new employees.

20211007-HSs-SwingGuide_Assmb3.jpg

The next page that I worked on was focused on a Q & A on installing the swings. A lot of this information was included in the instructions when you purchased the swing, but we currently did not display it on the site in any way thus leading to a lot of customer service calls. Since it would be very copy heavy, I wanted to make sure and use a lot of visuals that would better help explain the steps involved. I worked on several illustrations and step-by-step processes to include in the content.

20211007-HSs-SwingGuide_Assmb3.jpg
20211007-HSs-SwingGuide_Assmb3.jpg
Q & A section and overview on hanging
20211007-HSs-SwingGuide_Safety.jpg

For the last page there was a focused on the design and manufacturing process of our swings, as well as materials used, and testing process. For this I included large photos illustrating the main points to be easily scanned. I also illustrated our three big talking points in our testing regulations. This helped turn a page from what was a large block of copy, into an engaging and scannable read.

This project was a big undertaking, but it turned out to be extremely successful. It went from the planning stages to launch in two months and it was of my favorite recent projects that I have worked on.

Tools Used:

Adobe Photoshop

Adobe Xd

Adobe Dreamweaver

Landing Page Design - HearthSong Swing Guide