ixda helsinki meet-up at smartly.io, thu, 25th august 2016

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:

We always offer a 14-day free trial and no minimum contract period.

Contact us at [email protected]

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.

AGENDA






IxDAHel x Smartly.io: Back to the roots

Estimated schedule:

A Practical Approach to Icon TaxonomyTeemu Korpilahti

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

http://2016.hci.international/

http://www.iconresearch.net/early-interfaces

http://www.iconresearch.net/icons

http://www.iconresearch.net/experimental-approach-on-icon-taxonomy

http://www.iconresearch.net/mollerups-taxonomy

http://www.iconresearch.net/survey-1-results

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

[email protected] || [email protected]

mailto:[email protected]

AGENDA







Estimated schedule:

Always something to fix

Got stuck?

AGENDA







Estimated schedule:

Losing Control: Design Systems for Complex User InterfacesPekka 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

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

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

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


Facebook

Smartly.io

Customers

Partnersh

ip & API Client relationship

Smartly.io adds revenue for both sides

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


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


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


Traditional Designer’s job

• New features are pushed in production periodically and designers can track them all• Designers are in controlHOW 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

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

Step 1: Making foundation for design-driven organisation

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

Step 2: Forming a team

Closing the design-development gap

• Multi-talented developers and designers with overlapping skills


Product Manager

UI & UX Designer

UI Developer

Developer

Defines the problem

Plans the solution

Develops the UI Components

Deploys to production

The talent can be divided to different teams

• Let’s avoid waterfall process and gatekeepers


Product Manager

UI & UX Designer

UI Developer

Developer

Team1 Team2

Step 3: Design systems

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?


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?


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)


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)


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


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



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

Summary

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

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 %

5. SUMMARY

Of course we would like to have this interface….

…but before that happens, we are doing the design systems!

Thank you for listening!

smartly.io/design | @pastorator

http://smartly.io/design

AGENDA







Estimated schedule: