UX Design For Non-Designers: Notes from my first Skillshare class

Skillshare is a collaborative consumption startup that focuses on democratizing learning through a marketplace of independently taught classes. I recently attended my first class – UX Design for Non-Designers – it was taught by Cielo De la Paz, a senior designer at Hotwire.

I cleaned up the notes I took and figured I’d post them here! In general, I like to try out all these new sharing economy services and I think as her first class, Cielo did a pretty good job. It would have been nice to get to know the other folks in the class a bit better (there were like 20 of us jammed into a conference room in an SF tower) but time was limited so she did the best she could.

If this sounds interesting, you should check out her class here. She sent us her deck + tons of great resources for further learning.

UX Design for Non Designers

Definition / roles within UX

  1.  information architecture
  2.  interaction design
  3.  user research
  4.  visual design
  5.  copy
  6.  also now web dev

Companies often leave out user research + info architecture. Often focus is on interaction + visual

This order is typically the work flow. Don’t think of them as roles, but as steps. But make sure not to skip a step!

Note: This class is about implementing an idea – as big as a startup or as small as a profile page

Step 1 – Set a clear user goal

Very important! Know what you want your users to do!

  • “I want iPhone users to take a photo and share with their friends”
  • “I want to connect people interested in teaching to people interested in learning”

Step 2 – Audit competitors

check out sites similar to you

  • be more formal about it
  • at least 6 sites
  • screen capture, side by side
  • circle what you like, what you don’t like
  • notice patterns

ex: online education site – all seem to have video. This is what a user might be expecting

Step 3 – Create a Blueprint

Map out the flow – visio, axure, omnigraffle, illustratro, whiteboard

  • ex for instagram: splash screen -> camera -> add filters -? photo feed -? photo details
  • note – this is NOT what the app/technology is doing, it’s what the user is doing / experiencing
  • why is this so important? sometimes I haven’t mapped things out b/c of time and ended up being screwed way later in the process

She’s identified 4-ish basic types of pages/screens that do specific things

  1. Landing Page
    (home page / category page)
    this is a path to other sections of the site.
    hero image, copy, tells ppl to go elsewhere
  2. Gallery / List
    it’s either a grid or a list
    in between stage, not a final stage
  3. Detail
    the goal / end page
    ex: photo detail or article
  4. Forms
    inputting information – boxes, submit

Wireframe/prototyping – she uses axure, but if you search on Quora, there are a lot of options. Apparently axure is like learning photoshop – but not as simple. Balsamic is easier. Mindmiester is easier

If you search “50 free UI and Web Design wireframing kits, resources and source files” – smashing magazine resource

Step 4 – Use Design Principles

The secret sauce – design principles. She discussed this list with various colleagues and peers. Obviously not the final word.

1 – Don’t reinvent the wheel

  • most things work a certain way for a reason
  • look for pattern libraries
  • Pattern Tap – compile screenshots of a bunch of sites
  • Yahoo Pattern Library – dated from 2009 (says why and how to use something, not just screenshots)
  • mobile-patterns.com – just iPhone

2 – Know what is possible

  • you want to push your designs and push the limits
  • also, you don’t want to design something you can’t implement
  • jQuery – droppable (new feature/interaction she can use!)
  • Firefox – new things you can do with HTML 5
  • things you can do with CSS alone
  • you can tell the devs “hey i KNOW this is possible!”
  • go to techcrunch and click startups tab – startups are often pushing the envelope

3 – Design for the primary user

  • you have to pick one of several users
  • this is not referring logged in vs logged out
  • ex: Airbnb – two users, host and guest — optimized for guest
  • ex: Kickstarter – focus is on investors, not creators

4 – Less is more

  • the fewer choices, the better
  • Amazon is a/b testing – new site
  • no left nav, very clean
  • Side note: she is against focus groups – sees as bad way to get information from users
  • 5 – Create a visual hierarchy to organize your content

    • spotify – homepage is headline + hero image + download
    • Groupon – color coded – price stuff is blue, green is motivational element – there is a sense of order
    • Tripl – grouping, categories,

    6 – Make it feel effortless and efficient

    • Twitter – infinite scroll, don’t leave the screen
    • Google hotel finder – combined everything into one page – 3 colums – search form, listings, detail page
    • this is one example of “know the rules before you break them”

    7 – emotionally engage your users

    • “do jedi mind tricks on your users”
    • there is a book called “seductive interactions”
  • ex: LivingSocial – social proof, urgency
  • ex: Hotels.com – hotel detail pages has “has been booked 3 times in 24 hrs”
  • ex: feedback loops: klout, prius
  • ex: set completion – collection badges
  • Other resources for design principles

    Step 5 – Show 5 people

    • show five people and make them go through it
    • when you design it, hard to see straight
    • how to get users on a budget
  • Rinse and repeat
  • wireframe/design <–> get feedback
  • Step 6 – Refine your design

    • bells and whistles, colors
    • hire a web designer etc

    Sorry the last point is a little short but I think the meat of the post is in the early stages/steps. My biggest takeaway from this class was that UX design is not some mysterious ritual performed by the priests known as interaction designers, but is more akin to scientific research. Intuition and hunches matter, but there is also a great deal of structure, feedback and iteration to the process.

    Anyway, hope this was helpful! Skillshare is sweet.