The best way to remember to build for our users is to create personas for them.

What is a persona?

• Personas are archetypal users of a website/service that represent the needs of larger groups of users, in terms of their goals and personal characteristics
• Personas identify the user motivations, expectations and goals responsible for driving their behaviour
• Although personas are fictitious, they are based on knowledge of real users
• Personas are not designed to incorporate the entire user base, but are there to enable us to understand and focus on our key users

Making personas effective

The most effective personas come from face to face, phone and survey research with your current or prospective users. They’re the real life people who can talk to you about their wants, needs and challenges.

If you don’t have the ability to do that, it doesn’t mean you give up! You can still develop a persona of the type of person you want to use your service and then attempt to validate that with surveys to your base, it’s not ideal but it is better than none.

Once you’ve created your personas you need to use them! So often companies do some research, make some posters and then go straight back to building for themselves. It’s important to live and breathe your personas. Every time you design a new product or interaction, write an email or change your site you should be considering how your personas will react and whether it addresses their needs.

It’s also important to update your personas, the technology world moves super fast, within a year your users could go from using Nokia phones and a laptop to spending all their time on their iPad – this can have a big impact on your products.

Creating personas

At Rated People we went through the following process to create tradesmen and homeowner personas in early 2011. We’re about to undertake a refresh on the tradesmen personas to identify any changes in their behaviour, needs and characteristics and to identify new personas – particularly around subcontractors who are a new group we’re looking to help.

1. Define your categories

Based on what you think you know about your users come up with a few categories you feel they fall into.

For Rated People we have:

• sole tradesmen
• tradesmen who work with other tradesmen
• administrators who buy jobs for tradesmen
• tradesmen who run companies
• subcontractors
• apprentices

Of these, decide who you really want to focus your product on (good rule of thumb is to build for no more than 5 personas – and that’s a lot!)

2. Recruit

Survey your base asking questions that will help you categorise your users into your groups – but don’t be restrictive, allow them to choose ‘other’ and provide their own answers in case you’ve missed something.

The survey shouldn’t be too long and it’s useful to ask all the demographic questions such as:

• age
• time in trade
• how they work (subcontractor, apprentice, sole tradesman etc.)
• where they get their work from (online lead gen sites, word of mouth etc.)
• what trade they classify themselves as
• what size/budget jobs they do and how many

It’s also good to ask if they’re willing for you to contact them further – and ask the best number to contact them on.

Refine your categories from the results of the survey and identify roughly what % of your base will fit into each of those categories. You’ll want to recruit interviewees in those %’s. EG: if 30% of your base are sole tradesmen, 50% are tradesmen who hire subcontractors, 10% are apprentices and 10% are subcontractors and you are planning to have 15 interviewees, then you’ll want to speak to 5 sole tradesmen, 8 who hire subcontractors, 2 apprentices and 2 subcontractors.

Then start emailing / phoning users to set up times to go and speak to them. It helps if you can offer them some cash as a thank you!

3. Research

Put together a research plan that outlines what you want to achieve from the interview, and note down some questions you might ask. It’s not a formal document that you want to fill out – more a guide to remind you of what to talk about during the interview. It’s good to have a few points to tell the interviewee about why you’re doing this research and how it helps improve your business.

Research is contextual – ideally it should take place where they use your service. You (the interviewer) and a colleague (research assistant who also takes notes) visit the user for a structured but informal chat. Interviews usually last 2-3 hours. During this time you’ll lead discussions based on your questions, take some photos of the user in action and observe how they use the site/service.

4. Analysis

Once all the interviews are done then its analysis time.

The easiest way to do this is:

a. create snippets of information
Take your research results and extract small statements onto labels, ensure each label also states which category the user came from and who the user is in case you need to refer back to the research notes.

b. stick those labels onto post its
It’s best to get the team involved in this, it’s the boring part but it really pays off!

c. take a category and lay all the postits from that category onto a table (or tables)

d. have the team group those post it’s into trends
You’ll quickly see recurring themes across the interviewee’s results.

e. build a skeleton persona
This is a set of bullet points about that category, based on the themes you’ve seen.

Repeat this for all categories.

Example of a persona

5. Persona Infographics

