Recommended
More Related Content
Similar to Creating UI Marketers Won't F*Up
Similar to Creating UI Marketers Won't F*Up (20)
Recently uploaded
Recently uploaded (20)
Creating UI Marketers Won't F*Up
- 2. Join us at INBOUND Buses start leaving at 5:00 PM for the BCEC from the ground floor.
- 3. Presentations will be available after the event.
- 4. How to Create a UI That Marketers Won’t F*Up
- 5. Luke Summerfield CMS Developer Advocate, HubSpot Chris Conant HubSpot Marketplace Program Manager Loic Burdet Lead Developer, Ideagency
- 6. 1. Shifting Our Thinking 2. Process Best Practices 3. HubSpot CMS Development Best Practices 4. Developer Case Study 5. Technical Questions Agenda
- 9. When a user breaks something, it’s not their fault ... it’s yours.
- 10. MORE ABOUT ... Shifting your thinking... LESS ABOUT ...
- 11. MORE ABOUT ... ● The team’s goal Shifting your thinking... LESS ABOUT ... ● Your specific piece
- 12. MORE ABOUT ... ● The team’s goal ● Empowering others Shifting your thinking... LESS ABOUT ... ● Your specific piece ● Being a gatekeeper
- 13. MORE ABOUT ... ● The team’s goal ● Empowering others ● Setting guardrails Shifting your thinking... LESS ABOUT ... ● Your specific piece ● Being a gatekeeper ● Blocking access
- 14. MORE ABOUT ... ● The team’s goal ● Empowering others ● Setting guardrails ● Build scalable “products” Shifting your thinking... LESS ABOUT ... ● Your specific piece ● Being a gatekeeper ● Blocking access ● Customized one-off solutions
- 15. MORE ABOUT ... ● The team’s goal ● Empowering others ● Setting guardrails ● Build scalable “products” ● Continuous optimizations Shifting your thinking... LESS ABOUT ... ● Your specific piece ● Being a gatekeeper ● Blocking access ● Customized one-off solutions ● One and done projects
- 17. ● Create a Design System - Deliverable: “Web Style Guide” Process Best Practices
- 18. DESIGN SYSTEM A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. https://canvas.hubspot.com - Building a System - Adoption of a System bit.ly/invisiondesignsystem
- 19. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. title of Slide goes here Canvas - Design - Canvas.HubSpot.com
- 20. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. title of Slide goes here Canvas - Front End - Canvas.HubSpot.com
- 22. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. title of Slide goes here “Web Style Guide” hubspot.com/style-guide
- 23. ● Create a Design System - Deliverable: “Web Style Guide” ● Be consistent in naming, labels, placeholder copy. Process Best Practices
- 24. ● Create a Design System - Deliverable: “Web Style Guide” ● Be consistent in naming, labels, placeholder copy. ● Write very clear helper text on fields. Process Best Practices
- 25. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. title of Slide goes here
- 26. ● Create a Design System - Deliverable: “Web Style Guide” ● Be consistent in naming, labels, placeholder copy. ● Write very clear helper text on fields. ● Invest time to build the guardrails up front. Process Best Practices
- 27. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. title of Slide goes here
- 28. ● Create a Design System - Deliverable: “Web Style Guide” ● Be consistent in naming, labels, placeholder copy. ● Write very clear helper text on fields. ● Prioritize testing and QA (with the end user). Process Best Practices ● Plan to iterate on v1 editing interface. ● Shine the light on what to avoid in advance. ● Deliverable: Graphic guide or templates.
- 29. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. title of Slide goes here Have your designers document this in their Sketch/PS files
- 30. ● Create a Design System - Deliverable: “Web Style Guide” ● Be consistent in naming, labels, placeholder copy. ● Write very clear helper text on fields. ● Prioritize testing and QA (with the end user). ● Plan to iterate on v1 editing interface. ● Shine the light on what to avoid in advance. ● Deliverable: Graphic guide or templates. ● Deliverable: Trainings and bite-sized recordings. Process Best Practices
- 31. HubSpot CMS Development Best Practices
- 32. 1. Empowering Customers 2. Building for your persona 3. Guardrailing the Experience 4. Building for Scale HubSpot CMS Development Best Practices
- 33. Empowering Customers MORE ABOUT ... ● Offering what’s necessary LESS ABOUT ... ● Unlimited options
- 34. Empowering Customers MORE ABOUT ... ● Offering what’s necessary ● Providing direction LESS ABOUT ... ● Unlimited options ● Non-descript
- 35. Empowering Customers MORE ABOUT ... ● Offering what’s necessary ● Providing direction ● Being precise LESS ABOUT ... ● Unlimited options ● Non-descript ● Being ambiguous
- 36. Building for your persona ● Measure twice, cut once ● Understand the expectations of your customer ● Create tools that provide as much of an impact as possible ● Be prescriptive. Provide descriptive labels and helper text.
- 37. Guardrailing the Experience ● Create solutions that guide the customer towards their desired outcome. ● Offer solutions that make the customer feel that they have all of the options necessary. ● Create a story that leads the customer
- 40. Building for Scale ● Avoid tunnel vision ● Consider the possibilities rather than the intention ● Keep code modular ● Avoid overcomplicating things
- 41. Building for Scale Avoid tunnel vision Consider the possibilities rather than the intention Keep code modular Avoid overcomplicating things
- 42. Building for Scale Avoid tunnel vision Consider the possibilities rather than the intention Keep code modular Avoid overcomplicating things
- 44. Building for Scale Avoid tunnel vision Consider the possibilities rather than the intention Keep code modular Avoid overcomplicating things
- 47. What HubSpot’s Product team has been up to?
- 48. 01 02
- 50. How to Create a UI That Marketers Won’t F*Up ? Create templates and modules for a marketing team in a legal startup
- 51. Me and my client’s marketing team
- 52. A little piece of context ● One leader of legal services in France (20 marketers) ● +350K visitors/m and +100 clients/m ● +50 templates and more than 150 modules ● Run GDD methodology with a great Tool Stack (GDD Dashboard, Zeplin, Trello...) Main goals Scalability, Easiness-to-Use and Performance
- 54. Homepage template architecture HEADER Hero Banner with Dynamic Popup modules Dynamics Tabs from HubDB https://www.captaincontrat.com/
- 55. Focus on Hero Banner Module Fully dynamic module that gather HubDB tables to create each CTA and popup (JS, Bootstrap, Modal...)
- 56. Focus on Breadcrumb Module Dynamic breadcrumb that recreates website architecture
- 57. How to Create a UI That Marketers Won’t F*Up ? Create a website for an agency partner
- 58. A little piece of context ● My Client is an Hubspot Agency (MMIO) in Reunion ● Users will be the final client but also my partner ● Design provided by client ● 4 templates (Generic, LP, Pilar, Blog) and 20 modules for the entire website Main goals Scalability and Flexibility
- 59. Focus on templates Generic Landing Page
- 60. Focus on modules
- 61. Focus on modules
- 62. Focus on modules Problem because Width and Offset is bigger than 12
- 63. Focus on modules Well Use
- 64. Announcement A bootstrap 4 template (inspired from this previous one) will be available on the Marketplace on September
- 65. Thanks everyone for your attention. I’ll be glad to speak with you and share experiences with the community @loic_burdet on hubspotdev.slack.com and growthdrivendesign.slack.com
- 66. Questions!
- 67. Please take our NPS survey! http://bit.ly/PartnerDayINBOUND
- 68. 01 02 2 case studies… better than 1 First, a failed project ! The client : Tech company Specificities of this project : Mockups given by client with Zeplin Project Methodology : Classic Final Users : Marketers Then, an amazing succeed project ! The client : Our own company Specificities of this project : creation of a pilar page Project Methodology : Agile (GDD) Final Users : Marketers
- 69. To-Do Create 6 LP and 2 TYP decomposed in 3 templates and 10 modules Budget / Timing 2000€ / 24h of development over two weeks Project ● Creation of all templates, modules and pages ● Testing by users with multiple feedbacks about behaviours and modules ● Modifications ● Testing ● Go Live Results ● 70h of development over 4 weeks ● No specifications, no guidelines - mockups aren’t enough NO SPEC, NO DEV ! 01 - FIRST SHOWCASE
- 70. To-Do Create a template for our pilar page Project ● Gather my marketer’s needs ● Specifications (guidelines, animations...) ● UX Design / Mockup ● Development ● Testing and Go Live Results ● Daily revues and weekly sprints help us to be flexible ● Great project that help us to process DEV ROCKS ! 02 - SECOND SHOWCASE Goals ● Integrate our new identity ● Marketers centrics (easy-to-use, scalable…) ● Have fun with dev ! (Boostrap4, jQuery)