Don’t panic
           Now in large friendly letters*




           * The joke is pretty much lost if you haven’t read th...
AD ‹ - › Developer
          Communications (and tech + good to know stuff)




           Author: Niklas Bivald




Monda...
AD ‹ - › Developer communications (and tech)
     I don’t do developing!




       “I'm an art director - I don't do deve...
AD ‹ - › Developer communications (and tech)
     Monolog or dialog?




                                       Monolog or...
AD ‹ - › Developer communications (and tech)
     Monolog or dialog?




                                       Monolog or...
AD ‹ - › Developer communications (and tech)
     Please Please Please....




      Don’t run an idea in front of a clien...
AD ‹ - › Developer communications (and tech)
     What a developer can do for you




      What a developer can do for yo...
AD ‹ - › Developer communications (and tech)
     Prioritize




                                                    Prior...
AD ‹ - › Developer communications (and tech)
     Life’s irony




             You need a developer to know the
         ...
AD ‹ - › Developer communications (and tech)
     It can’t be done




                                            “It can...
AD ‹ - › Developer communications (and tech)
     It can’t be done




           “What can’t be done?”
         “Which pa...
AD ‹ - › Developer communications (and tech)
     Fear of change




                            Developers fear change
  ...
AD ‹ - › Developer communications (and tech)
     Introduction




                                                    @Id...
AD ‹ - › Developer communications (and tech)
     Introduction




                                                    @Id...
AD ‹ - › Developer communications (and tech)
     Kill the ego




               Kill the ego - You need each other




M...
AD ‹ - › Developer communications (and tech)
     Introduction




                                                    @Id...
AD ‹ - › Developer communications (and tech)
     Help your developer




                                            Help...
AD ‹ - › Developer communications (and tech)
     How to prepare your ideas




                                   How to ...
AD ‹ - › Developer communications (and tech)
     How to prepare your ideas




                Generic is the enemy, be s...
AD ‹ - › Developer communications (and tech)
      How to prepare your ideas: Real world example




        User must be ...
AD ‹ - › Developer communications (and tech)
     How to prepare your ideas: Real world example




                      ...
AD ‹ - › Developer communications (and tech)
     How to prepare your ideas




                                          ...
AD ‹ - › Developer communications (and tech)
     How to prepare your ideas




                                          ...
AD ‹ - › Developer communications (and tech)
     How to prepare your ideas




                                          ...
AD ‹ - › Developer communications (and tech)
     How to prepare your ideas




     Logged in users need to be able to ch...
AD ‹ - › Developer communications (and tech)
     How to prepare your ideas:




                                         ...
AD ‹ - › Developer communications (and tech)
     How to prepare your ideas:




                                         ...
AD ‹ - › Developer communications (and tech)
     How to prepare your ideas:




                                         ...
AD ‹ - › Developer communications (and tech)
     How to prepare your ideas




     Which end-product would you prefer?
 ...
AD ‹ - › Developer communications (and tech)
     How to prepare your ideas




       Does two weeks still sound like muc...
AD ‹ - › Developer communications (and tech)
     How to prepare your ideas: The usual suspects




                      ...
AD ‹ - › Developer communications (and tech)
     How to prepare your ideas: The usual suspects




               What ar...
AD ‹ - › Developer communications (and tech)
     Estimates




   A real estimate takes time (hours/days)
               ...
AD ‹ - › Developer communications (and tech)
     Estimates




        A rough estimate is a rough estimate
             ...
AD ‹ - › Developer communications (and tech)
     Coffee?




                                                    Coffee?
 ...
AD ‹ - › Developer communications (and tech)
     Coffee?




               One last thing about developers...




Monday...
AD ‹ - › Developer communications (and tech)
     Web techniques




                                                    W...
AD ‹ - › Developer communications (and tech)
     Web techniques




                      Developing: Front and back end
...
AD ‹ - › Developer communications (and tech)
     Web techniques




                                                    Y...
AD ‹ - › Developer communications (and tech)
     Web techniques




                       A developer will most likely s...
AD ‹ - › Developer communications (and tech)
     Web techniques




           Enough back end, let’s go front end




Mo...
AD ‹ - › Developer communications (and tech)
     Web techniques




                      HTML/CSS, Javascript and Flash
...
AD ‹ - › Developer communications (and tech)
     Web techniques




                      HTML/CSS, Javascript and Flash
...
AD ‹ - › Developer communications (and tech)
     Web techniques




                      HTML/CSS, Javascript and Flash
...
AD ‹ - › Developer communications (and tech)
     Web techniques




Monday, October 18, 2010



With HTML/CSS
AD ‹ - › Developer communications (and tech)
     Web techniques




Monday, October 18, 2010



With only HTML.

Still vi...
AD ‹ - › Developer communications (and tech)
     Web techniques




                      HTML/CSS, Javascript and Flash
...
AD ‹ - › Developer communications (and tech)

          Web techniques




    (movie with twitter example removed)




Mo...
AD ‹ - › Developer communications (and tech)
     Web techniques




                      HTML/CSS, Javascript and Flash
...
AD ‹ - › Developer communications (and tech)
     Web techniques




           Different browsers - different looks




Mon...
AD ‹ - › Developer communications (and tech)
     Doing Flash the good way




                                           ...
AD ‹ - › Developer communications (and tech)
     Doing Flash the good way




                                   Doing Fl...
AD ‹ - › Developer communications (and tech)
     Doing Flash the good way




                                Flash Examp...
AD ‹ - › Developer communications (and tech)
     Doing Flash the good way




                                           ...
AD ‹ - › Developer communications (and tech)
     Ajax




                                                    The “almost...
AD ‹ - › Developer communications (and tech)
     Ajax




                                                Can you print i...
AD ‹ - › Developer communications (and tech)
     HTML 5




                                                     The “new...
AD ‹ - › Developer communications (and tech)
     HTML 5




         Minimizes dependencies on Flash and JS
             ...
AD ‹ - › Developer communications (and tech)
     HTML 5




                                                    The real-...
