Becoming a Modern Designer

In this two hours talk/workshop, I talk about what makes a good designer with a lot of tips and tricks, while explaining my own process. This workshop was presented for the first time to WordPress community in Pokhara, Nepal.

Transcript

1. BECOMING A MODERN DESIGNER Emanuel Blagonic Tweet me back at @eblagonic
2. I have a few rules…
3. RULE #1 This is a stress-free environment.
4. RULE #2 If you have a question – ask it. Don’t be afraid. Just raise your hand and I’ll point to you.
5. RULE #3 I CAN talk for two hours. If you need a break – let me know.
7. What is “design”?
8. “ Design is the creation of a plan or convention for the construction of an object, system or measurable human interaction. DEFINITION OF DESIGN
9. SOME OF THE DESIGN DISCIPLINES — graphic design — visual design — web design — user experience design — interaction design…
10. Design changes over time. It adopts. ACTUALLY…
11. Are you a designer?
12. ARE YOU A DESIGNER? Are you emotional about your designs, always trying to do better and trying to improve?
13. ARE YOU A DESIGNER? Are you passionate about what you do, smile while you sketch, always developing new ideas?
14. ACTUALLY… Designers need to be emotional. They need to care (about others). They need to be passionate about what they do. If you can’t be like that then it’s better to change your job.
16. My story…
17. My first web page. 1997
18. Journalism… 1999
19. Started a business. I was a designer. 2003
20. Discovered WordPress. 2004
21. Web standards movement 2005
22. Started Blagonic Brothers. 2009
23. Started talking at conferences. 2010
24. Started visiting conferences abroad. 2011
25. My first WordCamp Europe as attendee. 2013
26. Co-founded Croatian WordPress community. 2014
27. Lead organizer 
 for the first 
 WordCamp Croatia. 2015
28. Co-organizer of WordCamp Europe. 2016
29. My first talk in a conference outside Croatia. 2016
30. My process
31. BEFORE WE TAKE A PROJECT — First contact — Client interview — Preparing a quote
32. DURING A PROJECT — Wireframes and exploration — Design — Frontend development — WordPress development — QA
33. AFTER THE PROJECT IS FINISHED — Continuous improvements — Partnership
34. First contact
35. FIRST CONTACT — Website — Email — Recommendation
36. WEBSITE — You don’t know them — Based on how you “brand” yourself – that’s the type of jobs you’ll get — Detailed or simple contact form?
37. EMAIL — Usually – more personal — Always send them a request for a “detailed brief”
38. “ Client that doesn’t have two hours to answer your brief – has either enough money to pay everything you ask – or they won’t be committed to this project.
39. RECOMMENDATION — It’s easier to close a deal through recommendation, because both sides know what to expect — 80% of jobs that I got through recommendations – were successfully agreed on and finished
40. “ A job you get through a recommendation is usually similar to one that you worked on and that got you recommended in the first place. (including the price).
41. WHAT TO BE AWARE OF WHEN COMMUNICATING — Professional communication is a must. Explain them everything they ask. Make sure you write their names correctly. — If you don’t want to work with them – tell them immediately
42. “ If you feel the client is stupid, then you’re are probably the one who’s STUPID.
43. AND DON’T FORGET — Remember that you’re the expert. If you forget that you can’t expect your client to treat you like you are. — Client is paying you to solve his problem. If they forget – remind them politely.
44. Client interview
45. “ Leave a good first impression. You are the professional, you know what you’re talking about. You have all the answers because you are an expert.
46. “ Client interview is a way to see how the client feels about certain things and you can predict if there will be problems afterwards.
47. Should we have the same goals with our clients? CLIENT INTERVIEW
48. Should we have the same goals with our clients? CLIENT INTERVIEW
49. “ If you share same goals there is a much better chance that a project will be a success. And this will eventually lead to a new recommendation.
50. “ If your goals (and client goals) are well defined and documented, you will stop a client from “owning” this project by messing with your business and creative processes.
51. Should I send the quote immediately after they ask for it? CLIENT INTERVIEW
52. How can a client interview influence with preparing a quote? CLIENT INTERVIEW
53. What if I don’t want to work with this specific client? CLIENT INTERVIEW
54. “ If you are not happy with the work you’re doing – the client won’t be happy either.
55. “ Interviewing a client before 
 starting a project will protect 
 both you and the client.