The final step in persona creation is to turn those skeletons into infographics to help you remember at a glance who they are.

Using Personas

Your personas are now ready to use in your business, from your analysis you’ll generally end up with a list of common needs and product ideas to address them; you’ll also have identified common issues with your site that you can improve.

You’ve now got some archetypal users to base your future decisions around, helping you ensure you’re building for your users and not yourself.

During the design phase, we determine if the page’s interactions are appropriate for mobile, and if they are we’ll build a responsive page. The benefit of this is we have a single page to maintain, we’re relatively future proof to new devices being released and at worst we have only to add / update a media query in the CSS to make the page work on new devices.

We’ve created a media query boilerplate for targetting our supported devices with responsive design.

For current projects we have targeted:

• Desktops
• iPad
• iPhone 3/4
• Blackberry (latest OS)
• Androids (Froyo/Gingerbread)

Media queries are generally split into screen resolution and pixel ratio.

The only instance where we’ve had to combine both is where we were having issues with the fact the HTC Desire and iPad shared the same 800px resolution.
This is annotated within the CSS files.

The queries we used:

• min-device-width
• max-device-width
• orientation:portrait
• orientation:landscape
• -webkit-device-pixel-ratio

Screen resolution

Here are the basic queries:

• Desktop = (min-device-width: 801px) //Changed from 800 to 801 to avoid high res mobiles
• Tablet (P&L) = (min-device-width: 481px) and (max-device-width: 799px)
• Mobile (P&L) = (max-device-width: 480px)
• Mobile (Low res) = (max-device-width : 240px)

Look at the code below to see where we’ve expanded on these to cater to the different devices.

What code would you place within the screen resolution queries?

• Widths (Setting width to auto resolves most issues)
• Although % and auto are recommended for widths, in some circumstances such as form fields I would recommend using pixels.
• Any structural changes; hiding/displaying divs, removing floats, etc.

Pixel ratio

Here are the basic queries:

• Mobile/Tablet (low) = (-webkit-device-pixel-ratio:.75)
• Mobile/Tablet (mid) = (-webkit-device-pixel-ratio:1)
• Mobile/Tablet (high) = (-webkit-device-pixel-ratio:1.5)
• Mobile/Tablet (retina) (-webkit-device-pixel-ratio:2)

Look at the code below to see where we’ve expanded on these to cater to the different devices.

What code would you place within the pixel ratio queries?

Here we are dealing with different pixel ratios so this mostly effects text (that use ems) and images.

• Images – Display different versions based on pixel ration (Retina display devices are able to use SVG – vector based images).
• Text – Some text needs attention, often in landscape view.

Get the code:

<!--This tells any ie browser older or equal to 8 to ignore the global
  queries CSS filr.
Without this ie7/8 would run all of the queries - rendering it like a mobile!
Clever...-->
<link rel="stylesheet" href="<?php echo STYLES; ?>global.css">
<!--[if !(lte IE 8)]><!-->
<link rel="stylesheet" href="<?php echo STYLES; ?>global-queries.css">
<![endif]-->

The code below contains classes within it to colour the body of the device.
These can be uncommented for testing purposes but should be removed before release.

Paste the code at the end of your CSS, then add in your mobile/tablet specific styles in the relevant sections

We would usually add width:auto;

/* ------------------------------------------------

MEDIA QUERIES : Created by Kymme Blackwell

Screen resolutions

 Desktop 		 =	(min-device-width: 801px)
 					//Changed from 800 to 801 to avoid
                                          the Samsung Galaxy II
 Tablet (P)		 =	(min-device-width: 481px) and
                                (max-device-width: 799px) and
                                (orientation:portrait)
 Tablet/Mobile (L)	 =	(min-device-width: 481px) and
                                (max-device-width: 799px) and
                                (orientation:landscape) and
                                (-webkit-device-pixel-ratio:1.5)
 					//Targets hi resolution phones
                                          (avoids iPad)
 Mobile (P&L)		 =	(max-device-width: 480px)
 Mobile (P)		 =	(max-device-width: 480px) and
                                (orientation:portrait)
 Mobile (L)		 =	(max-device-width: 480px) and
                                (orientation:landscape)
 Mobile (Low res)	 =	(max-device-width : 240px)

Pixel ratios	

 Mobile/Tablet (low)	 =	(-webkit-device-pixel-ratio:.75)
 Mobile/Tablet (mid)	 =	(-webkit-device-pixel-ratio:1)
 Mobile (mid)		 =	(-webkit-device-pixel-ratio:1) and
                                (orientation:landscape) and
                                (max-device-width: 480px)
 					//Targets hi resolution phones
                                          (avoids iPad)
 Mobile/Tablet (high)	 =	(-webkit-device-pixel-ratio:1.5)
 Mobile/Tablet (high/L)	 =	(-webkit-device-pixel-ratio:1.5) and
                                (orientation:landscape)
 Mobile/Tablet (retina)	 =	(-webkit-device-pixel-ratio:2)
 Mobile/Tablet (retina/L) =	(-webkit-device-pixel-ratio:2) and
                                (orientation:landscape)

------------------------------------------------ */

