Stanley Security Shop

Project Brief:
Create a responsive microsite to promote and sell Stanley’s Small Business Security offerings and generate sales leads.
This e-commerce experience would live as an extension on Stanley’s existing site, allow small business users to shop for products that fit their business type, size and needs and also generate leads for Stanley Sales Team to sell customized kits and plans.

Target Audience:
Small Business owners across North America for whom security is not just about an alarm or a camera – it’s about peace of mind. To minimize losses from break-ins, theft and vandalism, they need a security system that’s designed for them – a system tailored to meet their everyday security challenges.

Timeline:
4 weeks

My Role:
Art Direction, Visual Design, Creative QA

Where they were

Stanley was sending its customers to a form on their security marketing page, wherein users would need to provide details about their business and needs, and wait for a Stanley sales member to then get in touch with them and walk them through their catalog of security kits. Usage of this form was low, and Stanley’s focus for the upcoming year was to build and improve the self-serve e-commerce experience, while still creating sales leads wherever necessary.

DESIGN Strategy

I worked with Stanley’s marketing team and my development partner to finalize requirements and user flows for this experience. Applying e-commerce best practices, based on learnings from previous projects and user experience principles the following flow was drafted.
It accommodated the marketing team’s goals to generate awareness and promote top products. It allowed for users to follow an intuitive path of browsing products, filtering them by need, and checking out with products and plan of their choice.

For users who are here to self-serve:
The product catalog, details, and shopify-like checkout experience would guide them through their shopping experience.

For users who were not sure of what fits their business:
A step-by-step wizard would gather information on their business, security needs etc., and would connect them with a Stanley Sales Member for a quick and customized quote.

DESIGN SYSTEM

Once the flow was approved, and before the webpage design started, I put together a mini design system in order to build a stable foundation for the visual design and development work. This design system was based on Stanley’s brand guidelines and some user experience wireframes put together by Stanley’s partner agency. Components and patterns were created with tablet and mobile specifications in mind.

UI basics

UI PATTERNS

Final Product