AD ‹ - › Developer communications (and tech)
     HTML 5




                                   There’s always a catch (HT...
AD ‹ - › Developer communications (and tech)
     Search Engine Optimization




                                        M...
AD ‹ - › Developer communications (and tech)
     Search Engine Optimization




                                        M...
AD ‹ - › Developer communications (and tech)
     Coffee




                                                     Coffee
 ...
AD ‹ - › Developer communications (and tech)
     Flow charts and wireframes




                                         ...
AD ‹ - › Developer communications (and tech)
     Flow charts and wireframes




                                         ...
AD ‹ - › Developer communications (and tech)
     Search Engine Optimization




Monday, October 18, 2010



Sample workflow
AD ‹ - › Developer communications (and tech)
     Search Engine Optimization




Monday, October 18, 2010



Moving on to ...
AD ‹ - › Developer communications (and tech)
     Flow charts and wireframes




                                         ...
AD ‹ - › Developer communications (and tech)
     Use cases




                                                    Use ca...
AD ‹ - › Developer communications (and tech)
     The cost of development




                                            ...
AD ‹ - › Developer communications (and tech)
     The cost of development




                                            ...
AD ‹ - › Developer communications (and tech)
     The cost of development




                                            ...
AD ‹ - › Developer communications (and tech)
     The cost of development




                                            ...
AD ‹ - › Developer communications (and tech)
     The cost of development




                                            ...
AD ‹ - › Developer communications (and tech)
     The cost of development




                                            ...
AD ‹ - › Developer communications (and tech)
     The cost of development




                                            ...
AD ‹ - › Developer communications (and tech)
     Measure everything




                                                 ...
AD ‹ - › Developer communications (and tech)
     Speed is key




                                             Making sur...
AD ‹ - › Developer communications (and tech)
     Measure everything




                                                 ...
AD ‹ - › Developer communications (and tech)
     Coffee?




                                                     Coffee?...
e-commerce
          Important things to know




            Author: Niklas Bivald




Monday, October 18, 2010


This is...
AD ‹ - › Developer communications (and tech)
     E-commerce




                                                    E-com...
AD ‹ - › Developer communications (and tech)
     E-commerce




                                                    E-com...
AD ‹ - › Developer communications (and tech)
     E-commerce




                                                    Choos...
AD ‹ - › Developer communications (and tech)
     E-commerce




                                                    Make ...
AD ‹ - › Developer communications (and tech)
     E-commerce




                                                    Make ...
AD ‹ - › Developer communications (and tech)
     E-commerce




                                                    Make ...
AD ‹ - › Developer communications (and tech)
     E-commerce




                                                    What ...
AD ‹ - › Developer communications (and tech)
     E-commerce




                                                    Where...
AD ‹ - › Developer communications (and tech)
     E-commerce




                                                    Make ...
AD ‹ - › Developer communications (and tech)
     E-commerce




                                                    Make ...
AD ‹ - › Developer communications (and tech)
     E-commerce




                                      #1 good to know whe...
AD ‹ - › Developer communications (and tech)
     E-commerce




                                      #2 good to know whe...
AD ‹ - › Developer communications (and tech)
     E-commerce




                                      #3 good to know whe...
AD ‹ - › Developer communications (and tech)
     E-commerce




                                      #4 good to know whe...
AD ‹ - › Developer communications (and tech)
     E-commerce




                                                    Tips ...
AD ‹ - › Developer communications (and tech)
     E-commerce




                                                    Tips ...
AD ‹ - › Developer communications (and tech)
     Search Engine Optimization




                                         ...
AD ‹ - › Developer communications (and tech)
     E-commerce




              “27% are less likely to buy from a
        ...
AD ‹ - › Developer communications (and tech)
     E-commerce




“40% of users would abandon a site if it
  takes more tha...
AD ‹ - › Developer communications (and tech)
     E-commerce




          “0.1 sec slower pages dropped -1%
             ...
AD ‹ - › Developer communications (and tech)
     E-commerce




       “0.5 sec slower pages dropped -20%
            fro...
AD ‹ - › Developer communications (and tech)
     E-commerce




                                                    Round...
AD ‹ - › Developer communications (and tech)
     Coffee?




                                                       Coffe...
e-commerce
          Important things to know




            Author: Niklas Bivald




Monday, October 18, 2010
AD ‹ - › Developer
          Communications (and tech + good to know stuff)




           Author: Niklas Bivald




Monda...
Upcoming SlideShare
Loading in …5
×

Ad ‹› developer communication and technology (+e-commerce as bonus)

1,669 views

Published on

2010 years AD <-> Developer communication presentation. I'm covering how to communicate with your developers (and why it's sometimes hard). Also talks about web technology and how to improve e-commerce.

