Recent photos

Canon

The work for Canon was focused on improving the support interfaces for sales & service portal users.

This work was in the form of complex interactive wireframes that were being presented to the stakeholders in bi-weekly meetings where the review of the user journies took place.

1. Requirements analysis

A key part of the work I was involved in was visualising & rationalising the requirements documents which had been provided by Canon to guide the creation of the interfaces.

2. Sketching

As the requirements were refined there was an ongoing process of producing quick sketches to capture the realisations which tool place during the stakeholder meetings & during discussions within the team of people I was part of .

3. Wireframing

Once the interaction models were clear & the requirements had been accomodated in the sketches higher fidelity prototypes were produced to demonstrate the interaction.

Natural Retreats

Natural Retreats are a luxury holiday provider who specialise in bespoke country getaways where their customers expect the upmost quality in the holidays that are booked via them. This project was a complete re-build of their site, its interaction & its branding.

Working closely with partner brand design agency I was responsible for identifying & documenting the primary user journies, reviewing the site map, producing revised flows & finally lisasing with all stakeholders during the creation of the wireframes.

1. User journies

- The user journies were very helpful in aiding the stakeholders to easily clarify the primary user journies.

- They also provided a useful method of explaining the screens when presented as mini-wireframes with annotations to add the detail to the specific journies.

2. Sitemaps

  – With the primary user journies established it was then neccessary to refine the structure of the site to remove duplication & make sure that the key user journies are easily accessable.

- This work went on to create a much simpler, shallower site structure which enables the users to quickly find the content they want.

3. User flows

As an additionto the user journies, complex user flows were put together to make sure that the interaction as it was understood from the client sessions was being intrepreted correctly.

– As an useful extra to make the wireframe documentation more engaging the user flows, site maps & mini wireframes all contained linking to the realtive page to enable the reader to quickly look at the interaction which the diagrams provide.

4. Wireframes

Lastly, after the environment was fully understood & the sketches had been done a full wireframe document was produced to illustrate all of the templates which were required to build the site.

– Fully annotated to describe all of the page interaction.

Royal Caribbean

The Royal Caribbean curise provider needed a refresh of their Offers pages & improvement to the existing homepage to increase the visibility of the available offers.

1. Competitor review

To begin with a thorough review of the competitiors interaction models was undertaken to identify some of the pros & cons around presenting promotional material in a given way.

2. Site analytics & user research

As result of user testing & site analytics a number of points in the offers journey were identified as needing improvement to ensure that the accessability of the offers was as high as it could be.

3. Wireframes

Using the gathered knowledge, wireframes were then produced in axure to explore the possibilities of how the offers section could be improved.

Offers landing page.

- Page contains a clear hierarchy of the offers that are available.

- Multiple different configurations of the a page are possible enabling the client to choose appropiate arrangements that best display the offers which are currently availabl.

Offers detail page

- Users are able to view the details of the offer which has been selected.

- Users can also now see information of the cruises which the selected offer is available to.

4. Final points

The user experience was improved by:

• Making the access points to the offers clearer on the homepage
• Improving the information hierarchy on the offers homepage to allow the client to use a variety of different promotional configurations
• Clearly linking the offers to the cruises which they are applicable to

Mobile AppBook

‘App Book’ was to be Orange’s own app recommendation service which would provide Orange customers with an verity of editorial reviews and best of lists to help them choose what app they would like to use or play with next.

The service was to be a ‘web app’  by taking advantage of the facilities afforded by HTML 5, thus I was required to emulate more of the interaction that would be expected from an app rather than what would be typically produced for the web.

1. Concepting stage

During the early stages I produced some basic sketched proposals of how the landing page would look & began to map out how some of the more complex interaction would function.

Early UI sketches

2. Site elements & interaction models

Once the number concepts had been reduced the structure in which they would function was more formally defined.

Site components & early user flows                                  Interaction models

Sitemaps

3. Wireframes

As the concept developed & its structure formalised, I produced wireframes to capture the ongoing developments & provide the beginnings of prototype & the final deliverable.

Profile wireframes

4. Presentations & prototypes

In the later stages of the project it was necessary to present the concepts to stakeholders so a mixture of static & interactive examples are used to make the biggest impact when emphasising the interaction.

DCSF

The work which was done with the DCSF was focused on understanding the business requirements & stakeholder needs of the now decommissioned department for children schools & families website.

The site had a very wide scope of information which was aimed at families, teachers & governmental bodies so the research done required a very wide range of people to really understand all perspectives.