/* ------------------------------------------------
	SCREEN RESOLUTION media queries
------------------------------------------------- */

/* Big screen - (Desktop) */
	@media only screen and (min-device-width: 801px) {
     /* body { border-top:10px solid #ccffcc;} /*pale green */
}

/* Tablet PC - (iPad portrait) */
	@media only screen and (min-device-width: 481px)
                           and (max-device-width: 799px)
                           and (orientation:portrait) {
     /*  body { border-bottom:10px solid #cccccc;} light grey */
}	

/* Do not target Tablet PC - (Samsung Galaxy II landscape) */
	@media only screen and (min-device-width: 481px)
                           and (max-device-width: 799px)
                           and (orientation:landscape)
                           and (-webkit-device-pixel-ratio:1.5) {
	/* body { border-top:10px solid #ff0000;} red */
}	

/* Mobile screen - (iPad/iPhone 3/HTC Desire/Samsung Galaxy II portrait) */
	@media only screen and (max-device-width: 480px) {
	/* body { width:auto; border-top:10px solid #cc9999;} dirty pink */
}		

/* Mobile screen Portrait - (iPad/iPhone 3/HTC Desire/Samsung Galaxy II portrait) */
	@media only screen and (max-device-width: 480px)
                           and (orientation:portrait) {
	/* body { border-bottom:10px solid #ffff33;} yellow */	
}

/* Mobile screen Landscape - (iPad/iPhone 3/HTC Desire/Samsung Galaxy II portrait) */
	@media only screen and (max-device-width: 480px)
                           and (orientation:landscape) {
	/* body { border-bottom:10px solid #99ff33;} bright green */
}

/* Mobile screen - HTC Desire  */
	@media only screen and (max-device-width : 240px)  {
	/*  body { border-bottom:solid 10px #ffffcc;} pale yellow */		
}

/* ------------------------------------------------
	PIXEL RATIO media queries
------------------------------------------------- */

/* Low density */
	@media only screen and (-webkit-device-pixel-ratio:.75) {
	/*  body { background:#a3d8f4;} pale blue */
}

/* Mid density - (iPad/iPhone 3) */	
	@media only screen and (-webkit-device-pixel-ratio:1) {
	/*  body { background:#9900cc;} purple */
}

/* Do not target Tablet PC - Mid density - Landscape - (iPhone 3) */
	@media only screen and (-webkit-device-pixel-ratio:1)
                           and (orientation:landscape)
                           and (max-device-width: 480px) {
	/*  body { background:#99cccc;} turquiose */	
}

/* High density - (HTC Desire/Samsung Galaxy II) */
	@media only screen and (-webkit-device-pixel-ratio:1.5) {
	/*  body { background:#ff3399;} pink */	
}

/* High density - Landscape - (HTC Desire/Samsung Galaxy II) */
	@media only screen and (-webkit-device-pixel-ratio:1.5)
                           and (orientation:landscape) {
	/*  body { background:#000000;} black */			
}

/* Retina display - (iPhone 4) */
	@media only screen and (-webkit-device-pixel-ratio:2) {
	/*  body { background:#fdc35e;} light orange */
}

/* Retina display - Landscape - (iPhone 4) */
	@media only screen and (-webkit-device-pixel-ratio:2)
                           and (orientation:landscape) {
	/*  body { background:#666;} dark grey */		
}

