HOW MODULAR TEMPLATES CUT DESIGN + BUILD TIME IN HALF

Transcription

1 HOW MODULAR TEMPLATES CUT DESIGN + BUILD TIME IN HALF

2 WHO Ferguson Enterprises is the largest U.S. distributor of plumbing supplies, PVF, waterworks and fire and fabrication products. It is also a major distributor of HVAC equipment and industrial products and services. Ferguson employs approximately 26,000 associates in 1,400 locations nationwide.

3 CHALLENGE Ferguson s mobile audience was growing, but since they didn t have an in-house developer, some of their s were not responsive. They wanted to redesign and rebuild their s to deliver the same seamless mobile experience as their responsive website. Unresponsive Their team consisted of marketers and designers, responsible for Ferguson Enterprises corporate campaigns, and s for their five sub-brands and additional business groups. Since Ferguson didn t have an internal developer, they teamed with digital agency Whereoware to develop pre-coded and pre-tested responsive templates. Ferguson s goals were threefold: Improve key performance indicators, such as clickthrough rate Achieve optimal experiences across all devices Reduce design and development time

4 SOLUTION Whereoware and Ferguson decided on a modular approach for building these templates, ultimately increasing clickthrough rate 50% and decreasing build time by two hours per . Modular design enables Whereoware to build flexible templates with modular building blocks that Ferguson can swap in and out for endless combinations of layouts and designs. Whereoware built five responsive master templates and multiple design modules per , including hero image and banner image modules. Each master template aligns with either Ferguson or their sub-groups branding and consists of 15 unique modules stacked in a flexible layout. Module Building Blocks Reusable Stackable Customizable

5 DEVELOPING THE MODULES + TEMPLATES Ferguson first collected 30 examples spanning their corporate, sub-brand, and sub-group campaigns. They identified how customers were interacting with their existing s to retain high engagement elements in the new templates. Next, they developed an outline of necessary design trends, brand-specific design needs, technical requirements, and various layout options to include in the templates and modules. Whereoware then designed and developed 15 modules and began building wireframes of the templates.

6 DEVELOPING THE MODULES + TEMPLATES Whereoware branded the modules to align with each sub-brands unique fonts, logos, and colors. Logo 1300PX WIDTH HEIGHT CAN BE VARIABLE Full Width Hero HEADLINE TEXT PRICE SUBHEAD TEXT Image With Text Adipiscing elit. Praesent vitae rutrum nisl. Suspendisse sit amet nisi ut nisi bibendum laor. Praesent vitae rutrum nisl. Suspendisse sit amet nisi ut nisi bibendum sit amet. DESCRIPTION DESCRIPTION 2 Column Bullet List Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae rutrum nisl. Suspendisse sit amet nisi ut nisi bibendum laoreet. Sed quis accumsan quam, vitae consequat justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae rutrum nisl. Suspendisse sit amet nisi ut nisi bibendum laoreet. Sed quis accumsan quam, vitae consequat justo. Background Image

7 Whereoware then coded and tested each module to ensure seamless rendering across every device (mobile, tablet, desktop) and service provider.

8 TRAINING Next, Whereoware trained Ferguson s creative and marketing teams to ensure they understood the benefits of each module. MARKETERS.hide { display: none!important;} Concentration on HTML code Outline implications to current process.logo {padding-bottom: 30px!important; padding-top: 30px!important;}..hero img {width: 100%!important; height: auto!important;} Hands-on modular build example DESIGNERS Emphasize modular layout structure Outline design possibilities and limitations Hands-on modular design example

9 Whereoware and Ferguson wrote comprehensive training guides for both teams outlining each module s name, code identifier, and specifics, including a screenshot of its rendering. Whereoware also left comment code within the HTML, so their team could decipher the code, whenever necessary. Since the templates are flexible, on-brand, and thoroughly tested, Ferguson s teams are unlikely to spend much time in the code. Design PSD with guides and folders for each module <!-- BEGIN: MOD1 - Hero Image --> Consistent and identifiable naming conventions <!-- END: MOD1 - Hero Image --> <!-- BEGIN: MOD2 - Full Width Text Block --> <!-- END: MOD2 - Full Width Text Block --> <!-- BEGIN: MOD3 - Image Left / Icons-Text Right --> <!-- END: MOD3 - Image Left / Icons-Text Right --> <!-- BEGIN: MOD4 - Icons/Text 2 Column --> <!-- END: MOD4 - Icons/Text 2 Column -->

10 RESULTS Ferguson and their sub-brands switched production to the modular templates in Their customers are enjoying a seamless experience on every device, while Ferguson s internal team saves production time and boosts efficiency. CLICKTHROUGH RATE INCREASED BY 50% PRODUCTION TIME DECREASED BY 2hr/ IN THEIR WORDS Using the modular template has cut design time for me by half. - Tiff Bell, Graphic Artist Utilizing modular templates has proven effective for the Customer UX, as well as the Specialist UX and Designer UX, while building out s. This has allowed our Marketing team to deliver quick, relevant, and effective s. - Laura Smark, Senior Designer With 15 mods, I have 1.3 trillion possible wireframe combinations ready to save me time. How can a designer be upset about that? Modular templates take the setup work out of the process and allow me more time to concentrate on the design. - Megan Jefferson, Graphic Designer

11 CONTACT US FOR MORE INFO WEBSITE PHONE (877)