What is a “user experience” and what are the steps to make your current UX kick ass?

What is a “user experience” and what are the steps to make you current UX/UI kick ass?A quick and dirty way to create kick ass UX/UI:UX is a broad term used to explain all aspects of a person’s experience with the web/mobile application including the interface, graphics, industrial design, physical/emotional interactions, and the manual. It is also referring to the application of user-centered design practices to generate cohesive, predictive and desirable designs based on holistic consideration of users’ experience. In most cases, User experience design fully encompasses traditional Human-Computer Interaction (HCI) design and extends it by addressing all aspects of a product or service as perceived by users. 

Ok so what the heck does all this even mean? Let me simplify things a bit to make it easier to understand. (Do you see the irony in this?)Essentially we make shit easy to use by collecting data (educated guessing) to predict and decide the user flow of the application for a specific task. Environment strangely enough comes into play also, users have different needs or time constraints with different devices, times of day or location, even mood plays an important role. If I am sitting at home doing nothing but surfing the web on my giant 32 inch monitor, I have nothing but time and I am an easy target so to speak. The problem with this user is nothing at all; in fact 99% of us are this user at some point in a day. Generally we don’t build for these users because they can be satisfied easily, mainly due to the fact they have time to dig around your website to use most of the features. When I am building a new experience for a client or with my own projects, I take the following steps to get me ready and focused for the challenges I will be facing.

1) Ask a ton of questions to the client (product managers, or CTO types usually). What should you ask? My typical top 5 a) What is your target demographic, this is usually number one.b) What is your current design flow, and at what point are people “bouncing “off. c) Do you have any new plans for a new business direction, focus or strategy that might complicate the current or new flow, if so this needs to be broken down to fit the new interaction design of the site.d) Are you planning a mobile/tablet strategy? Not in place yet? If so discuss if it’s worth building the App first.e) What are the time/technical/financial constraints?

2) Now that we know the top 5 directional questions let’s begin and start to reverse “engineer” the competition, what? Engineer? Yeah, find all the competitors and make a simple diagram (pen and paper or you can get fancy) show all the feature sets for each competitor product, this will allow you to see the differences between all your competitors at one time. Also take screen shots of any interesting or cool flows or design from competitors’ sites. Turn all this into something a little more tangible by making a flow map for each site, nothing fancy just quick and dirty. To get a solid understanding of the users entry points, enter every site you visit or love from multiple points of entry, note the experience you had from 1-5 and document how you might do things differently and why. Don’t get too crazy with the entry experience, remember less is more sometimes. Once you have figured out what everyone is doing and why they do things the way they do, you’re ready to put foot to ass.(Flow map is major point of entry to the site, all the way to “call to action”)

3) So let’s review real quick, you talked over the site/app requirements with team members, you know all the demographic, direction and expectations at this point. You know the completion better then they know themselves(this is a vital component, any good solder will tell to know your enemy better then you friends) make sure your ammo is full before you go any further, if you’re having problems finding main competitors learn to use Google better and/or ask the team members. No such thing as stupid questions, just stupid answers…or people, or both… Let’s move on with the UX boot camp.

4) I want you to review the current site/app you’re working on, enter the site every way possible note your experience 1-5 and what needs to change and why. Also make sure you sign-up if needed and/or follow the CTA flow, see where it’s getting difficult, boring (lots of words) or places you think users will drop off. Make a comparison chart, highlight your site, and put it up against all the other sites (competition) how are things looking? Can you see gaps in the sites current flow when comparing it? Drop offs? Things you’re doing better or worse at? Now you can see the light (Aha! moment), let’s start building our new and improved site.

5)  My first steps are to get a standard HB pencil, some blank, white computer paper and some small post it notes and start drawing flows, Crazy hu, you thought about using tools really technical I bet. For now it’s best not to get caught up with time constraints of technology, besides your design will change minute to minute this is major brainstorming we’re doing here people (PS, if you can’t draw don’t worry you’re not presenting this to clients or users, it’s purely for internal usage, it’s just faster and allows you to loosen up and get dirty). Don’t be afraid to think outside the box and challenge yourself or other rules; this is what makes us UX designers “interesting” people. Use the post-it notes to perfect your annotations for user and site interactions page by page, the post it notes are great because you can move them around without re-writing or ruining your mock-ups. Now that you have something prototyped I am sure you can see the funnel that this little exercise has taken you down, you’re on your way to your first web user experience design; take a breath and give yourself a high five (don’t let anyone see you they will think you’re crazy, trust me..

6) Now, the flow is in good shape and it makes sense from multiple entry points, CTA’s and pattern frameworks. I want you to count how many button clicks a user would take to get them to buy, sign up or do the thing your site wants users to do (CTA), 3-4 clicks is average, more is fine as long as the user feels progress and accomplishment, don’t leave them hanging. Do not make this process long, try to eliminate as much sign up or user text fields as possible, find a good integration tool if needed (FB connect or something), 3rd party sign up/in tools are awesome, it unlocks so much social power for your site and its dead easy to use, but this might not be an option for you if you need SSL options; just do your research before you decide.
Let’s create real mid- high fidelity mock-ups. Notice how we just skipped wire framing, we basically already did this with the drawing and annotations, and why do it again? Just to show people you know how to make boxes and layouts on a fancy web tool? Skip this please, try to never make computer based wireframes this is old and cumbersome method and needs to be abolished. If you disagree that is fine, but time is money; remember that when you’re a scrappy start up with only 200K in working capital.