Think about it, you visit a website hoping to buy a book. You’ve found the book, it’s the right price, you’ve made the decision to buy…
but before you can give them your hard earned cash the site wants you to create an account.

You sigh, but the book is really worth it so you enter your name, email and address and click next expecting to now be allowed to pay.
Sorry, no, they want you to choose a username and password…

You don’t think you’re ever coming back to this site but you really want this book so you fill them in and click next, thinking right NOW they have to be ready to take my money.
You’re presented with a screen that says “please validate your email to create your account”

Turns out that until you’re validated they won’t let you pay.
How are you feeling now?

Chances are that by this point you’ll give up, go find the book on Amazon and maybe pay a little bit more for it – but you’ll be in and out of their site within minutes.

There is nothing more annoying that having to make decisions and provide information that you think is irrelevant. It’s even worse when you get no reward for the effort.

So for us (and anyone building a webapp) the trick is to make things so simple and so painless that as a company we get what we want without risk of annoying the customer.

With that in mind, we’re revamping our Homeowners Experience.

Ratings – A case study in providing a simple, intuitive experience.

Rated People are all about the ratings, and yet, the current process for a Homeowner to post a rating is long and complex.

For a positive rating it’s 5 steps, for a negative it’s even more – and if you enter anything that’s not allowed like a phone number or email address – we send your rating off to the Contact Centre to be checked – but you have no idea this is happening! The design of the email and pages are also quite complex, a lot of unnecessary text, stars start at 5 rather than 0 and there’s also 8 different sets of stars on the page!

Posting a rating offers no reward to Homeowners other than the knowledge they’ve helped future Homeowners make an informed choice – that’s not enough to get most people through a complex process.

So we’ve simplified things. The process now is

1. You get an email asking you to choose a tradesman – that email lists the tradesmen who bought your lead
2. You click on the tradesmen you want to rate and you’re shown a screen asking you to choose your stars for quality, value and reliability (they start at 0 and they’re the only stars you’ll see). The tradesmen you chose is defaulted to selected, but you can easily change it if you need to
3. Enter a comment, click submit and you’re done
   a. If it’s a positive rating you can then ‘like’ your tradesman on Facebook and you get a nice confirmation page with some links to our blogs and social networks so you can read the latest on home improvement.
   b. If it’s a negative rating we don’t show any ‘fun’ stuff, instead we thank the Homeowner and ask them to contact us with any further feedback
   
4. If you happen to have entered something in the comments field that we don’t allow (email, phone number, expletive) we tell you then and there with an error message on the screen asking you to change your comment

Take a look:

Why are we redirecting users to a mobile specific page when we’ve been emphasising responsive design?

Well it’s all about understanding the tools at your disposal and using the right tool for the job!

Our job submission form is an extremely critical piece of our site. It’s the first contact a homeowner has with us and it’s the main source of the jobs that we’ll subsequently sell tradesmen. Therefore it’s worth taking the time to build an interface that is 100% suitable to the device that the user is viewing it on. Last month around 11% of our visitors were on a mobile device, the iPhone OS is now our second biggest OS after Windows!

Task based mobile websites have the following features:

- small amounts of text – short but to the point
- well spaced, easy to click on links & buttons (for those fat fingers we all have!)
- minimal graphics

Mobile based forms will:

- list categories on the screen as links rather than within a drop down list
- put help text below the fields
- display the most appropriate keyboard for your field – eg: a phone number field will have a number keypad, an email field will show the ‘@’ keypad

As Luke Wroblewski* says “reduction is the best layout approach available to you on mobile”. Working with mobile forces you to look really hard at your site and to identify which elements are essential to the user, then to design for them and them alone. Everything we’ve learnt about technical and interaction design for mobile devices will also influence how we design tablet, laptop and desktop based forms in the future.

*Luke Wroblewski is recognised as one of the leaders in usable form & mobile web design.

Websites today deal with provisioning for mobile in several ways:

1. An entirely separate mobile site, commonly done as http://m.mywebsite.com. You redirect those on mobile devices to the different sub-domain.
2. Mobile applications on all common platforms i.e. android, blackberry, iphone
3. A different CSS file which is specific to mobile
4. A page structure and design which flexes with browser size. Responsive design.

