Kyle Neath

Designer at Github

KSS

https://github.com/kneath/kss Methodology for writing maintainable, documented CSS within a team. Machine parseable documentation. Create living documentation. CSS is complicated. It's not object oriented. It's not hierarchical. Documentation is the key to shared understanding. Works with OOCSS, SMACSS, SASS, LESS.

Task

Design UI to bundle products - create, purchase, download, managage.

Process

Examine and analyze existing solution. + comments. Cut it to pieces and work on them separately - ignore the rest. Merge them later.

Write some definite user tasks in interests:

  • How do I download all videos in iPad format.
  • How do I recognize new things, that I haven't seen yet.
  • How can I purchase and download whole bundle to specific purpose - eg. to iPad to watch on plane?
  • I want to download all purchased courses to iPad.
  • I want to view details of one course and download specific attachments, view discussion.

    Think as user:

  • does he already have account?

  • Does he use services to signup (Google, Facebook)?

  • What is the mechanism to putting things together? What is difference between cart and bundle?

    Advices

  • Do not make more similar functionalities - collect vs. cart.

  • Try to switch mode of a page - shopping/creating bundles to download.

  • Have some actions available to everyone - show auth tools even to not authorized users - show them what they could be doing if signup. (dim fork button on github) (then show: you need to signup to do this.)

  • Create collections based on similar topics (Ruby, Web development, Testing) and also on other similar things (Hot new things, Introduction to all programming languages, Play by Play, ...)

  • Combine links and buttons.

  • When adding new functionality, use existing elements on page.

  • Color meaningful. Associate color with actions across whole website.

  • Show people how and why they can use new features to their benefit. (eg. via Tips)

  • Speak natural language with people

  • Enable feedback from users (// Tools)

  • Create automatic generated bundles as well as custom hand-picked

  • Enable sharing your collections, picks, reviews, ratings with others

  • Enable users to "collect" things - use passion for collecting.

  • Use "no-data-text" as a help to create, when user already create one item, replace help with actual items.

    Tools

    Use some quick sketching and prototyping tool

    Make a screenshot of current page and sketch ideas right to it.

    Photoshop

    Screen capture webpage, throw it to photoshop and divide to layers. Get general idea. //TODO: app for that? webpage to photoshop layers? Forget for time your super design skills and first solve the problem. Take existing buttons from webpages (edit text in inspector) GuideGuide Learn shortcuts

  • copy and move (shift+alt+arrows) - expanding buttons

  • copy merged (ctrl+shift+alt+c) Use one color as -to-do- -polish-later- color

    Others

    Collect things on desktop and organize later.