A Crash course in UX

Making the jump

Making the transition from a pixel pusher to code wielding full stack designer can be one of the most liberating things a designer can do. It gives you a better idea of the implications from your design decisions and more responsibilities for the final look of the product, but best of all it makes teamwork much easier (changing the radius of corners is rarely much of a priority of a back-end developer when they’ve got databases, conflicts and auth problems to think about) and can make for a much higher job satisfaction.

This is one of the best decisions i’ve ever made and highly recommend it to anyone considering taking the jump. If you are considering taking the jump and are a little confused as to where to start and what to start with, having a read of the toolkit should give you a good one. It contains what I’ve developed as my process, in order, the tools I’ve used and a load of fantastic resources at the bottom. Enjoy.


The Killer toolkit

User Interviews

User interviews are one of the most valuable and necessary things you can do to better understand your customer, I'm sorry to say this is something I didn't do enough of. All I would advise on this is do it with two people (one to question and engage the other to take notes) or a Dictaphone. Try not to assume anything, the most valuable insight often come from unexpected places, so instead of asking “how often do you use the internet” you could try “do you have access to the internet” its a more unobtrusive question and can easily lead to follow up questions. Doing user interviews is less about listening to your users, and more about getting to know your customers, the better you can understand what your users do, rather than what they say, the more suited your product can become.

Research and Inspiration

One of the best discoveries I made was a chrome add-on called Panda. It sources the most popular shots from Dribbble and latest news from Layervault Designer News. Great if you want a little eye candy and for keeping up to date with the latest methods, patterns and opinions. But when looking for UI patterns that are well thought out and recognisable, wether it be a navigation menu or a share button, dribbble is your best mate.

Whiteboard

Gather the troops around the whiteboard with a clear objective and get on designing. Iteration comes far quicker and more naturally with a team all on the same page. The outcomes aren't supposed to be pieces of art, but more simple shapes that vaguely represent the pages functions. The secret is, if your teammates can draw a square, circle and a triangle they can be part of the design process.

Wireframe

Wireframes can be a deliverable, but can also provide some basis for usability testing. I use Balsamiq mockups, its a very straightforward program. Drag and drop components from the UI library onto the canvas and before you know it you’ll have something that looks vaguely like your end project. From there you can add ‘hotspots’ that allow you to link screens together to make a semi-functional mockup. They can then be shared and evaluated to find any major flaws before production. The trick to wireframes is make them quick, scrappy but exhaustive, there is no point in forgoing a feature, even if its an existing one, to perfect the radius of a corner.

Sketch (if visual design is necessary)

For those times when you need to get a better idea of the visual design of a page, design an icon or do a little illustration, sketch has your back in a lightweight and easy-to-use pro package. Photoshop and illustrator are very powerful tools and have set the standard for pro programs, but they have also been around since the 90’s. A lot has changed in the way we work since the 90’s and it often feels you are hacking them to work the way you want to do. What sketch lacks in seniority it makes up for in efficiency, in the words of Meng to; “There is no other tool out there that is so intrinsically connected to the way designers work today.”. With the latest release sketch 3, it brings with it fantastic features for exporting, responsive design and component styles. It is well worth taking a look at and using their trial, maybe this way your hair will stay intact.

Sublime Text 3

There is a solid reason they call it ‘sublime’ text instead of ‘alright’ text or ‘pretty nice’ text. It really is sublime to use; tabs, themes, extensions, language colouring, all available through the app. Its not open source, but its loved by the open source community. I really enjoyed using it and have even started to use it for writing reports. I highly recommend it and the best part of all, its free to use!

Learn it

Code school, code school, code school. If you hadn’t already guessed I’m a massive fan of code school. Code school provides video tutorials to cover the basics, exercises to build and re-iterate your skills and consistent metaphors, gamification and catchy theme tunes to keep you interested. “CSS its such a mess sometimes you know. Lets all go riding in the snow. Crrrosss-Countrrry”. It can seem a little cheesy and patronising at times but put the video speed up to 1.5x, grit your teeth and you’ll be staring at the screen cross-eyed, trying to figure out boolean again in no time

Google Chrome dev tools **Ignore if wearing smarty pants**

this one you already have if your using chrome, all you have to do is right click and at the bottom of the menu you’ll see ‘Inspect element’ click it and your in. When you do, you’ll see the rendered HTML on the left and CSS on the right. This is fantastic for bug squashing, experimenting and tweaking. Say your trying to find out why your link isn't styling as a button, you can smash around like a bull in a china shop fixing it, without messing up your source code. Cool beans. You can also use the emulation feature in the console to see what it looks and works like on an iPhone, iPad, Nexus, Blackberry, etc. In short, this is your sandbox.

Github

Github is a stellar website, its based on the GIT version control system. It allows for powerful collaboration for private and open source projects. With github in your toolbox you can start to be accountable for the code you write, have a backup of all your previous versions if something goes Pete Tong and best of all you have access to the open source community in a big way. You’ll be surprised by how many companies have a github and use it for publishing open source projects. Its a lot of fun and can give you a lot of insight into how a company operates and how to improve your code practice.

Google Analytics

I would love to tell you google analytics is as straightforward or as self-explanatory as youtube or google maps or google mail, but its not. What GA (google analytics) lacks in ease of setup, use or understanding, it makes up in power, 10x. You can run A/B tests, it has a heat mapping tool, you can track what social networks visitors to your site use! GA is a grumpy hairy ugly beast that constantly wants to be told its the prettiest beast in the whole wide world. It will spit at you, make you pull your hair out and at points question whether its worth the effort. It is. Stick with it. All I can say is read a book, read two! Get the developer excited about it (somehow) and try and make it relevant for the whole team. The better you know it, the better it will become.

Once you’ve read a book, check this out this setup checklist.

Then checkout the Kissmetrics blog, they have tonnes of stuff on GA. All you have to do is search it.


Extra Goodies:

http://uxmastery.com

http://uxmastery.com/

http://blog.teamtreehouse.com/

http://alistapart.com/

http://stackoverflow.com/

Dylan Bahnan