Topics in the meet-up A Practical Approach to Icon Taxonomy Teemu Korpilahti, Lead Designer at Crasman Accept the Imperfectness Sami Vuori, Visual / UX / UI Designer at Gapps Losing Control: Design Systems for Complex User Interfaces Pekka Hartikainen, Design Lead at Smartly.io

1. AGENDA
17:00 Welcome! / Otto Hilska, CTO, Smartly.io
17:05 A Practical Approach to Icon Taxonomy / Teemu Korpilahti
17:30 Accept the Imperfectness / Sami Vuori
17:50 Losing Control: Design Systems for Complex User Interfaces / P. Hartikainen
18:10 Drinks & mingling
IxDAHel x Smartly.io: Back to the Roots
Estimated schedule:

2. We always offer a 14-day free trial
and no minimum contract period.
Contact us at info@smartly.io
Cut down on manual work
of creating & editing ads
Create ads automatically
from your product feed
Increase your marketing
ROI with our optimization
solutions
Peace of mind with 24/5
live support and technical
account managers
WE’RE YOUR PARTNER IN
AUTOMATING AND OPTIMIZING
YOUR FACEBOOK MARKETING
AT SCALE.
With our campaign builder, you can easily
create a large number of variations to test
different creatives, ad types, audiences, and
placements.
Launch both prospecting and retargeting
campaigns automatically to create custom-
ized offerings for your audiences. Take your
Facebook and Instagram creatives to the
next level using our award-winning Dynamic
Image Templates.
Let our algorithms decide where to put your
advertising spend. Smartly refines your cam-
paigns in real-time, finding the best places
and opportunities. Automatic optimization is
always-on when needed, and refining your
campaign based on the goals and rules that
you have defined.
We’re extremely passionate about the level
of service we provide for our customers. As a
customer, you’ll have a dedicated Account
Manager responsible for keeping you up-to-
date on both Smartly.io and Facebook, and
helping you get the most out of your budget.
We listen to your feedback and build our
product together with you.

3. AGENDA
17:00 Welcome! / Otto Hilska, CTO, Smartly.io
17:05 A Practical Approach to Icon Taxonomy / Teemu Korpilahti
17:30 Accept the Imperfectness / Sami Vuori
17:50 Losing Control: Design Systems for Complex User Interfaces / P. Hartikainen
18:10 Drinks & mingling
IxDAHel x Smartly.io: Back to the roots
Estimated schedule:

4. A Practical Approach to Icon Taxonomy
Teemu Korpilahti

5. 1. Doctoral thesis project for the department of Visual Communication Design in Aalto University.
2. First paper published at the Toronto HCI International conference poster session this July.
3. A historical overview of interface icons: www.iconresearch.net/early-interfaces
4. A set of “Iconic” icons that will be evaluated: www.iconresearch.net/icons
5. A semiotic approach to icons and their classification:
www.iconresearch.net/experimental-approach-on-icon-taxonomy
6. How and why create a taxonomy for interface icons for designers?
7. Mollerups taxonomy for trademarks: www.iconresearch.net/mollerups-taxonomy
8. Proposed basic system and first survey results: www.iconresearch.net/survey-1-results
www.iconresearch.net

7. 1. The proposed main classifications were effective in the sense that the data showed clear
differentiation between the alternatives.
2. Certain correlations were discovered, such as concrete icons being logical and abstract
icons being mostly arbitrary.
3. Building a clean and simple taxonomy tree from these two main classifications is still a
challenge since there was some surprising overlapping in the data, such as the existence of
a group of icons that were classified as abstract and logical.
4. Dividing the main classes into subclasses should also be examined. The logical icons could
for instance be divided to descriptive and metaphorical ones.
5. How icons can loose their logical meaning over time?
Summary and Future Work

8. Thanks!
teemu@crasman.fi || teemu@tmukoo.net

9. AGENDA
17:00 Welcome! / Otto Hilska, CTO, Smartly.io
17:05 A Practical Approach to Icon Taxonomy / Teemu Korpilahti
17:30 Accept the Imperfectness / Sami Vuori
17:50 Losing Control: Design Systems for Complex User Interfaces / P. Hartikainen
18:10 Drinks & mingling
IxDAHel x Smartly.io: Back to the Roots
Estimated schedule:

