Frederick Lee

Stanley Black & Decker, 2016 Year in Review


Stanley Black & Decker,
2016 Year in Review

Visit Website

Stanley Black & Decker is a Fortune 500 American manufacturer of industrial tools and household hardware and provider of security products. In 2016 Stanley Black & Decker had a new CEO and a newly defined purpose; digital innovation and social responsibility. Hence, the company pursued to create improved interactive annual reports from previous years based on their new messages. Therefore, my team set up the three goals:

1. Deliver Stanley Black & Decker's newly defined message in completely refreshed visuals;
2. Straightforward navigation and user flow;
3. Visualizing the corporation's complex data and stock information into polished visuals.


Simplified Stories

My team broke down the company's stories into three significant sections and multiple secondary pages by collaborating content strategists and creative writers. Then we created the rapid wireframe to see the site pagination in a glance.


Landing Page

Landing page needs to attract visitors' attraction in a glance. Hence, I explored multiple visual concepts. In a result, I came up with animating typography and bold carousel animation on the landing page that lets users see the stories briefly and effectively.


Enhanced User Experience

My team created simple navigation system with seamless micro-interactions to focus on the content and create straightforward user journey at the same time. Creating simpler navigation system helped my team to categorize and balance the contents smoother. Also, we included other functionalities like content filters and jump-links for smoother user experience.

Interior Page in Mobile
Navigation System

Web Animation & Infographic

Web animation was the key feature of this project to convey look and feel of Stanley Black & Decker's masculine and futuristic products. My team also strived to visualize the company's 2016 highlights such as their achievements, new partnerships, and financial highlights in a glance through creating animating infographics.


Responsive Design & Product Testing

My team constantly tested the product and developed the product to fix the errors and over-complicated UX by collaborating with programmer through using Trello. Also, we tested the product with different operating systems other than iOS like Windows Dell laptop and Galaxy phone.


Quote from Investor Relations Team

“Ideas On Purpose is a great partner and an extension of our team. From day one they used my time well with a defined process that made for a smooth project. They married corporate, financial and sustainability content seamlessly and brought our company’s key messages to life in print and online. And, most importantly, the IOP team was easy to work with because they listened well, offered good options and were flexible — especially under pressure… A great process, a great product and great people to work with. We couldn’t be happier with the results.”

— Stanley Black & Decker Investor Relations Team



Stanley Black & Decker 2016 Online Annual Report won:

  • Gold Prize from American Web Design Awards Platinum & Gold, Top 100 Worldwide
  • Top 50 in the US from League of American Communications Professionals Vision Awards
  • Recognition from American Web Design Awards
Client: Stanley Black & Decker
Design & Development: ideas on purpose
Product Designer: Frederick Lee
Creative Director: John Connolly
Strategist: Michelle Marks
Project Manager: Morgan Sendor
Developer: Chris Manlapid
Creative Writer: Steve Starbuck