Goal: Redesign and build a promotional landing page for a holiday sale
Project Focus: UI Design, Front-End Development
Time Frame: 8 weeks
Team Size: 2
My Primary Role: UI Designer, Front-end Developer, Back-end developer
Tools Used: Adobe Photoshop, Adobe Illustrator, Eclipse, SourceTree, GitHub,
Salesforce Page Designer
Salesforce Page Designer
Final Project Deliverable: Live web page
Phase I: Research
CPO Outlets is a leading online retailer for tools & equipment. Operating since 2004, they've become a favorite of bot professional and do-it-yourself (DIY) customers. They offer access to high quality tools at competitive prices.
The goal of this project was to create a new/updated promotional landing page for the 2021 Father's Day sale, with a major component of the page being a gift guide section to direct customers towards specific items that best suit their needs; specifically, a section dividing tools by function/type and a section dividing tools by price.
The first step fo this project was to gain some insight into the target audience for this sale. by taking a look at user and sales data from past iterations of the same sale event, the team found that the most effective subsets for categorizing the product selection would be: woodworking, DIY, outdoor, automotive, multi-purpose, and small/specialty tools. Similar data also showed that the optimal price divisions would be gifts under $50, under $150, under $250, and over $250.
Phase II: Ideate
The next step in the project was to settle on a page layout and general design direction. Our Merchandising team provided us with an initial set of requirements and wireframe layout that outlined all necessary promotional pieces for the page, and this was the general page layout we stuck with.
For a visual style, we chose to expand on a previous year's motif of a dad's home garage workspace, focusing on elements of a wall mounted peg board, and UI elements in the style of vinyl stickers.
Above left: initial wireframe layout
Above right: CPO 2019 Fathers Day landing page
Above right: CPO 2019 Fathers Day landing page
Phase III: Test
After deciding on a course of action, I designed a higher fidelity mockup, all of the custom iconography and static imagery in Photoshop and Illustrator, and put it all together in a pared down (un-merchandised) version of the page using Salesforce Page Designer. Nearly all of the components used on the Father's Day page are non-standard page designer pieces, so many of them needed to be created from scratch or modified (using JSON, HTML, Javascript, and CSS) to suit the purposes of the project.
Above: high fidelity mockup
Phase IV: Develop
The final step in the project was to fully flesh out the web page and make sure everything was functional and visually sound. This encompassed building/adjusting any remaining page components, making any style changes to visuals or behaviors, and making sure the experience worked well across mobile and desktop platforms.
Above: final screenshots for desktop and mobile
Going Forward
Overall, I was very pleased with how this project turned out, and didn't face any major obstacles throughout the process. My greatest challenge was developing custom components to implement on the page, and finding creative ways to responsively display a row of five items.
For future iterations of projects like this, I would love to be able to implement more user testing. I feel like it would have been hugely beneficial to be able to use actual user data to see how the page was interacted with to see what elements converted best and which one didn't, as well as being able to see if the layout was effective in driving sales (the goal of the page). I would also like to see if I can make the design a bit more clean and streamlined, to better fit with the company's updated brand image.