20. Always something
to fix

23. Got stuck?

40. AGENDA
17:00 Welcome! / Otto Hilska, CTO, Smartly.io
17:05 A Practical Approach to Icon Taxonomy / Teemu Korpilahti
17:30 Accept the Imperfectness / Sami Vuori
17:50 Losing Control: Design Systems for Complex User Interfaces / P. Hartikainen
18:10 Drinks & mingling
IxDAHel x Smartly.io: Back to the Roots
Estimated schedule:

41. Losing Control: Design Systems
for Complex User Interfaces
Pekka Hartikainen, Design Lead at Smartly.io
1. Straightforward B2C services vs. complex B2B services
2. Smartly.io business environment
3. Designers: old job vs. new job
4. Three steps to survive: fast-moving environment complex environment
5. Summary

42. B2C Service – Simplifying the flow
• The flow can be more complicated in the background and has
several edge cases, but it is simplified to the consumer
• Designer is in control of the service
• End user just wants to get the job done – and feels if the app
works or not
• Interaction designers are used to do this and get the vision
and feel for the redesign quickly
1. STRAIGHTFORWARD B2C SERVICES VS. COMPLEX B2B SERVICES

43. B2B Service for Professionals
• Desktop use might be the most common case
• Rich in features
• User is willing to do work, if it returns $$$
• Big customers have power to suggest new features
1. STRAIGHTFORWARD B2C SERVICES VS. COMPLEX B2B SERVICES

44. Smartly app in a nutshell
• Automates Facebook and Instagram advertising
…but still has a lot of optional settings.
Smartly.io allows you to create triggers and customizable rules to automate any action e.g.
- If CPA is better than your target → scale up advertising budget
- If bid is limiting delivery while CPA is better than your target → increase bid
- If ad performance is very bad → use stop-loss rules to pause it
• Smartly.io app helps to acquire more clients from the web
2. SMARTLY.IO BUSINESS ENVIRONMENT

45. 2. SMARTLY.IO BUSINESS ENVIRONMENT
Facebook
Smartly.io
Customers
Partnership
&
API
Clientrelationship
Smartly.io adds revenue for both sides

46. Facebook moves fast
• We have to move faster and add value on top of Facebook!
• As we are smaller, we can provide better service for certain verticals,
while Facebook has the whole world as clients
2. SMARTLY.IO BUSINESS ENVIRONMENT

47. How have we moven faster?
• No to waterfall, yes to agile
• Avoid design overhead
• Full-stack mentality – every team can ship independently
• Everybody does support shifts and are in direct contact
with the customers
2. SMARTLY.IO BUSINESS ENVIRONMENT

48. New Challenges
• The product has become more complicated and feature-rich due to
“organic growth”
• Team has grown a lot
• There has to be bold UX decisions to be made to improve usability
• There is a need for designers and developers with hybrid qualities
2. SMARTLY.IO BUSINESS ENVIRONMENT

49. Traditional Designer’s job
• New features are pushed in production periodically and designers can
track them all
• Designers are in control
HOW TO MAKE IT WORK:
• Analyze, design, prototype & evaluate
• The vision starts to from quickly in analyzing phase
• You control the implementation phase
• Launch!
3. DESIGNERS: OLD JOB VS. NEW JOB

50. Designer’s job in a fast-moving environment
• A lot of new features are pushed to production every week
• The features are best known by specialists, not necessarily designers
• The traditional approach is too slow and has too many gatekeepers
HOW TO MAKE IT WORK…?
3. DESIGNERS: OLD JOB VS. NEW JOB

51. Step 1: Making foundation for
design-driven organisation

52. Communication is everything
• Strengthening the communication on product design
• Arranging training and workshops for developers
• Boosting the confidence on design – we can do this!
4. THREE STEPS TO SURVIVE: FAST-MOVING COMPLEX ENVIRONMENT

53. Step 2: Forming a team

