NJGibson

Prototyping for Skymovies

admin — Thu, 26 Jan 2012 23:14:24 +0000

Working for Sky

Recently I contracted for British Sky Broadcasting, as a JavaScript UI developer.

I Joined a Java back-end team, who had little Front End development resource to help build the new Skymovies site. The site was to be much more JavaScript driven than previous sites they’d constructed and had front-end performance constraints, mainly due to the volume of assets requested to be displayed i.e. their large image galleries of movies.

Whilst working on constructing the site, I stepped up to offer experience on technical solutions, and architect the fronted of the site, leading discussions with designers and business. I also identified I could share my JavaScript experience with technical team to aid the development of the site, so presented on using object orientated JavaScript, JavaScript patterns, custom events, and Ajax history, and how these could work in the new site. I also worked closely with some of the Design team working out interactions and transitions to best reflect the right message, and keep performance in mind. For these discussions and to test solutions I created some technical prototypes.

Prototypes

Initially when working with the technical team, I constructed several quick prototypes, to research technology’s and find working solutions. These prototypes included: mobile first design and media queries, floating/fixed navigation, several Carousel prototypes for performance, and different JavaScript setups.

I also worked with the design team, on setting up standards, these included: column grids, vertical/baseline grids, spriting, file types, CSS gradient instead of images, ect. For these I created several write ups and some example mock-ups to illustrate how these would work/look. These helped to get the best crossover with graphical deliverables, so that they where small and easy to build, scale, and collate into sprite maps.

Lastly I kept a technical prototype handy, and worked in some of the design standard we’d setup . This was helpful to test my assertions as the project continued, and as a discussion point with developers and designers.

Soon after the team started more fully on production code, starting to construct a content management system (CMS).

User Testing

Early in the construction of the site and CMS, user testing was scheduled with an external company, to co-inside with a further along mobile IOS app being constructed.

As the production build wasn’t demonstrable yet, I updated the final prototype, and brought it up to a high enough fidelity for user testing and would allow some basic tasks, and offered it as an alternative to the business.

This was used for the user testing for the site with an external company and was effective in capturing user test data, which was worked into the final site.

Here’s a link to a copy of the last prototype, with some sections removed to protect the sky brand:

http://njgibson.co.uk/prototypes/sky/test_floating_nav_and_carousel/

(As this was a prototype built to simply demo some features, please try in Firefox, or chrome browsers)

and here’s a link to the final site that was built:

http://skymovies.sky.com/

Pictures

Old site

Final prototype

New site

Heuristic design review: Rouge Mag Store.

admin — Wed, 17 Aug 2011 12:57:26 +0000

Introduction

Gillan Williams, Executive Editor of Rouge Magazine contacted me about his new sports and adventure shop, the Rouge Mag Store, I offered to take a look at it, and review the design and code behind it.

Looking through the first build of the site I noticed some visual design, and communication issues, so conducted a brief review to identify and document all these issues.

Before

The site as I initially saw it, (please click on the images to see zoomed views);

Main page Category page

Suggested Designs

After identifying some issues, I set about creating a solution. I started reviewing the site through screen grabs of each page in Adobe Photoshop, annotating the visual communication firstly on usability and consistency, then also on use of branding, and staying on message.

I presented my workings through a set of design note screens on the existing site, and created a finished alternative to the current design so the customer could see the impact/level of change that could be achieved should he flow the design notes.

Main page

Design notes

Updated design mockup and notes

Updated design #1

updated design #2

Category page

Design notes

Updated design

Results

Using there own imagery the customer implemented a lot of the changes inline with the mocked up design, here is the result;

Main page Category page

The Golden Goose

admin — Sat, 21 May 2011 20:28:16 +0000

The Golden goose, gift and lifestyle shop in frome, asked me for a new build of there site. This included a design refresh, website code, and custom CMS system that was easy to use for uploading lots of products.

I meet up with them and discussed products, categories they worked with when ordering, and subsets of these they would like to try online. We also discussed the atmosphere and experience of shopping at the golden goose.

We decided on a clean fresh look with pastels, and whites. We wanted the store to look open and fresh. We then organized the categories, and header borrowing visual communication from the popular amazon site, and several other sites.

I then created a custom CMS system to upload site images, text, product images and info, and single and multiple prices.

I created the site with HTML, CSS, JS, and PHP

to view the site please visit;

www.thegoldengoose.co.uk

Page html configures Javscript controller

admin — Thu, 27 Jan 2011 12:05:13 +0000

Discovery

After reading this excellent article http://www.alistapart.com/articles/javascript-mvc/
I found that these are common tasks I usally complete setting up JavaScript page controllers:

Setting page data, and business logic into a ‘model’ config, and re-using this throughout in ‘view’ methods which touch the DOM, and specific DOM event and Application event ‘controllers’ or handler methods.

