Upgrading the brand and the platform: Lessons Learned

A design-centric look back at what we learned when re-branding Hugh & Crye and upgrading them to the latest version of Spree at the same time.

Transcript

1. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL HUGH & CRYE: THE (RE)BIRTH OF AN ONLINE BRAND
2. #muffintop #shirtdress
3. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL I AM NOT BRYAN • (Screenshot of Spreeconf site) @nemy
4. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL WHAT IS THIS ABOUT? • Upgrading brand • Upgrading platform • Lessons learned
5. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL WHY SHOULD YOU CARE? • We are you(ish) • Mistakes cost $
6. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL WHO IS DYNAMO? • Montreal’s finest • goDynamo.com • @dynamomtl
7. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL OUR WORK • Web + Apps • Spree • and...
8. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL
9. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL SPREE PROJECTS • 7 launched • 5 in development
15. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL SPREE PROJECTS IN DEVELOPMENT • Blue Bottle Coffee • Quarterly • SmartThings • & more...
16. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL HUGH & CRYE • Dress shirts that actually fit • From DC!
17. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL WHY REDESIGN? • Evolution • Bad fit
18. #muffintop #shirtdress
19. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL WHY UPGRADE? • Spree (0.11x to 1.1) • Mobile traffic • Brand update
20. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL WHY REDESIGN?
22. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL PROJECT HIGHLIGHTS • Online “only” • + physical component
23. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL LESSON: The site is the brand
24. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL OUR PROCESS • Agile / Iterative • Design-focused • Brand design “first”
25. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL BRANDING PROCESS 1.Brief 2.Questions 3.Moodboards 4.Sketches 5.Design
26. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL QUESTIONS LIKE: • What do you love about the current brand? • What do you hate?
27. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL MOODBOARDS
28. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL MOODBOARDS
29. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL SKETCHES
30. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL FEEDBACK • “This blows”
31. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL LESSON: Ask the right questions
32. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL LESSON: = figure out constraints
33. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL QUESTIONS LIKE: • What do we want our customers to think and feel?
34. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL >
35. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL SITE DESIGN & BUILD • Look & feel • User stories • Goals & Elements • UI sketches/prototyping • Build
36. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL LOOK & FEEL • Type Hierarchy • Colors • Basic Layout • Buttons • Navigation Style
41. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL CONTENT • Product • Brand • User
42. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL LESSON: Get real content NOW
43. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL GOALS & ELEMENTS • What’s the goal? • How do we accomplish the goal?
44. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL GOALS & ELEMENTS
45. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL USER STORIES • Feature cards • Priorities • Scope • Release plan
47. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL USER STORIES http://pivotaltracker.com
48. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL LESSON: Involve the client
49. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL UI SKETCHING • Mobile first • Think responsively • Design in chunks • Keynote prototypes
50. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL http://keynotopia.com
51. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL http://keynotopia.com
52. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL BUILD • “Transition” site • Some migrated data
53. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL LESSON: Migrate data EARLY
54. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL LESSON: Keep end goal in site (transition!)
55. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL BUILD • Constraints • Debug • Iterate
56. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL LESSON: Think critically about overrides
57. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL AFTER A FEW ITERATIONS
58. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL FEATURES • Extra content • Responsive fine-tuning • Filters • Fit Finder
64. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL RESULTS
65. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL RESULT
73. RESULT
74. RESULT
83. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL LESSONS LEARNED > DESIGN • Get real content • Copy is design • Think mobile first • Static is evil
84. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL LESSONS LEARNED > DEVELOPMENT • “Simple” upgrade • Data Migration • Careful with CCs • Extensions = maintenance
85. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL LESSONS LEARNED > OVERALL • Start simpler • Priorities change • Get clients involved in EVERYTHING
86. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL GET THE MOST OUT OF SPREE • Be active in the community • Look at open issues • Contribute extensions https://github.com/dynamomtl/spree_chimpy
87. #muffintop #shirtdress
88. DYNAMO WWW.GODYNAMO.COM @DYNAMOMTL Discount code for 20% off through May at hughandcrye.com SPREE20 THANKS!