7) Choose your favorite graphics editor, mine is Fireworks and Photoshop, they have wicked powers to export/create HTML, CSS…and can make vector art (fireworks) if you have no experience with these tools grab a coffee and please visit http://tv.adobe.com/ I have spent hours of my life here. Make sure to use proper naming when creating layers; it will make your life easier down the road. Also lets use our own common sense and try to build our prototype graphics in the right dimensions for the web or application you building, please don’t build small graphics, building bigger and scaling down is fine.  Don’t get caught up on heavy eye candy graphics just yet, we don’t want the user to get mixed up and judge the comps based on UI design, make note of this early to the user . I am not going to tell you how to set up your page in Photoshop or Fireworks; everyone has their own comfortable format for guide lines and so on. Turn on a few of the “stick to grid”, edge or pixel or what have you, also get friendly with layer comps in Photoshop and in Fireworks, please Google “layer comps” to really understand this tool, but in a nut shell this cool feature will allow you to turn off certain layers and turn on certain layers as a group to mimic different webpages the user is on, this is fast for seeing how your flows are developing, without wasting time turning a million different eye balls off and on… When saving your work remember to save for web and devices, or another good way is PNG with transparent BG. Now let’s build click-able comps to show our clients and maybe some test subjects for user feedback.

8)      If you’re an HTML, CSS guru go ahead and make these comps clickable in 5 times the amount of time it will take me. The time you’re done coding the comps I will have built a full interactive prototype, tested it out and started making my revisions.(trust me I have had races with some fast coders). As long as the tools you choose to create prototypes with works and it simulates the sites navigation the way you planed it, use whatever method you want. I like to use Keynote (power point for windows) for interactive PDF web prototypes, and Proto.io for mobile and tablet, also check out keynotopia, the web is full of prototyping tools so don’t worry. Now that our done building for now, the client can play with the interactive comps on his/her computer, IPhone or tablet and really get a feel for what is coming, at this point we can see life in our design, and see where people will get stuck or drop off, this gives us the chance to revise our flow.

9)      Once you have built a few iterations of the site or app, now do a fun A/B/C test on a few people that are the current demographic. Ask friends, family, co-workers not in design or programing to test out your prototype, find the ones who don’t use tech much as I find they make the best test subjects. My philosophy is if a 5 year old can use your site, anyone can. When testing the site, don’t set the users up with queued navigation, let them figure things out, take notes and only assist or give a caveat when needed. Now that we tested the shit out of the flows, let’s go back to the drawing board and look through all the notes you took while the users tested your site. Now we can start looking at ways to improve your existing pattern framework, find all the kinks you can before it is shipped of for development, this will save time, money and all of the above.

10)   Test the flows again on some innocent bystanders, I would at times ask people on the bus, they are usually willing participants; just don’t ask in the morning. You should have a very refined product at this point, it should look good and feel good with no dead ends, sticky spots or confusing UI design (icons) be clear with all design elements, do not assume anything. Some simple things to remember1) Icons are cool please don’t beat them to death2) Try not to copy design trends (pinterest) they don’t last and you don’t stand out3) Colours are nice but let’s not build a rainbow website, build a nice colour wheel4) Header nav bars are still ok, but pull down menus are not, period…5) Font size and styles are fun but let’s keep things consistent 6) Contact info is a must on a site, please don’t just have a submit question form7) Footer styling is cool but serves no purpose; more than half your viewers will never see it.8) Position your search bar and social sharing options above the fold and not in footer.9) Make sure all your important CTA content is above the fold of majority of web browsers.10) Test it, re-build it, test it again, don’t fall in love with your work and learn to take criticism even when you think you know everything. 

Save all your designs and graphics in the right format (PNG, GIF, JPG) and get them ready in a folder with some named subfolders to separate graphical elements like icons and logos, Complex headers or footers…etc, learn to be organized with your work. Place all the web page graphics in different folders, remember you don’t need to repeat or save multiple graphics, your developer will be re-using them, but make sure you have design maps for each page with annotations, and text or copy, with Font size, font type, and colour. If you’re a CSS or HTLM guy, you can get the majority of the front end stuff completed and had over your files to the developers. 

And remember how lucky we are to actually get paid for doing this stuff....ride the bubble...