So Good news! but I find configuring the main issue with setting up the ‘model’ data is that the values can be quite static and fixed / pre entered values in the JavaScript. especally with non DOM value like business logic..

Situation

The usual method is usually create a modular pattern which takes a config, and in the init, the config passed in updates/extends the default config, then all other methods are run conditionally on this config.

The main task of populating the config, can be done either by;

Passing a Object of fixed values.
Scrapping values read from the DOM into an object and passing these values,

Usually the second is used, but the main issue is for these scaped values i.e. id = ‘example_1′, is to configure specific business logic for ‘example_1′, i.e. a specific ajax url or tollerance of values entered, e.g. max 5 characters.

Ideally the business logic would be passed in per-element/page to:

Make the page controller more modular and reusable.
Configure each of the pages controller instances of a widget found on the page, individually if necessary.
Updates to BE logic, i.e. validation, if exposed in the HTML view should update the FE logic.

To make this more flexible, some people add extra logic to classes on elements in the DOM i.e.

Although this method means:

Lengthy classes
Confusion with presentation classes, and business logic
simplistic one level data

Idea

An idea would be to add this business logic data using the new html 5 data attribute, using a string with a custom data format to pass objects of data.
This would alow more complex data models to be passed to the javascript, and separation of classes and business logic:

HTML 5 data attribute

Normal html 5 data attributes look like this ;

“3.2.3.8 Embedding custom non-visible data with the data-* attributes

A custom data attribute is an attribute in no namespace whose name starts with the string “data-“, has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).”

Quoted from:http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data-with-the-data-attributes

Custom data format