54. Closing the design-development gap
• Multi-talented developers and designers with overlapping skills
4. THREE STEPS TO SURVIVE: FAST-MOVING COMPLEX ENVIRONMENT
Product
Manager
UI & UX
Designer
UI
Developer
Developer
Defines the problem
Plans the solution
Develops the UI Components
Deploys to production

55. The talent can be divided to different teams
• Let’s avoid waterfall process and gatekeepers
4. THREE STEPS TO SURVIVE: FAST-MOVING COMPLEX ENVIRONMENT
Product
Manager
UI & UX
Designer
UI
Developer
Developer
Team1 Team2

56. Step 3: Design systems

57. Style guides are hard
• Style guide is NOT an easy process to accomplish or maintain
• The style guide project should not be designing for overhead or
designer’s showcase
• How to avoid the mistakes then?
4. THREE STEPS TO SURVIVE: FAST-MOVING COMPLEX ENVIRONMENT

58. Prepare well and be realistic
• First evaluate your need for the style guide and is it realistic to
accomplish? Or use some ready-made frameworks instead?
• Making a good style guide takes a lot of time and energy
• Are there suitable talent in the team and are they committed?
4. THREE STEPS TO SURVIVE: FAST-MOVING COMPLEX ENVIRONMENT

59. Typical style guide
• Unless there’s a direct connection for production, style guide gets
easily out-of-date
• The CSS and HTML are featured in the picture
(source: http://engineering.lonelyplanet.com/2014/05/18/a-maintainable-styleguide.html)
4. THREE STEPS TO SURVIVE: FAST-MOVING COMPLEX ENVIRONMENT

60. Component-based style guide
• A single version of the component, that is used both in production
and style guide.
• The developers just render the component to the UI
(source: http://engineering.lonelyplanet.com/2014/05/18/a-maintainable-styleguide.html)
4. THREE STEPS TO SURVIVE: FAST-MOVING COMPLEX ENVIRONMENT

61. The Holy Grail
• Component-based style guide with direct connection to production
• Components can be expandable, but they are the very same than in
the style guide
• More inspiration, Lonely Planet and Rizzo: http://
engineering.lonelyplanet.com/2014/05/18/a-maintainable-
styleguide.html
4. THREE STEPS TO SURVIVE: FAST-MOVING COMPLEX ENVIRONMENT

62. At Smartly.io
• We are using React Storybook
(https://voice.kadira.io/introducing-react-storybook-ec27f28de1e2#.dc7vwrd3g)
• Develop and design UI components outside your app in an isolated
environment
• Demands resources: versatile and talented designers and developers
• React Storybook could emerge as one of the primary tools in
product design and development
4. THREE STEPS TO SURVIVE: FAST-MOVING COMPLEX ENVIRONMENT

63. 4. THREE STEPS TO SURVIVE: FAST-MOVING COMPLEX ENVIRONMENT
We are just getting started…
• We are expanding the product design team at Smartly.io
• Discovering the process and learning new stuff
• So far we have good experiences of it and are excited to
take the project to the next level

64. Summary

65. Old job with simplified user interfaces:
• Analyze, design, prototype & evaluate
• Be in control of the views and flows
• Close the design-development gap in whatever way is possible
• Focus on your own work and designs
5. SUMMARY

66. 5. SUMMARY
New job with complex user interfaces:
• Strengthen the design-driven culture
• Build teams and train co-workers
• Give up some control, but move faster
• Focus on team and design systems
(not on single interface and yourself)
…but still with the key flows, do the old job:
• Analyze, design, prototype & evaluate
• Be in control of the views and flows
• Show thought leadership and know the product inside out
Old job
30 %
Systems
30 %
Team
20 %
Culture
20 %

67. 5. SUMMARY
Of course we would like to have this
interface….
…but before that happens, we are doing the design systems!

68. Thank you for listening!
smartly.io/design | @pastorator

69. AGENDA
17:00 Welcome! / Otto Hilska, CTO, Smartly.io
17:05 A Practical Approach to Icon Taxonomy / Teemu Korpilahti
17:30 Accept the Imperfectness / Sami Vuori
17:50 Losing Control: Design Systems for Complex User Interfaces / P. Hartikainen
18:10 Drinks & mingling
IxDAHel x Smartly.io: Back to the Roots
Estimated schedule:

70. +