56. Preparing a quote
57. Let’s talk about how to define your own prices PREPARING A QUOTE
58. DEFINING YOUR OWN PRICES — $50
 base hourly rate — $40 per hour
 when being booked for an entire week — $30 per hour
 when being booked for an entire month
59. MY HOURLY RATE — $80
 base hourly rate — $70 per hour
 when being booked for an entire week — $60 per hour
 when being booked for an entire month
60. But what when clients can pay more? PREPARING A QUOTE
61. “ Instead of sending them a higher price “because they can pay more” see what extra benefits you can offer them and use that to up-sell them some other services.
62. How to define a budget? PREPARING A QUOTE
63. HOW TO DEFINE A BUDGET? — 10% project management — 30% design — 30% development — 10% SEO — 20% content (copywriting)
64. What impacts the final budget? PREPARING A QUOTE
65. IMPACT ON A BUDGET — Having the same goals with a client (I don’t want to be “code monkey”) — Assessment if the client will allow “creative freedom” — Has the client tried to bargain for a lower price?
67. Project is approved. Now what?
68. Preparation phase A STEP BEFORE PROJECT STARTS
69. QUESTIONS TO ASK BEFORE YOU START — Did the client prepare all the website content? — Does the client have a dedicated contact person for the project – someone who can make decisions?
70. PREPARING YOURSELF — Prepare your own team (who will work on what; who is the best person for the job, etc.) — Define types of communication with a client (email, Skype, Teamwork, …)
71. Communication HOW TO BE A GOOD COMMUNICATOR
72. COMMUNICATION CHANNELS — Email — Voice and video conferences — Project management tools — Screencast
73. EMAIL — Most used communication channel — It leaves a “written trail” — It helps preventing different views from the team and the client on certain decisions — Slower than a call
74. VOICE AND VIDEO CONFERENCES — Always go for a video call — Calls are good because they help speed up the solution to a problem — After the call is over – always send notes over email
75. PROJECT MANAGEMENT TOOLS: TEAMWORK — Many advanced options, although the user interface is quite clean and straightforward; can cover everything from smaller to bigger projects — It has time tracking — Starts at $9/user per month (billed annually)
77. PROJECT MANAGEMENT TOOLS: TRELLO — The best free PM tool “out there” — It uses cards instead of task — To each card you can add users, tags, checklist, deadline…
79. SCREENCASTS — It is a replacement for an “in-person session” — Ideal for when you have a problem explaining a certain problem to a client — Screencast archive is a good way to keep track of project’s progress
81. Communicating potential critical decisions
82. CRISIS COMMUNICATION — You did more work than you were expected to — There will be delays in the project — There are communication problems within the project
83. CRISIS COMMUNICATION — When you’re communicating critical decisions, ALWAYS communicate via video call (if you cannot meet in person) — When answering emails be polite; never point fingers towards a client
84. Wireframes and exploration
85. EXPLORATION — Ask your client about what websites they love; ask them why they love them – let them be detailed
86. SITEMAP — Start by asking you client for a sitemap; if they don’t have any – work together to build one — When building a sitemap work closely together for a best final solution
88. INFORMATION ARCHITECTURE — Similarly to sitemap, working on a good information architecture of a webpage will make sure that end clients don’t get lost, eventually working towards a defined goal (more sales, etc.)
90. WIREFRAMES — Define main elements of a webpage; see which one are repeating on different subpages – these are the things you need to design — You can do wireframes however you like; on paper, in an app, on a whiteboard…
94. THINGS YOU NEED TO DEFINE — Who is client's target audience? — How will you approach them (what kind of content will you write; i.e. blog posts, focus on social media, etc.)? — What are the most important pages of 
 client’s website?
95. — Why You Should Build A Sitemap Before 
 Designing Your Site
 https://blog.kissmetrics.com/build-a-sitemap/ — Using Dropbox to help clients organize 
 their web sitemap
 http://www.emanuelblagonic.com/2014/01/21/using-dropbox-to-help-clients- organize-their-web-sitemap/ FURTHER READING
