Rated People Role as Front-End Web Developer, London

Rated People Logo

Responsive Design

Rated People’s main target audience are their registered tradesmen and these are frequent mobile users who greatily benefited from being able to use a mobile-optimised version of our website. The first decision that we made upon joined Rated People was that the website delivered a bad experience to all users on mobile phones and this needed urgent attention.

Responsive design was the obvious first task, in order to make existing areas of the website useful to our customers, regardless of which device or browser they were using. Once this was delivered we then set about providing specific downloadable apps for both Android and Apple.

The structure behind the Responsive pages is still being rolled out across the rest of the website but our Analytics research quickly underlined how more of our existing userbase where carrying out the same tasks on their mobiles when previously they would have felt restricted to their desktop computers because of the poor experience that they were previously being served.

rated-people-profile-desktop

Tradesman profile in responsive desktop format
rated-people-profile-tablet

Tradesman profile in responsive tablet/iPad format
rated-people-profile-mobile

Tradesman profile in responsive mobile (iPhone/Android) format
rated-people-profile-mobile-with-menu

Tradesman profile in responsive mobile (iPhone/Android) format with responsive menu collapsed

HTML5 CSS Template Builds

We decided to create a userguide for Rated People so that any backend teams could start off new projects even if there was no frontend resource available at the time. Rather than Java devs wasting time on the frontend, they could have a nice template set up straight away whilst they concentrated on the backend, whilst also ensuring that our CSS structure across all websites was conssitent, regardless of who created each new section or website.

Our userguide, which was essentially an HTML5 & CSS3 template build, with accompanying instructions, was so useful that we eventually scaled it out to our many partners who could quickly create their own Rated People branded pages to add into their own websites, thus quickly driving further business as well as ensuring brand consistency.

rated-people-local-pages

New page built on our extensive userguide, enabling front-ends to be functioning quickly and consistently

Custom Builds for Mobile

At Rated People i produced many responsive pages to cover all devices, but there were also mobile-specific builds for Mobile Websites where customers using such devices would be forwarded on automatically. You can see examples of these below. One advantage of this approach was planning entirely for mobile to make it more efficient and also easier to maintain. The Mobile Websites were normally used as a fallback for those on Android or Iphone who had not yet downloaded our native apps.

rated-people-mobile-web

Specific Mobile Web Build
rated-people-mobile-web-with-menu

Specific Mobile Web Build with Menu Expanded

jQuery and Native Javascript Widgets, Components and Enhancements

Rated People make use of jQuery components right across their web presence and i include just a small selection of Javascript based work that i have completed below.

rated-people-overlays

Implentation of jQuery Tools Overlays, with elements of customisation
rated-people-tabs

Implentation of jQuery Tools Tabs, with elements of customisation
rated-people-cookie-policy

Cookie Policy implemented for legal instruction alert
rated-people-counter

Mathematical counter based on calculation from current time and date
rated-people-auto-tabbing

Handcoded functions for auto tabbing ID form fields

Browser & Device Support Plan Derived From Google Analytics

The constant changes in technology meant that we decided to adapt our support strategy to what ever statistics came from our Google Analytics accounts. As an entirely UK-based company, worldwide device usage was not relevant to us and so we selected the key mobile and tablet devices used by our tradesmen as well as desktop, mobile and tablets used by our homeowners who submit the initial requests for work.

By using Analytics we were able to very quickly add new devices to our support schedule as well as even anticipating which ones we would need to cover in the future, by tracking their increased usage up to the present day. At my last point with Rated People, we were testing with a variety of Android and Apple mobile devices, several tablets, plus a precise desktop profile of Internet Explorer 9 & 10, plus latest versions of Safari, Firefox and Chrome.

Our strategy was to offer websites which could function effectively on all major devices and browsers, whilst then adding specific apps for Android and Apple mobile users.

Analytics Example

Dummy data example of how we might find and use browser usage statistics from analytics

Organic SEO

We have put a lot of effort into increasing organic traffic from Google because of it’s great value as compared to PPC, and several changes to our pages have helped to both increase our organic rankings as well as click through rates from those same pages.

Our profile pages have considerable numbers of internal links between each other which has allowed us to greatily improve the number of job sites and overall traffic travelling through these pages. A review aggregate also appears on the Google snippet now for each profile and this has increased click throughs from organic listings too.

Google snippet for Rated People

Tradesman profile Google Snippet with review aggregate

By improving the look of our site generally we have also encouraged greater linking in to our content, and our blog has been heavily influential in improving our brand’s performance on social media.

Code-wise, we continue to optimise the site in order to make it load as far as feasibly possible and this can additionally help Google rankings thanks to Algorithm adjustments over the last few years where page weight is no taken into consideration.

An important factor to sustaining and improving organic SEO performance is the handling of dynamic data and ensuring that none is duplicated in any way, so that content is always fresh and original. We would re-purpose content in a way in which Google would not penalise us for any duplication, ensuring all pages retained good rankings.

PSDs Adapted and Delivered as Code

A frequent process for any Front-End Web Developer is to produce coded pages from supplied Photoshop psd files and that was something I did frequently at Rated People. Having used Adobe packages for over 10 years I am very comfortable in using them and would often find myself editing visuals myself when running into implementation issues.

My normal process here was to construct semantic HTML5 from the psd and then later add the CSS in order to achieve exactly what the designer had intended.

During my earlier jobs at Midas and High Tide Media I created many designs of my own from scratch but now have moved entirely into development, as underlined by the work that I produced here at Rated People.

UI Prototyping for APP User Testing

Rated People test all new projects as a matter of course and will bring in carefully selected tradesmen for any work which is aimed at that sector. I produced several prototypes at differing levels of detail in order to quickly get testing underway and enable us to make decisions on features as quickly as possible.

The most in-depth prototype that i produced was written in jQuery Mobile and served as a demo for our upcoming app. The prototype proved successful and much of my code from it was carried across into the completed app.

jQUery Mobile HTML5 Prototype

jQuery Mobile Prototype produced for User Testing in early development stages
jQuery Mobile Prototype with Google Maps

jQuery Mobile Prototype with Google Map work area

Axure Prototyping

Some alternative prototypes which i built at Rated People were more for early stage testing and as such would be created in Axure, which offers rapid prototyping for simple interfaces. In some sessions we would even test tradesmen and homeowners with different prototypes created with different tools, where the projects were at different stages in their development cycles.

Leave a Reply

Your email address will not be published. Required fields are marked *