Presentation given at Hyper Island (Stockholm) for their iAD class (interactive art director)

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,669
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide


  • Why would you need to learn this? Usually ADs that are none-digital.

    Short answer: You need the basics

    - Like an architect who don&amp;#x2019;t
    understand how buildings work
    - Like a car designer that doesn&amp;#x2019;t
    feel the need to know how cars
    are built.

    The house would collapse, car crash. So does many digital campaigns.
  • What do you think?

    Monolog: you come up with:

    - Ideas
    - Make the graphics

    And simply hand over all things to the developer and go for lunch

    Dialog: You jointly figures out a solution to many problems.

    Discussion
  • You don&amp;#x2019;t have to have a developer to every creative meeting.

    Regularly take you ideas through a developer or a person with technical knowledge.

    Can be a developer, technical director, your damn cat for all that matters :)
  • Please: Don&amp;#x2019;t run an idea in front of a client if you haven&amp;#x2019;t talked to a developer

    It&amp;#x2019;s just common sense,

    A developer knows what is doable and how things can be improved

    So, what else can a developer do for you?
  • - Fresh perspective and ideas
    - Possible, impractical or impossible?

    The better synced you are with your developers, the better your end-product will be.

    You will be ashamed if you need to return to your client stating the idea you presented isn&amp;#x2019;t doable in your time frame.

    He will:
    - Ask you thousand questions.
    - Force your abstract ideas concrete

  • Experienced developer will give you suggestions on how you can cut development time,
    - Sometimes a small change in
    your layout can cut down development
    times with days, even weeks.

    It&amp;#x2019;s then up to you to prioritize. Is the function worth it? Can it be changed in any way?

    Forcing a developer to make your exact solution without listening is plain old stupid. He knows the technical aspects.

    In the end...
  • You often need a developer to know what you want to develop.

    It&amp;#x2019;s one of lives ironies.

    However, not every developer is a saint.

    How often have you gotten:
  • The most none-constructive answer you can get.

    Usually:
    - Standard reply if you haven&amp;#x2019;t explained
    in detail
    - Some small detail can&amp;#x2019;t be done and
    he doesn&amp;#x2019;t bother explaining it.
    - He feels that he isn&amp;#x2019;t part of the process
    - He doesn&amp;#x2019;t have enough information

    Look out for those people.

    Don&amp;#x2019;t let them get away with this answer!

    Reply:

  • Reply:
    &amp;#x201C;What can&amp;#x2019;t be done?&amp;#x201D;
    &amp;#x201C;Which parts can be done?&amp;#x201D;
    &amp;#x201C;What can be changed to make it possible&amp;#x201D;

    Then you can change you solution accordingly.

    It might also be the fact that developers fear change
  • Why?
    - A designer can fairly easy change designs
    - A developer in-progress can&amp;#x2019;t.
    (Bound by frameworks and code)

    This creates fraction: Listen to the developer. - Small changes can make huge differences for him.

    Another problem... is EGO
    I&amp;#x2019;m stealing graphics from a presentation by Sean Gerety here.

    Ego boils down to...





    http://000fff.org/developers-are-from-mars-designers-from-venus-a-question-of-metaphors/



  • In the end, just remember that you need each other to make the client happy.

    So just...
  • Hug it out... (I love these graphics)

    Now that we sorted that out... how do you prepare you idea for your developer?
  • Doing good preparations saves you a lot of trouble
    - Development will be easier and faster
    - You will actually save development time

    - It makes sure you covered all the angles
    - It finds holes in your theories before client / developer see it

    - The developer will be impressed
  • Okay, you&amp;#x2019;ve hugged your developer, now it&amp;#x2019;s time to work.

    You have an idea and you want to prepare it for a developer.

    What you need to understand is that this is not for the developer per se, but:

    - Covered all your angles
    - Worked out the nitty gritty in your ideas

    If this feels basic to you,
    If you do all this

    Good for you. Your a minority.
  • This is the single most important point: You need to be specific

    Real world example
    building a community with a large swedish youth company.

    Each user has a 3d avatar.

    One of the key points of this community according to the AD and CD is that the user should be able to change his avatar.

    The actual brief we got (on a &amp;#x201C;start programming&amp;#x201D; level) was.
  • ...
  • That&amp;#x2019;s how deep the developer briefs usually are.

    This is fine if it&amp;#x2019;s part of the concept phase where everyone is working on the kinks and details of the parts. But to start program on? Impossible.

    Even with a design for it, it&amp;#x2019;s impossible.

    Several issues here, first...
  • He has probably no idea,

    Or if he has, he isn&amp;#x2019;t sharing

    Either way it&amp;#x2019;s like pulling teeth from a developer perspective.
  • They would probably choke if I told him this could take two weeks or more because &amp;#x201C;it&amp;#x2019;s not so much to do&amp;#x201D;

    We&amp;#x2019;ll get back to the time issue, but first..
  • Discussion
  • Something like this in the end
  • Boring, but it&amp;#x2019;s necessary.

    Someone need to think about the details

    Somebody will probably have to document them.

    Unless you want your developer guessing. You don&amp;#x2019;t
  • Here&amp;#x2019;s were we get nitty gritty. So far we&amp;#x2019;ve only been thorough.

    - What about error messages?
    - What will happen if you have white text on a white t-shirt?

    A developer can help you here. He should know that you need stuff as:

    - Error messages
    - Notifications
    - On mouse over effects
  • What happens if there are no content?

    Does you layout still look great?

    Have you planned for that?
  • a) The one where you have all this information first hand

    b) The one were you constantly would need to squeeze in new things (error messages, notifications, hover effects etc)

    I would go for the second one.
  • The avatar
    The display of the avatar
    The change avatar page
    Error handling
    Notifications
    Database connections
    Check if every webbrowser
    Unit tests

    It all adds up.
  • I&amp;#x2019;ve prepared a quick check-list with the usual suspects:

    You&amp;#x2019;ll learn them after a while.
  • What are you doing (in detail)?
    Which parts of the site is HTML?
    Which parts are Flash?
    AJAX/HTML5?
    Do the user need to log in?
    Exactly what data is saved?
    Error messages?
    Transitions and animations?
    What parts would need graphics (messages, transitions, etc)?
    Which pages do we have?
    How does the user navigate between those pages?
    What content should be editable? (CMS)
  • This is important but often overlooked. A real estimate takes time, hours, days even.

    If you ask for a rough estimate, make sure you ask for a detailed one later!

    I know project managers that has asked for a very rough estimate that later landed in the real budget, and presented to the client.
  • Just to be clear here: A rough estimate is a rough estimate. Use if carefully.

    Be on the lookout for someone who answers too quickly on a real estimate. They aren&amp;#x2019;t covering your back.

  • Everyone wants to do cool things
    - But it&amp;#x2019;s a question of time
    - This is why you need to get them involved early

    Find or hire a social developer to be on your concept meetings
    - Find someone you can rely on
  • Learn differences between techniques

    Be able to choose technique depending on requirements

    Know pros and cons
  • Two kinds of programming

    One programmer can do both, or you can specialize

    Front end is all the visible stuff on your computer

    Back end is on the server and does the heavy lifting

    In the end..
  • Front end is the nice interfaces, the buttons, the 3d effects

    Back end allows you to save content, to save images, to send emails, to get twitter feeds. Back end is responsible for serving the front end.

    Typical back end: Not visible stuff, sending emails, saving content, serving content, user authentication, login, registration

    Time wise..
  • Back end is usually more complexed on a technical level. Many systems working together.

    Anyway...
  • Front end is were you will be working.

    The designs you produce are front end.

    Let&amp;#x2019;s break down front end into smaller pieces
  • I usually separate between techniques:

    HTML/CSS

    Javascript

    Flash

    Here we&amp;#x2019;ll go through their pros and con
  • Foundation of everything visible

    Platform from everything is launched

    Pro: Static, Search engines like it, blind people like it. Everyone can read it.

    Cons: Static, not beautiful, by itself does not do 3d or video.

    In order to serve any content you need HTML (Even with flash)

    Moving to CSS..
  • If HTML = building blocks

    CSS is how they are positioned and how they look

    Colors
    Positions
    Fonts

    Together with HTML/CSS you have a nice looking static site. But what if you a dynamic site?

    Example? hyperisland.se
  • With HTML/CSS
  • With only HTML.

    Still visible, not not very pretty.

    Enough HTML/CSS, let&amp;#x2019;s move on
  • Javascript is added upon HTML and is a way to manipulate both HTML and CSS.

    Javascript makes stuff move (Twitter example?)

    Pro:
    - Makes stuff move
    - Initialize Flash
    - Makes stuff dynamic

    Cons:
    - Cannot show video on it&amp;#x2019;s own
    - Search engines don&amp;#x2019;t do javascript
    - Blind people don&amp;#x2019;t do javascript.
    - Errors cripple the page.
  • With only HTML.

    Still visible, not not very pretty.

    Enough HTML/CSS, let&amp;#x2019;s move on
  • Application-in-an-application. That means that when you visit a HTML site with flash on it, Flash is actually a own application. Flash can do pretty much what it wants in it&amp;#x2019;s own boundaries.

    Pros:
    - Can show video
    - 3d

    Cons:
    - Bloated, Heavy
    - Search engines don&amp;#x2019;t do Flash at all,
    - Long time to load,
    - Blind don&amp;#x2019;t do flash.
    - Right click menus.

    Flash looks the same in all browsers, but html/css does not.
  • Sites look different in different browsers. Mainly Internet Explorer.

    Developing for Firefox, then you need to check: Internet Explorer 7 and 8.

    Often 80% of development, 20% checking in other browsers.

    Let&amp;#x2019;s go back to flash.
  • Usability: Should be easy to use
    Links: COPY+PASTE the URL

    SEO Content without Javascript
  • You need to make Flash
    Plus alternative content (but don&amp;#x2019;t style it)

    What if we don&amp;#x2019;t have alternative content?
  • - If a blind can&amp;#x2019;t &amp;#x201C;see it&amp;#x201D;,
    - Google can&amp;#x2019;t read it.
    - Use Links
    - http://www.seo-browser.com/

    Example
  • Ask you developers this:
    Can you print it
    Can you bookmark it
    Can you send it
    Can Google Read it
  • When you&amp;#x2019;re talking about web 2.0 you often mention AJAX.

    Recently you needed Flash to do dynamic stuff such as advanced layers, effects, animations.

    Now you can do most of that natively in your browser.

    Using Advanced Javascript. Ajax is what powers Facebook and Twitter.

    It takes less time to load, it feels &amp;#x201C;lighter&amp;#x201D;. You don&amp;#x2019;t need to refresh the page on every click.
  • Ask you developers this:
    Can you print it
    Can you bookmark it
    Can you send it
    Can Google Read it
  • Most of you have probably heard about HTML 5 and CSS 3.

    I won&amp;#x2019;t go very deep into them, but it&amp;#x2019;s good for you to know this.
  • Play videos without Flash
    Animate without JS
    Better structure for Google
    PUSH data
  • PUSH or the real-time web allows you to PUSH content to users.

    Traditionally you load a site, disconnect and read it.

    If you need updates, you poll them every X seconds.

    PUSH allows us to send when we want it, how often we want to.
  • Evolution goes slow, it&amp;#x2019;s quite some time before all supported them.

    So for now, you STILL need
    alternative content for HTML5.

    On that note, Let&amp;#x2019;s go deeper into why it&amp;#x2019;s so important.

    Let&amp;#x2019;s talk about Google really quickly before we drink more coffee.
  • Google is smart - as long as it can read your content.

    It needs valid structure and good links

    Also, you need people to link you.

    It can&amp;#x2019;t read flash!
    It can&amp;#x2019;t read Javascript!

    So how does Google rank pages?
  • All the things Google knows about you measures up in Page Rank. The higher the high you appear in the search result.

    PR is between 0 and 10
    Everything above 4 is good

    I could spend a week on search engine optimization alone, but it&amp;#x2019;s better if you research it independently.

    SEO is basically:
    - Optimizing titles
    - Content
    - Pages
    - Links to improve your ranking.

  • Work out and visually describe what to do.

    Keeps everyone (including the client) on the same page. Allows for decisions without graphics.
  • - A way to break down what you need to do
    - Easier to estimate

    Either plan the website, or plan for headaches and missed deadlines.

    Show wireframes, not designs. Get a sign-off.

    Let&amp;#x2019;s check out a flow chart
  • Sample workflow
  • Moving on to wireframes, I&amp;#x2019;m not going to talk to much about this example. It&amp;#x2019;s pretty obvious how things look.

    But let&amp;#x2019;s talk about what to consider when doing wireframes
  • Helps you map out your entire site:

    - Function over form. No nice fonts!
    - Decide who&amp;#x2019;s in charge
    - Deadlines
    - Involve designers, developers,
    customer
    - Do every page
    - Include ads
    - Include admin features
  • Before we leave the sketching, don&amp;#x2019;t forget your use cases. It will help you see it from a users perspective.

    Define your customer and give him a profile, ideas, views. Now look through their eyes.

    When all the planing is done it&amp;#x2019;s time to choose, should you develop it in-house or out-source?
  • Your process will vary.
    In-house developers will be more in-process since they usually sit side-by-side:

    - Easy to use as a resource
    - Easier to drag ideas to
    - Easier to drink beers with.

    Out-sourced developers you usually more formal briefs to work from.

    You need an in-house developer or someone to bounce ideas with when out-sourcing development. To make sure your briefs cover everything.
  • Preparations depend on if you are fixed or on an hourly rate.

    If your hire per hour it&amp;#x2019;s easy to do less preparations and specifications. Just remember that time flies.

    If you hire per hour remember that any mid-project changes drastically increase your costs.

    Seen this happen many times:
    - Let the developer work for two week
    - Change the direction totally

    He&amp;#x2019;ll have to scratch pretty much everything he has done. You just lost 50 000. Was it worth it?
  • It&amp;#x2019;s a good rule of thumb, add 20% for shit happens :)

    A good thing to remember on a fixed budget is...
  • If you hire someone on a fixed budget, you get what you specified. If you forget things, you&amp;#x2019;ll have to pay extra for it.

    Meanwhile,
  • If you hire someone on a hourly rate, you take accountability for his progress!

    This might sound weird, but it mainly because if you keep changing your mind, you&amp;#x2019;re the reason the project gets delayed.
  • The main thing to remember with hourly rate is that time flies.

    Make sure to have short incremental deadlines

    Enough about preparations...
  • When the site is released, your work is not done!

    Work hard to improve the site!

    Make sure you...
  • Measure everything:
    - Page views
    - How the users moved
    - Measure errors (like failed sign
    ups) to early spot errors.

    Also..
  • More in e-commerce section,
    But Speed is a factor in your Google ranking.

    Slow sites mean less profits. More about that on e-commerce

    But before we take a break and go there...
  • Make sure you define success.

    What is success?

    You can&amp;#x2019;t succeed your customers expectations if you don&amp;#x2019;t define success.

  • This is a smaller side-presentation focusing on key points for e-commerce.
  • E-commerce is complex.

    Large sites

    Real money
  • Structure is everything
    Wireframes, Flow charts,
    The works
  • Choosing a e-commerce system is hard:
    - You need your specs
    - Cover your angles
    - No system is perfect

    After the site is released, make sure you track every button.
  • Track every button.

    GA is great: Track pages, in-link, out-links, buttons

    GA is great for tracking, but you also need to...
  • Not only track everything,
    But monitor everything!

    Create goals in Google Analytics:
    - Community: Created user
    - What would you have for goal?

    Use alerts to get mail if something starts breaking or user habit changes rappidly.

    Example alert: 50% more traffic suddenly (blogger in-link)
  • Use tunnels, get to know your visitor

    Know how long a checkout takes

    Know how fast a page loads!
  • When a customer starts an order/checkout but doesn&amp;#x2019;t finish it.

    Anywhere from 20% &amp;#xBB; 70%

    It&amp;#x2019;s all about maximizing profit, minimizing drop outs.
  • Monitor your loopholes:

    - How many people do you loose?
    - Where do you loose them?

    Now that you know where you loose your customer, how do you improve your site?
  • Hard to measure the success of each part if a huge launch

    It also opens up for serious drops in traffic/sales.

    The solution is to use small updates, and test them throughly.
  • A/B testing means that you create an alternative function (page, section, flow etc.) which is small and definable.

    Then run them side by side, with a small percentage of your users getting the new page. Then measure success.

    I thought I&amp;#x2019;d through some do &amp; don&amp;#x2019;ts for A/B testing..
  • It&amp;#x2019;s easy to be lazy and run A for 2 weeks, then B for 2 weeks. Don&amp;#x2019;t do it, you can&amp;#x2019;t trust the result.
  • Don&amp;#x2019;t scare your users. You don&amp;#x2019;t want to hurt your regular visitors.

    Also, if a user gotten the new look, they should always get the new look.
  • If you are testing a new button for example, use the new one on the entire site!

    And last..
  • It&amp;#x2019;s quite common that the result that works best is not the one you had in mind. Trust the stats.

    We&amp;#x2019;re gonna move away from the testing to good-to-know statistics, but first briefly the check-out flow and search.
  • One of your most important flows is the check-out.

    - As few steps as possible
    (4 most)
    - Don&amp;#x2019;t require registration!
    - Break it down to logical
    steps (1 step for shipping, etc)
    - Measure where people exit

    Work hard to improve it - it will show. Next is search
  • Search is important. As many as 40-70% of shoppers navigate through your search at one point or another. Yet this is often ignored...

    Make sure to:
    - Fix misspellings (like Google)
    - Quick view a result (image expand etc)
    - Add to cart (express checkout)

    Roxy.com does this well
  • Roxy is a good example

    But why am I talking so much about page speed? experience, smooth user flows?

    Bottom line is...



    http://www.roxy.com/search/index.jsp?kwCatId=&amp;kw=bag&amp;origkw=bag&amp;sr=1

  • &amp;#x201C;27% are less likely to buy from a retailer off-line if they had a bad
    experience online&amp;#x201D;

    Talking about speed...
  • &amp;#x201C;40% of users would abandon a site if it takes more than 3 seconds to load&amp;#x201D;

    Imagine that impact on an e-commerce site.
  • &amp;#x201C;+100 ms slower pages = -1% in sales (Amazon)&amp;#x201D;

    Google tried the same..
  • &amp;#x201C;0.5 sec slower pages dropped -20% from Google search traffic&amp;#x201D;

    Well, that was some short statistics. Of course there is much more out there. But we can only cover so much, and this lecture ends here.
  • e-commerce is an exiting field. It will continue to grow and grow. Looking at the e-commerce sites out there we have a lot of work ahead of us.

    Just make sure to measure everything, and more importantly hug your developer.

    That&amp;#x2019;s all for me, I will be sending out a Google Form about how you experienced the lecture.



  • Ad ‹› developer communication and technology (+e-commerce as bonus)

    1. 1. Don’t panic Now in large friendly letters* * The joke is pretty much lost if you haven’t read the hitchhikers guide to the galaxy Author: Niklas Bivald Monday, October 18, 2010
    2. 2. AD ‹ - › Developer Communications (and tech + good to know stuff) Author: Niklas Bivald Monday, October 18, 2010
    3. 3. AD ‹ - › Developer communications (and tech) I don’t do developing! “I'm an art director - I don't do developing” Monday, October 18, 2010 Why would you need to learn this? Usually ADs that are none-digital. Short answer: You need the basics - Like an architect who don’t understand how buildings work - Like a car designer that doesn’t feel the need to know how cars are built. The house would collapse, car crash. So does many digital campaigns.
    4. 4. AD ‹ - › Developer communications (and tech) Monolog or dialog? Monolog or dialog? Monday, October 18, 2010 What do you think? Monolog: you come up with: - Ideas - Make the graphics And simply hand over all things to the developer and go for lunch Dialog: You jointly figures out a solution to many problems. Discussion
    5. 5. AD ‹ - › Developer communications (and tech) Monolog or dialog? Monolog or dialog? Monday, October 18, 2010 You donʼt have to have a developer to every creative meeting. Regularly take you ideas through a developer or a person with technical knowledge. Can be a developer, technical director, your damn cat for all that matters :)
    6. 6. AD ‹ - › Developer communications (and tech) Please Please Please.... Don’t run an idea in front of a client if you haven’t talked to a developer Monday, October 18, 2010 Please: Don’t run an idea in front of a client if you haven’t talked to a developer It’s just common sense, A developer knows what is doable and how things can be improved So, what else can a developer do for you?
    7. 7. AD ‹ - › Developer communications (and tech) What a developer can do for you What a developer can do for you Monday, October 18, 2010 - Fresh perspective and ideas - Possible, impractical or impossible? The better synced you are with your developers, the better your end-product will be. You will be ashamed if you need to return to your client stating the idea you presented isnʼt doable in your time frame. He will: - Ask you thousand questions. - Force your abstract ideas concrete
    8. 8. AD ‹ - › Developer communications (and tech) Prioritize Prioritize Monday, October 18, 2010 Experienced developer will give you suggestions on how you can cut development time, ! - Sometimes a small change in ! your layout can cut down development ! times with days, even weeks. Itʼs then up to you to prioritize. Is the function worth it? Can it be changed in any way? Forcing a developer to make your exact solution without listening is plain old stupid. He knows the technical aspects. In the end...
    9. 9. AD ‹ - › Developer communications (and tech) Life’s irony You need a developer to know the details in what you want to develop Monday, October 18, 2010 You often need a developer to know what you want to develop. Itʼs one of lives ironies. However, not every developer is a saint. How often have you gotten:
    10. 10. AD ‹ - › Developer communications (and tech) It can’t be done “It can’t be done” Don’t let them get away with this answer! Monday, October 18, 2010 The most none-constructive answer you can get. Usually: - Standard reply if you havenʼt explained in detail - Some small detail canʼt be done and he doesnʼt bother explaining it. - He feels that he isnʼt part of the process - He doesnʼt have enough information Look out for those people. Donʼt let them get away with this answer! Reply:
    11. 11. AD ‹ - › Developer communications (and tech) It can’t be done “What can’t be done?” “Which parts can be done?” “What can be changed to make it possible” Monday, October 18, 2010 Reply: “What can’t be done?” “Which parts can be done?” “What can be changed to make it possible” Then you can change you solution accordingly. It might also be the fact that developers fear change
    12. 12. AD ‹ - › Developer communications (and tech) Fear of change Developers fear change ... let’s try to understand why Monday, October 18, 2010 Why? - A designer can fairly easy change designs - A developer in-progress can’t. (Bound by frameworks and code) This creates fraction: Listen to the developer. - Small changes can make huge differences for him. Another problem... is EGO I’m stealing graphics from a presentation by Sean Gerety, @IdeaKitchn (Sean Gerety), @fwdanimation, Casey Edwards, here. Ego boils down to...
    13. 13. AD ‹ - › Developer communications (and tech) Introduction @IdeaKitchn (Sean Gerety), @fwdanimation, Casey Edwards, Monday, October 18, 2010
    14. 14. AD ‹ - › Developer communications (and tech) Introduction @IdeaKitchn (Sean Gerety), @fwdanimation, Casey Edwards, Monday, October 18, 2010
    15. 15. AD ‹ - › Developer communications (and tech) Kill the ego Kill the ego - You need each other Monday, October 18, 2010 In the end, just remember that you need each other to make the client happy. So just...
    16. 16. AD ‹ - › Developer communications (and tech) Introduction @IdeaKitchn (Sean Gerety), @fwdanimation, Casey Edwards, Monday, October 18, 2010 Hug it out... (I love these graphics) Now that we sorted that out... how do you prepare you idea for your developer?
    17. 17. AD ‹ - › Developer communications (and tech) Help your developer Help your developer Monday, October 18, 2010 Doing good preparations saves you a lot of trouble " -" Development will be easier and faster " - " You will actually save development time " - " It makes sure you covered all the angles " -" It finds holes in your theories before client / developer see it - The developer will be impressed
    18. 18. AD ‹ - › Developer communications (and tech) How to prepare your ideas How to prepare you idea (for a developer) Monday, October 18, 2010 Okay, youʼve hugged your developer, now itʼs time to work. You have an idea and you want to prepare it for a developer. What you need to understand is that this is not for the developer per se, but: " - Covered all your angles " - Worked out the nitty gritty in your ideas If this feels basic to you, If you do all this Good for you. Your a minority.
    19. 19. AD ‹ - › Developer communications (and tech) How to prepare your ideas Generic is the enemy, be specific! Monday, October 18, 2010 This is the single most important point: You need to be specific Real world example building a community with a large swedish youth company. Each user has a 3d avatar. One of the key points of this community according to the AD and CD is that the user should be able to change his avatar. The actual brief we got (on a “start programming” level) was.
    20. 20. AD ‹ - › Developer communications (and tech) How to prepare your ideas: Real world example User must be able to change his avatar Monday, October 18, 2010 ...
    21. 21. AD ‹ - › Developer communications (and tech) How to prepare your ideas: Real world example We want it by friday Monday, October 18, 2010 Thatʼs how deep the developer briefs usually are. This is fine if itʼs part of the concept phase where everyone is working on the kinks and details of the parts. But to start program on? Impossible. Even with a design for it, itʼs impossible. Several issues here, first...
    22. 22. AD ‹ - › Developer communications (and tech) How to prepare your ideas First problem: They don’t know what they want Monday, October 18, 2010 He has probably no idea, Or if he has, he isnʼt sharing Either way itʼs like pulling teeth from a developer perspective.
    23. 23. AD ‹ - › Developer communications (and tech) How to prepare your ideas Second problem: “It’s not so much to do” Monday, October 18, 2010 They would probably choke if I told him this could take two weeks or more because “it’s not so much to do” We’ll get back to the time issue, but first..
    24. 24. AD ‹ - › Developer communications (and tech) How to prepare your ideas How would you formulate: User must be able to change his avatar? Monday, October 18, 2010 Discussion
    25. 25. AD ‹ - › Developer communications (and tech) How to prepare your ideas Logged in users need to be able to change certain aspects on his avatar: * Jacket * Hair With a limited number of options on each. The exact changes needed is attached below. The AD will prepare each option for each parameter. They should be changed from the “change your avatar page” on your control panel. Sketches for all pages are included below. - Add wireframe for “change your avatar page” here - Monday, October 18, 2010 Something like this in the end
    26. 26. AD ‹ - › Developer communications (and tech) How to prepare your ideas: Sigh... That was boring, wasn’t it? Monday, October 18, 2010 Boring, but itʼs necessary. Someone need to think about the details Somebody will probably have to document them. Unless you want your developer guessing. You donʼt
    27. 27. AD ‹ - › Developer communications (and tech) How to prepare your ideas: What about: White text on a white t-shirt? Monday, October 18, 2010 Hereʼs were we get nitty gritty. So far weʼve only been thorough. " - What about error messages? " - What will happen if you have white text on a white t- shirt? A developer can help you here. He should know that you need stuff as: " - Error messages " - Notifications" " - On mouse over effects
    28. 28. AD ‹ - › Developer communications (and tech) How to prepare your ideas: What about: No text or no t-shirt? Monday, October 18, 2010 What happens if there are no content? Does you layout still look great? Have you planned for that?
    29. 29. AD ‹ - › Developer communications (and tech) How to prepare your ideas Which end-product would you prefer? a) The one where you have all this information first hand b) The one were you constantly would need to squeeze in new things (error messages, notifications, hover effects etc) Monday, October 18, 2010 a) The one where you have all this information first hand b) The one were you constantly would need to squeeze in new things (error messages, notifications, hover effects etc) I would go for the second one.
    30. 30. AD ‹ - › Developer communications (and tech) How to prepare your ideas Does two weeks still sound like much time? Monday, October 18, 2010 The avatar The display of the avatar The change avatar page Error handling Notifications Database connections Check if every webbrowser Unit tests It all adds up.
    31. 31. AD ‹ - › Developer communications (and tech) How to prepare your ideas: The usual suspects The (un)usual suspects (after a while you learn the answer the usual questions) Monday, October 18, 2010 Iʼve prepared a quick check-list with the usual suspects: Youʼll learn them after a while.
    32. 32. AD ‹ - › Developer communications (and tech) How to prepare your ideas: The usual suspects What are you doing (in detail)? Which parts of the site is HTML? Which parts are Flash? AJAX/HTML5? Do the user need to log in? Exactly what data is saved? Error messages? Transitions and animations? What parts would need graphics (messages, transitions, etc)? Which pages do we have? How does the user navigate between those pages? What content should be editable? (CMS) Monday, October 18, 2010 What are you doing (in detail)? Which parts of the site is HTML? Which parts are Flash? AJAX/HTML5? Do the user need to log in? Exactly what data is saved? Error messages? Transitions and animations? What parts would need graphics (messages, transitions, etc)? Which pages do we have? How does the user navigate between those pages? What content should be editable? (CMS)
    33. 33. AD ‹ - › Developer communications (and tech) Estimates A real estimate takes time (hours/days) (and requires answers) Monday, October 18, 2010 This is important but often overlooked. A real estimate takes time, hours, days even. If you ask for a rough estimate, make sure you ask for a detailed one later! I know project managers that has asked for a very rough estimate that later landed in the real budget, and presented to the client.
    34. 34. AD ‹ - › Developer communications (and tech) Estimates A rough estimate is a rough estimate (with emphasis on rough) Monday, October 18, 2010 Just to be clear here: A rough estimate is a rough estimate. Use if carefully. Be on the lookout for someone who answers too quickly on a real estimate. They arenʼt covering your back.
    35. 35. AD ‹ - › Developer communications (and tech) Coffee? Coffee? End of part I Monday, October 18, 2010
    36. 36. AD ‹ - › Developer communications (and tech) Coffee? One last thing about developers... Monday, October 18, 2010 Everyone wants to do cool things ! - But itʼs a question of time ! - This is why you need to get them involved early Find or hire a social developer to be on your concept meetings ! - Find someone you can rely on
    37. 37. AD ‹ - › Developer communications (and tech) Web techniques Web techniques Monday, October 18, 2010 Learn differences between techniques Be able to choose technique depending on requirements Know pros and cons
    38. 38. AD ‹ - › Developer communications (and tech) Web techniques Developing: Front and back end Monday, October 18, 2010 Two kinds of programming One programmer can do both, or you can specialize Front end is all the visible stuff on your computer Back end is on the server and does the heavy lifting
    39. 39. AD ‹ - › Developer communications (and tech) Web techniques You need both Monday, October 18, 2010 Front end is the nice interfaces, the buttons, the 3d effects Back end allows you to save content, to save images, to send emails, to get twitter feeds. Back end is responsible for serving the front end. Typical back end: Not visible stuff, sending emails, saving content, serving content, user authentication, login, registration Time wise..
    40. 40. AD ‹ - › Developer communications (and tech) Web techniques A developer will most likely separate the two: 2 weeks front end, 4 week back end Monday, October 18, 2010 Back end is usually more complexed on a technical level. Many systems working together. Anyway...
    41. 41. AD ‹ - › Developer communications (and tech) Web techniques Enough back end, let’s go front end Monday, October 18, 2010 Front end is were you will be working. The designs you produce are front end. Letʼs break down front end into smaller pieces
    42. 42. AD ‹ - › Developer communications (and tech) Web techniques HTML/CSS, Javascript and Flash Monday, October 18, 2010 I usually separate between techniques: HTML/CSS Javascript Flash Here weʼll go through their pros and con
    43. 43. AD ‹ - › Developer communications (and tech) Web techniques HTML/CSS, Javascript and Flash Monday, October 18, 2010 Foundation of everything visible Platform from everything is launched Pro: Static, Search engines like it, blind people like it. Everyone can read it. Cons: Static, not beautiful, by itself does not do 3d or video. In order to serve any content you need HTML (Even with flash) Moving to CSS..
    44. 44. AD ‹ - › Developer communications (and tech) Web techniques HTML/CSS, Javascript and Flash Monday, October 18, 2010 If HTML = building blocks CSS is how they are positioned and how they look Colors Positions Fonts Together with HTML/CSS you have a nice looking static site. But what if you a dynamic site? Example? hyperisland.se
    45. 45. AD ‹ - › Developer communications (and tech) Web techniques Monday, October 18, 2010 With HTML/CSS
    46. 46. AD ‹ - › Developer communications (and tech) Web techniques Monday, October 18, 2010 With only HTML. Still visible, not not very pretty. Enough HTML/CSS, letʼs move on
    47. 47. AD ‹ - › Developer communications (and tech) Web techniques HTML/CSS, Javascript and Flash Monday, October 18, 2010 Javascript is added upon HTML and is a way to manipulate both HTML and CSS. Javascript makes stuff move (Twitter example?) Pro: " " " - Makes stuff move" " " " - Initialize Flash " " - Makes stuff dynamic Cons: " " - Cannot show video on itʼs own " " - Search engines donʼt do javascript " " - Blind people donʼt do javascript. " " - Errors cripple the page.
    48. 48. AD ‹ - › Developer communications (and tech) Web techniques (movie with twitter example removed) Monday, October 18, 2010 With only HTML. Still visible, not not very pretty. Enough HTML/CSS, letʼs move on
    49. 49. AD ‹ - › Developer communications (and tech) Web techniques HTML/CSS, Javascript and Flash Monday, October 18, 2010 Application-in-an-application. That means that when you visit a HTML site with flash on it, Flash is actually a own application. Flash can do pretty much what it wants in itʼs own boundaries. Pros: " " - Can show video" " " - 3d Cons: " " - Bloated, Heavy " " - Search engines donʼt do Flash at all, " " - Long time to load, " " - Blind donʼt do flash. " " - Right click menus. Flash looks the same in all browsers, but html/css does
    50. 50. AD ‹ - › Developer communications (and tech) Web techniques Different browsers - different looks Monday, October 18, 2010 Sites look different in different browsers. Mainly Internet Explorer. Developing for Firefox, then you need to check: Internet Explorer 7 and 8. Often 80% of development, 20% checking in other browsers. Letʼs go back to flash.
    51. 51. AD ‹ - › Developer communications (and tech) Doing Flash the good way Doing Flash the good way: Usability, Links, Alternative content Monday, October 18, 2010 Usability: Should be easy to use Links: COPY+PASTE the URL SEO Content without Javascript
    52. 52. AD ‹ - › Developer communications (and tech) Doing Flash the good way Doing Flash the good way takes time: You need to make Flash, Plus the alternative content Monday, October 18, 2010 You need to make Flash Plus alternative content (but don’t style it) What if we don’t have alternative content?
    53. 53. AD ‹ - › Developer communications (and tech) Doing Flash the good way Flash Example: www.thelotteryoflife.co.uk Google, Right click, Print, SEO links, JS Monday, October 18, 2010 - If a blind can’t “see it”, - Google can’t read it. - Use Links - http://www.seo-browser.com/ Example
    54. 54. AD ‹ - › Developer communications (and tech) Doing Flash the good way Can you print it? V Can you bookmark it? Can you send it to a friend? Can Google read it? Monday, October 18, 2010 Ask you developers this: Can you print it Can you bookmark it Can you send it Can Google Read it
    55. 55. AD ‹ - › Developer communications (and tech) Ajax The “almost new” web: Ajax - Web 2.0 - Facebook Monday, October 18, 2010 When youʼre talking about web 2.0 you often mention AJAX. Recently you needed Flash to do dynamic stuff such as advanced layers, effects, animations. Now you can do most of that natively in your browser. Using Advanced Javascript. Ajax is what powers Facebook and Twitter. It takes less time to load, it feels “lighter”. You donʼt need to refresh the page on every click.
    56. 56. AD ‹ - › Developer communications (and tech) Ajax Can you print it? V Can you bookmark it? Can you send it to a friend? Can Google read it? Monday, October 18, 2010 Ask you developers this: Can you print it Can you bookmark it Can you send it Can Google Read it
    57. 57. AD ‹ - › Developer communications (and tech) HTML 5 The “new new” web: HTML 5 and CSS 3 Monday, October 18, 2010 Most of you have probably heard about HTML 5 and CSS 3. I wonʼt go very deep into them, but itʼs good for you to know this.
    58. 58. AD ‹ - › Developer communications (and tech) HTML 5 Minimizes dependencies on Flash and JS Plays videos without Flash V Can animate without JS Better structure for Google Better support for PUSH Monday, October 18, 2010 Play videos without Flash Animate without JS Better structure for Google PUSH data
    59. 59. AD ‹ - › Developer communications (and tech) HTML 5 The real-time web: PUSH content to the user in real-time, Instead of traditional GET every X sec. Monday, October 18, 2010 PUSH or the real-time web allows you to PUSH content to users. Traditionally you load a site, disconnect and read it. If you need updates, you poll them every X seconds. PUSH allows us to send when we want it, how often we want to.
    60. 60. AD ‹ - › Developer communications (and tech) HTML 5 There’s always a catch (HTML5/CSS3): Not fully supported (in a long time) Needs alternative content Monday, October 18, 2010 Evolution goes slow, itʼs quite some time before all supported them. So for now, you STILL need alternative content for HTML5. On that note, Letʼs go deeper into why itʼs so important. Letʼs talk about Google really quickly before we drink more coffee.
    61. 61. AD ‹ - › Developer communications (and tech) Search Engine Optimization Making sure Google can read you: Content, Structure, In-links Monday, October 18, 2010 Google is smart - as long as it can read your content. It needs valid structure and good links Also, you need people to link you. It can’t read flash! It can’t read Javascript! So how does Google rank pages?
    62. 62. AD ‹ - › Developer communications (and tech) Search Engine Optimization Making sure Google can read you: SEO (Search Engine Optimization) Monday, October 18, 2010 All the things Google knows about you measures up in Page Rank. The higher the high you appear in the search result. PR is between 0 and 10 Everything above 4 is good I could spend a week on search engine optimization alone, but it’s better if you research it independently. SEO is basically: - Optimizing titles - Content - Pages - Links to improve your ranking.
    63. 63. AD ‹ - › Developer communications (and tech) Coffee Coffee End of part II Monday, October 18, 2010
    64. 64. AD ‹ - › Developer communications (and tech) Flow charts and wireframes Flow charts and Wireframes: The process and the structure Monday, October 18, 2010 Work out and visually describe what to do. Keeps everyone (including the client) on the same page. Allows for decisions without graphics.
    65. 65. AD ‹ - › Developer communications (and tech) Flow charts and wireframes Flow charts and Wireframes: Forces you to think! Monday, October 18, 2010 - A way to break down what you need to do - Easier to estimate Either plan the website, or plan for headaches and missed deadlines. Show wireframes, not designs. Get a sign- off. Let’s check out a flow chart
    66. 66. AD ‹ - › Developer communications (and tech) Search Engine Optimization Monday, October 18, 2010 Sample workflow
    67. 67. AD ‹ - › Developer communications (and tech) Search Engine Optimization Monday, October 18, 2010 Moving on to wireframes, I’m not going to talk to much about this example. It’s pretty obvious how things look. But let’s talk about what to consider when doing wireframes
    68. 68. AD ‹ - › Developer communications (and tech) Flow charts and wireframes Improving the wireframes: Things to consider Monday, October 18, 2010 Helps you map out your entire site: - Function over form. No nice fonts! - Decide who’s in charge - Deadlines - Involve designers, developers, customer - Do every page - Include ads - Include admin features
    69. 69. AD ‹ - › Developer communications (and tech) Use cases Use cases? Monday, October 18, 2010 Before we leave the sketching, donʼt forget your use cases. It will help you see it from a users perspective. Define your customer and give him a profile, ideas, views. Now look through their eyes. When all the planing is done itʼs time to choose, should you develop it in-house or out- source?
    70. 70. AD ‹ - › Developer communications (and tech) The cost of development Development costs In-house our out-sourced? Monday, October 18, 2010 Your process will vary. In-house developers will be more in-process since they usually sit side-by-side: - Easy to use as a resource - Easier to drag ideas to - Easier to drink beers with. Out-sourced developers you usually more formal briefs to work from. You need an in-house developer or someone to bounce ideas with when out-sourcing development. To make sure your briefs cover everything.
    71. 71. AD ‹ - › Developer communications (and tech) The cost of development Development costs Are you fixed priced, or on an hourly rate? Monday, October 18, 2010 Preparations depend on if you are fixed or on an hourly rate. If your hire per hour it’s easy to do less preparations and specifications. Just remember that time flies. If you hire per hour remember that any mid-project changes drastically increase your costs. Seen this happen many times: - Let the developer work for two week - Change the direction totally He’ll have to scratch pretty much everything he has done. You just lost 50 000. Was it worth it?
    72. 72. AD ‹ - › Developer communications (and tech) The cost of development Fixed price: Calculate hours required, then add 20% for shit happens Monday, October 18, 2010 It’s a good rule of thumb, add 20% for shit happens :) A good thing to remember on a fixed budget is...
    73. 73. AD ‹ - › Developer communications (and tech) The cost of development Fixed price: If you hire someone on a fixed budget, you get what you specified. If you forget things, you’ll have to pay extra for it. Monday, October 18, 2010 If you hire someone on a fixed budget, you get what you specified. If you forget things, you’ll have to pay extra for it. Meanwhile,
    74. 74. AD ‹ - › Developer communications (and tech) The cost of development Hourly rate: If you hire someone on a hourly rate, you take accountability for his progress! Monday, October 18, 2010 If you hire someone on a hourly rate, you take accountability for his progress! This might sound weird, but it mainly because if you keep changing your mind, you’re the reason the project gets delayed.
    75. 75. AD ‹ - › Developer communications (and tech) The cost of development Hourly rate: Time flies! have incremental deadlines Monday, October 18, 2010 The main thing to remember with hourly rate is that time flies. Make sure to have short incremental deadlines Enough about preparations...
    76. 76. AD ‹ - › Developer communications (and tech) The cost of development Moving on: What to do when the site is released? Monday, October 18, 2010 When the site is released, your work is not done! Work hard to improve the site! Make sure you...
    77. 77. AD ‹ - › Developer communications (and tech) Measure everything Measure everything! You need the data, Google Analytics is king, Tag every button! A/B testing Monday, October 18, 2010 Measure everything: - Page views - How the users moved - Measure errors (like failed sign ups) to early spot errors. Also..
    78. 78. AD ‹ - › Developer communications (and tech) Speed is key Making sure your visitors stay: Speed is key! Monday, October 18, 2010 More in e-commerce section, But Speed is a factor in your Google ranking. Slow sites mean less profits. More about that on e-commerce But before we take a break and go there...
    79. 79. AD ‹ - › Developer communications (and tech) Measure everything Measuring success! You can’t succeed your customers expectations if you don’t define success. Monday, October 18, 2010 Make sure you define success. What is success? You can’t succeed your customers expectations if you don’t define success.
    80. 80. AD ‹ - › Developer communications (and tech) Coffee? Coffee? End of part III Monday, October 18, 2010
    81. 81. e-commerce Important things to know Author: Niklas Bivald Monday, October 18, 2010 This is a smaller side-presentation focusing on key points for e-commerce.
    82. 82. AD ‹ - › Developer communications (and tech) E-commerce E-commerce is complex: Large sites, “real money”, complex Monday, October 18, 2010 E-commerce is complex. Large sites Real money
    83. 83. AD ‹ - › Developer communications (and tech) E-commerce E-commerce is complex: Structure is everything Monday, October 18, 2010 Structure is everything Wireframes, Flow charts, The works
    84. 84. AD ‹ - › Developer communications (and tech) E-commerce Choosing a system: Have you specs ready Monday, October 18, 2010 Choosing a e-commerce system is hard: - You need your specs - Cover your angles - No system is perfect After the site is released, make sure you track every button.
    85. 85. AD ‹ - › Developer communications (and tech) E-commerce Make sure you Track every button Monday, October 18, 2010 Track every button. GA is great: Track pages, in-link, out- links, buttons GA is great for tracking, but you also need to...
    86. 86. AD ‹ - › Developer communications (and tech) E-commerce Make sure you Monitor! (goals and alerts) Monday, October 18, 2010 Not only track everything, But monitor everything! Create goals in Google Analytics: - Community: Created user - What would you have for goal? Use alerts to get mail if something starts breaking or user habit changes rappidly. Example alert: 50% more traffic suddenly (blogger in-link)
    87. 87. AD ‹ - › Developer communications (and tech) E-commerce Make sure you Use thunnels, monitor speed Monday, October 18, 2010 Use tunnels, get to know your visitor Know how long a checkout takes Know how fast a page loads!
    88. 88. AD ‹ - › Developer communications (and tech) E-commerce What is your Shopping cart abandonment rate Monday, October 18, 2010 When a customer starts an order/ checkout but doesn’t finish it. Anywhere from 20% » 70% It’s all about maximizing profit, minimizing drop outs.
    89. 89. AD ‹ - › Developer communications (and tech) E-commerce Where do you Loose your customers? Monday, October 18, 2010 Monitor your loopholes: - How many people do you loose? - Where do you loose them? Now that you know where you loose your customer, how do you improve your site?
    90. 90. AD ‹ - › Developer communications (and tech) E-commerce Make sure you Do small (incremental) updates! Monday, October 18, 2010 Hard to measure the success of each part if a huge launch It also opens up for serious drops in traffic/sales. The solution is to use small updates, and test them throughly.
    91. 91. AD ‹ - › Developer communications (and tech) E-commerce Make sure you Use A/B split testing Monday, October 18, 2010 A/B testing means that you create an alternative function (page, section, flow etc.) which is small and definable. Then run them side by side, with a small percentage of your users getting the new page. Then measure success. I thought I’d through some do & don’ts for A/B testing..
    92. 92. AD ‹ - › Developer communications (and tech) E-commerce #1 good to know when A/B testing: Make sure you run them side by side Monday, October 18, 2010 It’s easy to be lazy and run A for 2 weeks, then B for 2 weeks. Don’t do it, you can’t trust the result.
    93. 93. AD ‹ - › Developer communications (and tech) E-commerce #2 good to know when A/B testing: Don’t scare your users (a.k.a test on new users) Monday, October 18, 2010 Don’t scare your users. You don’t want to hurt your regular visitors. Also, if a user gotten the new look, they should always get the new look.
    94. 94. AD ‹ - › Developer communications (and tech) E-commerce #3 good to know when A/B testing: Make it cross-site Monday, October 18, 2010 If you are testing a new button for example, use the new one on the entire site! And last..
    95. 95. AD ‹ - › Developer communications (and tech) E-commerce #4 good to know when A/B testing: Be prepared for a surprise Monday, October 18, 2010 It’s quite common that the result that works best is not the one you had in mind. Trust the stats. We’re gonna move away from the testing to good-to-know statistics, but first briefly the check-out flow and search.
    96. 96. AD ‹ - › Developer communications (and tech) E-commerce Tips and tricks The check-out flow Monday, October 18, 2010 One of your most important flows is the check-out. - As few steps as possible (4 most) - Don’t require registration! - Break it down to logical steps (1 step for shipping, etc) - Measure where people exit Work hard to improve it - it will show. Next is search
    97. 97. AD ‹ - › Developer communications (and tech) E-commerce Tips and tricks Search and you shall find Monday, October 18, 2010 Search is important. As many as 40-70% of shoppers navigate through your search at one point or another. Yet this is often ignored... Make sure to: - Fix misspellings (like Google) - Quick view a result (image expand etc) - Add to cart (express checkout) Roxy.com does this well
    98. 98. AD ‹ - › Developer communications (and tech) Search Engine Optimization www.roxy.com Monday, October 18, 2010 Roxy is a good example But why am I talking so much about page speed? experience, smooth user flows? Bottom line is... http://www.roxy.com/search/ index.jsp?
    99. 99. AD ‹ - › Developer communications (and tech) E-commerce “27% are less likely to buy from a retailer off-line if they had a bad experience online” Monday, October 18, 2010 “27% are less likely to buy from a retailer off-line if they had a bad experience online” Talking about speed...
    100. 100. AD ‹ - › Developer communications (and tech) E-commerce “40% of users would abandon a site if it takes more than 3 seconds to load” Monday, October 18, 2010 “40% of users would abandon a site if it takes more than 3 seconds to load” Imagine that impact on an e-commerce site.
    101. 101. AD ‹ - › Developer communications (and tech) E-commerce “0.1 sec slower pages dropped -1% from Amazons sales” Monday, October 18, 2010 “+100 ms slower pages = -1% in sales (Amazon)” Google tried the same..
    102. 102. AD ‹ - › Developer communications (and tech) E-commerce “0.5 sec slower pages dropped -20% from Google search traffic” Monday, October 18, 2010 “0.5 sec slower pages dropped -20% from Google search traffic” Well, that was some short statistics. Of course there is much more out there. But we can only cover so much, and this lecture ends here.
    103. 103. AD ‹ - › Developer communications (and tech) E-commerce Rounding it all off... Closing words Monday, October 18, 2010 e-commerce is an exiting field. It will continue to grow and grow. Looking at the e-commerce sites out there we have a lot of work ahead of us. Just make sure to measure everything, and more importantly hug your developer. That’s all for me, I will be sending out a Google Form about how you experienced the lecture.
    104. 104. AD ‹ - › Developer communications (and tech) Coffee? Coffee? End of e-commerce Monday, October 18, 2010
    105. 105. e-commerce Important things to know Author: Niklas Bivald Monday, October 18, 2010
    106. 106. AD ‹ - › Developer Communications (and tech + good to know stuff) Author: Niklas Bivald Monday, October 18, 2010

    ×