#3 and #4 have the following benefits:

• No nasty redirects, which are a little unpredictable on which devices they redirect
• Only one page to build and maintain, which just appears differently on different devices
• Users don’t need to learn how to use two different sites
• Responsive design in particular is also semi future proof for future mobile devices

Responsive design works best on pages that have little interaction and are composed primarily of informative content. Images, navigation and text can all be set up to automatically move as the display size changes.

For our Homeowners we’re designing a single page that contains all their job and tradesmen information. It’s a page that just begs to be built with a responsive design as it’s a set of distinct, groupable content that shows boxes of content either side by side or above/below each other – depending on the width of the device you’re viewing it on.

You can see an example of responsive design at The Expressive Web

One of the most crucial things to remember, which is also the thing people often forget, is that we are not our users. Even if you think you’re building something for ‘people just like me’ it’s important to remember that you’re not. We come to our product – be it a website, article, form or something else – with an infinite knowledge of what we’re trying to build, which by its very nature prejudices our view.

So how do we avoid building for ourselves and instead build for our users? 

The first step is to understand who our users are. Personas are an essential starting point for any project. You can see the tradesmen personas on the office walls, and they go some way to giving us a better idea of who our users are. It’s also important to spend a lot of time interacting with your users as much as possible. Be it analytics data, face to face, call listening, feedback or questionnaires.

Testing something as subjective as an interaction design

If it’s an article or a picture you can look at how many people read and share it, if it’s a submission form you can AB test variations and measure which has the highest conversions; but if it’s a product or website feature, nothing beats usability testing.

There are a plethora of tools you can use to test your website; everything from guerrilla testing (where you take a laptop out on the street and grab random strangers), through to remote online testing, and at the high end, eye tracking and interaction studies in a lab.

How we tested the new tradesmen logged in screens

1. We started by understanding who our tradesmen were and building a list of potential testers from our user base that personified the ‘average’ tradesman member.
2. We determined our information architecture (IA) – or navigation structure.  The most logical arrangement of our features into a navigation.
3. We tested our IA using a tool called Treejack. This allows your users to browse your navigation structure, and based on how hard it is for them to find things, iterate towards a better navigation.
4. Next we sketched the screens and turned them into a simple black and white wireframe in Visio. Once we’re reasonably happy with that we build a clickable prototype in a tool called Axure.
5. We use the prototype to set some simple tasks for tradesmen to complete – like finding and buying a lead. We recruited several tradesmen to come in and try and complete the tasks using the prototype. By watching through remote cameras we can see how they go about completing the tasks. It’s pretty surprising how a design can fail miserably when a tradesmen uses it!
6. Redesign the prototype and repeat.

You can repeat the redesigning of a prototype and testing as often as time and money will allow, until you’re happy with the usability. At the end of usability testing you come away with a strong understanding of what works and what doesn’t work for your users. Success should follow!

The concept of a minimum viable product is pretty simple. Launch the very simplest feature set you can get away with. This has several benefits:

• Your time to market is as short as possible.
• The amount of time before your users give you feedback is as short as possible.
• You HAVE to focus ruthlessly on exactly what you want to offer users. You HAVE to prioritise. You have to ask yourself, what exactly does the business offer our users?
• You only add non-critical features when you have a working version in production with users giving you feedback. What you think might be next most important often isn’t. And your users only know the answer when they’re using the MVP.
• If your product is useless, you waste less time on it, and can throw it away and start something else.

The Rated People mobile site was deliberately developed to be MVP. It pretty much just allows tradesmen to buy jobs and view contact details. That’s it. Boring huh? But it’s what our tradesmen do every day. And it’s what they love about us! So what do they think of it?

“Simple and easy to use can’t think of any ways to improve it and is really happy. Likes the fact it is simple and can’t fault it”

“alot handier for him to use on the go … One of the beauties of the mobile site is its simplicity, so he understands if his suggestions may not fit into the mobile website overall. This TP uses the mobile site more than he uses the main website now so he is very happy with it”

“As he doesn’t own a computer himself (he has to borrow other peoples to access RP) he is very happy with the mobile site”