1. Participant gathering
  An online survey was created which was targeted towards teachers & other educational staff.

This served the dual purpose of gathering contact information on those who wanted to take part in user testing & enabled us to organise the respondents into the relative demographics which we needed to incorporate in the user studies.

2. Prototyping & user testing

  The prototypes which were produced for use in the user studies were of a high enough fidelity to allow the different groups of users the functionality to navigate around the site.

This allowed the one on one user testing to be dynamic in the tasks which were assigned to the users & so quickly identify flaws in the logic or lay out of the prototype.

3. Persona creation

  As the users & stakeholders were taking part in the studies they were also providing the information necessary to build persona’s.

The use of persona’s greatly improved the impression which was held about a particular users needs & habits as the development of the prototypes progressed.

John Smeadley

The task set for the John Smeadley project was to ‘stress test’ the new version of their commerce site. Development of the site had been completed & the go live date was set in the near future.

To stress test the site a qualitative approach was adopted which incorporated the use of City University London’s eye tracking.

1.  Participant gathering

  In order to gather the participants for the study a range of people were sourced from in and around the university location.

The study required that we find a wide range of people of varying age, shopping habits & internet use.

2. Eye tracking study

  The studies initially started by having the participants complete a number of short tasks which were carried out with out any verbal interaction to ensure that the information captured via the eye tracker was reliable.

Once the users had completed the task a more traditional approach was adopted to capture the users thoughts and feelings about the experience they had with the site.

3. Analysis & documentation

  By combining the information which was captured from the eye tracker with the subjective views of the participants it was possible to provide John Smeadley with some resilient suggestions of where users might find problems with the UI.

American Express

The work undertaken for Amex was focused on improving the digital customer experience for those who held Amex’s high worth credit cards such as Amex black or the centurion card.

In order to achieve this a range of different methods were used to gather the users preferences, analyse the current architecture & produce new concepts for the stakeholders to review.

1. Requirements analysis & user observation

  The first stages of the project were to gather information about how the current users utilise the call centre based service which was in place to tend to the needs of the high value customers and then analyse the existing structure in which these requests are felicitated within.

      2.Hierarchy analysis & refinement

  Once the initial research had been done an improved logical hierarchy was produced and reviewed prior to forming the base of the new wireframes.

     3.Wireframe concepts & stakeholder review

  With the guidance of the improved hierarchy a number of different wireframes were produced to explore the different concepts which would satisfy the requirements. These concepts were reviewed by stakeholders & progressed into the final designs.

HSBC

As part of the team assembled by Capgemini to aid HSBC in the development of their online mortgage service we were tasked with creating interactive visual representations of the existing requirements specifications. Using these visualisations I walked groups of stakeholders through the prescribed interaction to identify weaknesses & areas of improvement which were then implemented for the next round of review.

This process of iteration or RDV (rapid design visualisation) was intergral to ensuring that all those who had a stake in the final evloution of the mortgage product were heard & advice taken on board.

1. Resource gathering & requirements analysis

  From the wide selection of UI specification that was provided which included visio designs, powerpoint screen grabs & extensive excel documents. I produced interactive prototypes to demonstrate how parts of the mortgage application process would function.

2. Prototype aggregation & stakeholder review

  Once the team I was part of had assembeled all of the components of the mortgage application journey we demonstrated how the mortgage application journey would be experienced by the users.

3. Prototype  presentation

  During the review session I presented the components of the mortgage journey that I had prototyped within the context of the greater journey. The comments which were offered were then applied to the prototype in time for the next review session.

Mobile homepage

At the start of the project time was spent analysing the available information to establish the current structure of the site, it’s requirements and what direction the brief in suggested we should be moving in.

1. Site mapping & requirements evaluation

With a solid understanding of what was asked for, I began brain storming how the elements could be associated & then produced concepts at a variety of different fidelity’s for review.

2. Paper concepting & interaction rules

As a result of the agile review & refine process a concept was decided upon & the details of this UI were formalised for the development teams.

3. Deliverables

 Flow diagrams to provide the logic which with the relevant component of the UI functions by.

In production of the flow diagrams to describe how each component of the system should work, the development teams were continually liaised with to ensure the accuracy of the representation.

  Prototype. The prototype acted as a very useful element of the deliverable as it served to interactivly demonstrate how the UI would work to users & stakeholders alike. Once sign off was achieved it then provides the developers with all the annotation they require to fully develop the final UI.