96. — Complete Beginner’s Guide to Information Architecture
 http://www.uxbooth.com/articles/complete-beginners-guide-to-information- architecture/ — Information Architecture Basics
 https://www.usability.gov/what-and-why/information-architecture.html — Personas
 https://www.usability.gov/how-to-and-tools/methods/personas.html FURTHER READING
97. — A Short Guide to Writing Good Copy
 http://www.copyblogger.com/short-guide-to-good-copy/ — 7 Tips for Writing Effective Short Copy
 https://blog.crazyegg.com/2014/02/18/writing-effective-short-copy/ FURTHER READING
98. Design
99. DESIGN — Use client’s branding for visual inspiration (how are the photos used, what kind of colors client uses, what’s the message we need to send)
100. DESIGN — Be emotional and passionate about what you design – emotion and passion is something the client will see from how you talk and present your design
102. HOW TO PRESENT YOUR CREATIVES — If you’re presenting a new creative or just hitting the milestone – you need to add extra effort — Whenever possible, do a presentation live, over Video conference call or via screen sharing; observe client’s reaction
103. HOW TO PRESENT YOUR CREATIVES Presenting a creative is an important task. Don’t underestimate it as it can literally kill the project.
105. Frontend development
107. WordPress development
108. SOME DEVELOPMENT TIPS — Define deadlines by adding 20% of extra time to each deadline — Do a weekly or a bi-weekly recap of the project together with a client
109. SOME DEVELOPMENT TIPS — Do a constant communication so a client can have access to your development server and/or project management tool — If a project is too big – it’s better that only your project manager and client’s dedicated person be in touch
110. QA
111. SOME DEVELOPMENT TIPS — Don’t leave QA for the very end (although it is important to test at the end too) – test early, test often — I usually leave 10% of my time for QA and testing
113. Continuous improvements
114. AFTER YOU’RE DONE — When you’re done with main project – offer some additional things – if they make sense — If you can do something “for free” and it won’t take much of your time – do it. You’ll win a client for good.
115. Partnership
116. MAKING A PARTNER FOR LIFE — If you are honest to your clients – they will be your partners in this and future project — Offer them bonuses – something that is small to you but can mean a lot to them (i.e. some small change on their website which you won’t charge)
117. MAKING A PARTNER FOR LIFE — Making a partner out of your clients means they will have better understanding of you – as they are becoming part of the “family” — This also means that this partner is more likely to recommend you to its friends
119. Some other tools
120. — Dropbox – For keeping all your files in one place. 
 And synchronised with your team.
 https://www.dropbox.com — Toggl – To track your time
 https://toggl.com/ — Rescue Time – To see how are you spending your time.
 And to optimise it.
 https://www.rescuetime.com/ — 1Password – A place to keep your passwords safe
 https://1password.com/ GETTING YOURSELF ORGANISED
121. — Optimizely – If you’re into running A/B tests
 https://www.optimizely.com — HotJar – Amazing analytics after you publish a website
 https://www.hotjar.com — Crazyegg – Create heat maps, scroll maps and more
 https://www.crazyegg.com/ OPTIMISATION
122. — Google Analytics – Well, analytics ;)
 https://www.google.com/analytics/ — Page Speed Insights – Check how your page performs
 https://developers.google.com/speed/pagespeed/insights/ ANALYTICS
123. — SurveyMonkey – Ask your visitors what they think
 https://www.surveymonkey.com/ — MailChimp – A perfect tool for sending emails
 http://mailchimp.com/ INTERACTION WITH VISITORS
124. 1999 A MISSING YEAR
126. Be emotional AS BEING EMOTIONAL HELPS YOU 
 SEE THE BIGGER PICTURE Photo by NASA on Unsplash
127. Be passionate AS IF YOU DON’T HAVE PASSION 
 YOU’RE DEFINITELY DOING A WRONG JOB Photo by SH Lam on Unsplash
128. Be honest TO YOURSELF, YOUR CLIENTS AND USERS Photo by Nicholas Sampson on Unsplash
129. Be an explorer DESIGN IS ABOUT EXPLORATION OF 
 NEW AND UNKNOWN Photo by Joshua Earle on Unsplash
130. Always be learning. DON’T BE AFRAID TO LEARN Photo by Emma Frances Logan on Unsplash
131. Do the RIGHT thing Photo by Ludovic Fremondiere on Unsplash
132. Thank you @eblagonic