The Latest

You are not your user – building personas

Posted March 1, 2012 in Product Development, User Centered Design | By

We’ve talked a bit about building for our users and not ourselves, it’s actually a lot harder than it sounds! Unless we’re careful, by nature, we’ll create things that appeal to us, whether they’re good for our users or not.

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.

(more…)

Tagged with: • • •
 

Responsive Design – Media Query Boilerplate

Posted January 30, 2012 in Development / Engineering, HTML/CSS | By

As of 2012 our motto is ‘mobile first’.

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: (more…)

Tagged with: • • •
 

Simple, intuitive interactions

Posted January 17, 2012 in Interaction Design, Product Development, Usability | By

These days everyone is busy, our time is at a premium and no one wants to waste it trying to accomplish what should be a simple task, especially online.

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:
rating-example

Tagged with: •
 

Mobile optimised landing pages

Posted January 5, 2012 in Mobile, Product Development | By

Rated People has just launched mobile optimised landing pages.

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.

Tagged with: • •
 

Responsive Design

Posted October 24, 2011 in Mobile, Product Development | By

We don’t need to explain how or why mobile has become so important in recent times. But the result is that everything we offer needs to be accessible by a variety of mobile devices.

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

Tagged with: •
 

Usability testing

Posted September 29, 2011 in Product Development, Usability | By

The user

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!

Tagged with: •
 

Launching a minimal viable product – the Rated People tradesman mobile site

Posted September 29, 2011 in MVP, Product Development | By

If you ever go to a ‘product tank’ or product conference then you’ll no doubt here people talk about ‘MVP’ or minimal viable product. It’s a very popular strategy of launching new products, and plays well with the engineering principles of Agile software development. If you’ve ever bought a first generation Apple product, you’ll have been on the receiving end of it.

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”

Tagged with: •