Strings as Custom data format are very fast to parse compared to other data types (high performance JavaScript, chapter 7, Data Formats (http://oreilly.com/catalog/9780596802806)). They contain special charaters to split a sting into an array or object i.e.

String:

“parent:first_property,second_property”

Can be looped over and split on the (:) and (,) to create;

{
	parent:
		first_property,
		second_property
}

Example Solution

an example would be for two widgets in out html page, to be initialised with different Ajax urls;

html

javascript

the javscript would be (in jquery, please Substitute your favourte js lib)


var Base = Base || {};

Base.dataStringToConfig = function dataStringToConfig(dataString){

	//testData
	//var dataString = "DOM:uname=username,pass=password,sub=submit;AJAX:url=/actions/index.html;"

	dataString = dataString || '';

	var config ={},
		x = dataString;
		xArray = x.split(';');

	for(var i=0,len=xArray.length;i 
Output would look like

// config 1

{
  AJAX: {
     url: www.urlexample.com/1
  }
}

// config 2
{
  AJAX: {
     url: www.urlexample.com/2
  }
}

Secret sessions

admin — Fri, 21 Jan 2011 08:43:35 +0000

Secret-sessions, contacted me and asked if I could create a website witch they could use for there brand.

There site was to show a secret session of a band or performer: to give fans a inside glimpse into areas, or sessions they may not normally see. Then they wanted to create excitement for fans and to be able to social share, and comment on the performers if they liked them.

We discussed a vibrant ‘Hoxton’ theme, with vivid colors, to feel underground, art driven, and for the fans. We then also discussed how videos and sharing would work, and be integrated into each page.

I created the video site secretsessions.tv. this site built on a WordPress CMS system, allowed the company to upload and link to videos, and write reviews, and these would show up as posts/pages on the site and display automatically the right video embedded in pages from the posted link. Also sharing and commenting was added so Fans could share and post there thoughts on the site.

Also a twitter, Facebook, archive, and email custom widgets where added to the homepage to help navigating and sharing the videos.

I created this site with standard compliant XHTML, JavaScript, CSS, and PHP.

Visit her site here;

www.secretsessions.tv

By-Natasha

admin — Wed, 15 Dec 2010 02:50:03 +0000

For Natasha, we discussed options for her site to show case here portfolio of work. A London Hair and Makeup Artist she wanted a minimal, toned down feel, to contrast and show off her examples of photoshots.

We discussed several revisions of the site, and I designed a minimal wireframe we could work with.
To this I added an introduction page, home, portfolio, about and contact pages. From here we discussed the finished product, and decided on the toned down modern Grey to work well with black and white photos, and equally with a range of color that could be in her photoshoots.

Natasha was keen on showing the brand title prominently, so we added the intro page, to show “By-Natasha” first to the user, then on-click of the title/brand, they could enter the site.

Throughout the content I added fades to lead users smoothly into the site, and between pages. Creating a more measured flow, and modern feel.

For the portfolio of work, as it was often updated, Natasha needed to reflect this in her site, so I also created a custom CMS system so she can login, then edit, save and delete images, and even re-order them through drag and drop interface.

I created this site with standard compliant XHTML, JavaScript, CSS, and PHP.

Visit her site here;
www.by-natasha.com

CMS Usability assessment

admin — Sat, 11 Dec 2010 20:00:36 +0000

Overview

Whilst working for a large magazine company, with 60+ magazines, with matching websites: I started work on the coding of their centralized, content management system or CMS. The CMS was used heavily by hundreds people each day. Their posts, galleries and competitions, feeding each of their magazine site with content. I quickly assessed many usability, and communication issues with the CMS system, and so took the initiative and started a usability assessment of the web applications modules and pages.

In summary, over several few months I worked on and delivered;

A detailed report breaking down the usability and visual communication issues in the CMS.
A series of high fidelity mock up images of the interface showing the system if the improvements are achieved.
A set of visual rules from the mock-ups, for the CMS system. To use in their agile method for future code development.
A series of subtle development changes to meat the mock ups and rules, across the CMS system.

These greatly improved the usability of the system as a whole, whilst dramatically reducing cost to the user, and speeding time to market for content across all magazine brands.

Method and practice

Developed a usability strategy document, detailing: tasks, criteria, kpi’s and goals of usability testing to be carried out.
Conducted the user testing with a selection of system users, across departments.
Assessed the sites visual communication, and I justified relational groups biased on the visual communication and function of elements.
I mocked out page designs updates for 10 pages from the CMS. Applying improvements to the relational groups and usability issues identified.
From these designs, I broke down the changes into development stories to work as incremental updates to the system, applicable in a agile software development process.
I gave a presentation to key stakeholders and technical leaders, showing the existing issues, solutions, and business gains now and in the future, to justify the work.
I code developed the stories back into the CMS system, articulating the designs, and made technical notes, so that other developers could use the improved system to make structural changes i.e. componentise now similar pages.
I wrote a selenium smoke test suite to run automated tests across the whole CMS system.
I collated my documentation, and created a application layout guide or ‘ALG’, detailing the visual groups, and relationships for future development of modules in the CMS, which was subsequently used by several teams implementing new CMS modules.

Results

The assessment and documentation, enabled a subtle change to the CMS systems appearance which was reported to improve the speed at which users could navigate, and their ability to quickly find meta data field to fillout on there post.

Examples;

Slide show

Coming soon…

Mock-ups

After creating visual notes, and exploring different styles of treatment, the following mock-ups where developed

Dashboard

Old New

Articles List

Old New

Zoom-ins

Selenium UI-Map

admin — Tue, 30 Nov 2010 21:59:58 +0000

Recently I’ve been working with Selenium, a suite of testing tools for testers and developers: allowing them to record and or write tests, and play them back in a the way a user would perform them. For this work, I’ve been working with Selenium UI-element extension. A ‘pluggin’ to Selenium.

UI-element can solve a lot of drawbacks with selenium, and promote code re-use, make life easier. I’ve been implementing UI-element selenium tests in my company’s CMS system, writing smoke tests across 60 modules, from article up-loaders, to galleries.

To convey the business value of this, and to inform and promote UI-Element to developers and testers, I completed a Selenium UI-element and UI-map presentation, and introduced it at a monthly FE forum that I run. This presentation covers two parts; a not too technical first half looking to introduce selenium to business, and a more technical second half talking about extensions, specifically UI-Element and UI-maps, for developers and testers.

Here’s the first draft of the presentation as a PDF, I’ve left a lot of the Wording in and documentation to make this more readable.

Selenium_UI_Map

PDF screen shots

EGibson, version 2

admin — Tue, 04 May 2010 20:19:38 +0000

Recently I revisited the artist Emma Gibson. I’d made a website for her last year, and after this time we discussed new ways of making the site better but keeping the identity of the old site.

We decided on a new updated layout for the site, now that screen size averages had increased, facilitating a larger image size gallery, and showing more detail of her work.

From here we re-organised the categories to improve further the galley navigation. and in the ’3d’ section added a thumbnails view to layer over the gallery, so that users can get a better view of each piece.

We kept the home page rollover image, and the smooth fades from the original to subtly lead users through the work, whilst not distracting from it.

Also all the features where added to the custom content management system I created, so she can upload all text, images, and even meta data for google searches.Here she can add, update, and delete images and even re-order them to update the gallery.

This site was created with standard compliant XHTML, CSS, JavaScript, and PHP.

visit her new site here;

www.egibson.co.uk

Graziella Vella

admin — Tue, 30 Mar 2010 10:00:38 +0000

Recently worked with Graziella Vella, a London Makeup artist, to produce this Portfolio site of her work.

We discussed the site, and decided on this minimal design, where I applied subtle effects instead of design features, to lead the users through the work.

I created this site with standard compliant XHTML, JavaScript, and PHP.

I also created a custom CMS system so she can login, then edit, save and delete images, and even re-order them through drag and drop interface.

Also I added some text editors so she can update the text of her About and Services page when ever she needs.

visit her site here;