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.

    Unless You Dare to Battle [quote] + Updates!

    It is impossible to win the race unless you venture to run, impossible to win the victory unless you dare to battle.

    – Richard M DeVos (via 50 Impossible Quotes)

    —–

    I’ve had my hands pretty full recently and hope to get some more substantial posts out soon, but here’s a few quick updates:

    • YC Project:  I’ve been working on a cool Y Combinator related side project that’s almost done. I promise you guys will get a first crack at it when I release!
    • Ridejoy Funding: We announced some big news for Ridejoy: we raised $1.3M in seed funding from Freestyle Capital, SV Angel, Founder Collective and some other awesome people. Some coverage in AllThingsD, Techcrunch and Wall Street Journal.
    • How to woo a startup: Getting hired at a startup is tough. I know, I wrote a mega-post on it. That’s why I was super impressed with how Ridejoy’s new community manager applied (and got the gig). Learn more here.
    • Triathlon training: It’s going well. I struggled in the pool at first, and apparently gymnasts are notoriously bad at swimming, but I’m starting to figure it out. Doing a swim-bike brick tomorrow morning!

    13.1: Finishing My First Half Marathon

    Race: Brazen Racing Coyote Hills Half Marathon
    Distance: 13.1 Miles
    Date: Saturday, January 29th 2012
    Notes: First half marathon – very happy overall. Pushed through some blistering and tendonitis on the side of my right foot. Great views. 

    Last weekend I ran my first half marathon! Woot. Here’s how it went:

    Training

    After my 10k’s at Stanford and Eugene, I backed off a little bit, then started pushing my long runs again, getting to 9.2 miles before winter break. I did my best to stay in shape over the holidays and ran a bit in the chilly New England weather.

    I’ve basically had a rough pattern of doing a threshold/faster run of 2.5 to 3 miles during the week (usually on treadmill) and a longer slower run on the weekend (to train farther distances). In between that I do elliptical/bike workouts, interval training, body weight workouts and at least one heavy lifting day (deadlift, bench and squat/leg press/pullups)

    I was pleased to complete a 9.8 mile run the week after getting back to San Francisco and planned to do one more big run two weeks before the half. However, that run got cut short by some GI issues and I stopped at 8 miles.

    Pre-race troubleshooting

    That wasn’t so bad, except that then my foot started bothering me the next day. There was some soreness on the side of my right foot that got more painful as the day went on. By Sunday night (36 hours after the 8 miler) I was hurting pretty bad just walking around.

    The pain didn’t go away with ice and ibprofen. After some googling, I figured it was either a stress fracture (BAD!) or an inflamed tendon on the side of my foot. Since I didn’t want to take any chances, I went to see a podiatrist. At this point I figured I was not running the half.

    The diagnosis was – “It might be a stress fracture, but it’s more likely tendonitis. Tape your foot up, ice and see how you feel in a few days”. That weekend I tried to say off my feet. Early next week, I was starting to feel pretty good.

    Doc says it might be ok to do the race, knowing that I really want to, but first try running a few miles. So I did. Unfortunately the taped up foot and lack of running meant I started feeling hot spots just a mile in. I wasn’t feeling much pain so I bailed on the extra miles, deciding that I knew enough about my foot status to go for it.

    The race itself

    The race took place in a regional park in Fremont, CA (East Bay). It was a nice day, a little chilly, but by the time the race started, t-shirt and shorts were fine. The route was a big loop plus an out and back.

    I was a little nervous. Not only was my foot just getting better but I was worried about getting blisters early in the race. Additionally, I had felt a little sick in the days leading up to the race and didn’t really do of anything activity-wise. But as I’ve heard – better to go into a race under trained than over trained. And I was definitely the latter.

    MILES 1 – 6

    The race started off well. I tried to get into a good rhythm. They had aid stations set up nicely which was great, and my track selection “Swedish House Mafia 2010 Creamfield Extended Mix” really helped. What was NOT nice was that the Vibram Bikila’s did not do a good job protect me on some of the more gravely areas. Definitely took some pebbles to the foot. But was able to push through.

    The first loop went pretty well all things considered. But remember, I had never actually run more than 10 miles so today I was going 30% farther than my max distance. The first loop was a lot of me going - Ok, I feel pretty good now, but can I run what I just ran X more times???

    MILES 7 – 9

    One thought I kept trying to re-iterate was this: when you think you really can’t go anymore, you’ve got about half left in the tank. This is actually going to be the basis of a whole future blog post but anyway, the point is that I had to keep reminding myself this was something I could complete.

    It’s also true that the 2nd time around things go by a little bit faster. But around mile 8 I was starting to drag a little. I lived moment to moment for the next announcement from Runkeeper that I’d gone another half mile. At one point I was starting to run with my eyes closed, until I realized I was going to run off a cliff.

    MILES 10 – 12

    Around mile 10, I reached an aid station and and ate an energy gel which helped perk me up (though it left my hands pretty sticky). Also, I just read an article on energy gels and apparently half of the effect is just in perking up your brain. Interesting.

    Once I got to mile 11 I knew I was almost there. I started to pick up the pace.

    Mile 12 came around quick. I had been walking for bit every mile and pushed myself to run the last 2 miles

    The loop ends on a pretty brutal hill so that was pretty rough to keep jogging – and there’s also a crazy downhill section with a lot of rocks. I almost crashed sprinting to the finish but luckily I stayed on my feet. Didn’t even really feel out of breath at the end of the race like I usually do – but perhaps the longer distance just affected my body in a different way.

    Post-race

    After the race I just felt really drained. Not panting but just tired. I sat down for a while and felt a little better. Then I felt A LOT better when I saw what they had for snacks/post race food.

    Ice cream sandwiches from Ikes, Apple Pie with whipped cream and other amazing foods. I made myself sick with all of it – and it was glorious.

    Debrief

    I ran a 2:09.09 (chip time) 2:09:31 (gun time). The average pace was 9:52 but really I was around 9:30 for the first half, and got slower and slower in the 2nd half til I was probably running 10:30s or something.

    That put me at 197 for the race (out of 347 racers) and 18th out of 25 males ages 25-29. I’m below the median – but that means there’s more room to go up!

    Ultimately, I’m pretty happy with how it turned out. I had some massive blisters on my foot, my tendonitis was flaring up a little bit, but otherwise I made it out alive. My calves have been sore for the past few days but that’s to be accepted. My knee is doing great.

    Runkeeper data (it’s a little whack)

    Next Race

    My next race is going to be a little different: a trialthon! I’m doing the Stanford Treeathlon – a spring distance tri on Feb 25th 2012. I did my first swim workout a few days ago and I think it’s going to be a lot of fun!

    Any triathlon readers out there? Would love to hear training advice!