Protected: Kingfisher: Customer journey maps

Protected: Kingfisher: Customer journey maps

About The Project

This content is password protected. To view it please enter your password below:

Protected: Kingfisher: Design system (coming soon)

Protected: Kingfisher: Design system (coming soon)

Ecommerce

Protected: B&Q: A/B and MVT testing

Protected: B&Q: A/B and MVT testing

About The Project

This content is password protected. To view it please enter your password below:

Protected: B&Q: Responsive Web Design

Protected: B&Q: Responsive Web Design

About The Project

This content is password protected. To view it please enter your password below:

EducationFinancial services

Teachers Assurance: Calculators

Teachers Assurance: Calculators

About The Project

I was recruited as a freelance UX consultant to redesign a suite of financial calculators aimed at the teaching profession to help them calculate their pension entitlement and budget (with a view to cross selling Teacher’s assurance’s Savings and Investment products).

Project objectives

The previous versions of the calculators were not performing well according to analytics data; customers were dropping out mid-way through the process and the UI for each individual calculator did not support the user stories or acceptance criteria created by the client.

Project process

Kick off workshop

I ran a workshop with the key stakeholders to clarify what the business objectives were for the financial calculators, who the target audience group were, and what their goals and tasks were (written in the format of user stories). User research had already been conducted by the previous agency who designed the tools so I was able to access this information via the stakeholders. [/spoiler]


Heuristic evaluation

I conducted a heuristic evaluation on the existing tools to identify the key usability problems. There were numerous issues. The design pattern selected did not support the core process a user would need to take to complete their calculations. Links and CTAs were not displayed in a visually consistent style. Mandatory data fields were not indicated and inline validation had not been used.


Requirements engineering 

Collectively with the key stakeholder, we defined a set of user stories for each tool which formed the basis of the functional requirements catalogue. E.g. “As an teacher, I can input my personal data so that I can to get a projection (or check the data that is already there if someone has pre-populated it for me).


Process mapping and data field analysis
For each tool, I defined the process flow for the input / output of data at each step. I started this process by mapping out the process on a whiteboard. Essentially the process flow for each tool was identical and consisted of 6 steps: 1. Input data (details) 2. View projection 3. Manipulate projection 4. View final projection 5. Next steps (cross sell and upsell of savings and investment products). Once the baseline process flow had been established across all calculators, I did an analysis on which data fields were required for each step and of the properties of each data field (mandatory / optional, “type” e.g. drop-down, radio button, validation).


Scenarios
For each tool, based on the identified user stories, I created detailed scenarios which formed the basis of the test plan. The scenarios outlined how the user would interact with the tool at each step.

View projection (standard pension): Hannah’s pension projection is displayed on the screen. Hannah is able to view what her standard pension will look like (£17,688 pa) compared to her current salary (£25,000) if she retires at the standard retirement age (65). Hannah joined new pension scheme in 2010. Hannah is also able to view her standard lump sum, which, because she is part of the new pension scheme, is currently £0.


Clickable prototyping
Based on analysis of the usability issues, analytics data and the core user stories identified the previous design pattern selected was not fit for purpose. Users were expected to enter both personal and financial data and calculate their projection in the same step, when infact the user needed to be led the user through the interface step by step and submit data in a prescribed order. The other issue was a tutorial which displayed on page load with a series of “pop-ups” which could not be overidden. As an alternative, I selected a 3 column, in-page “wizard” pattern with a steptracker for the UI which contained the core steps I’d identified in the process mapping workshop.The fourth column contained a static “Help” block (which was also available in-line adjacent to form fields via tooltips). Once the baseline template had been established, this was tested in-house with a small group of teachers sourced via an agency. Any identified issues were incorporated into the baseline template, which was then used to build the other calculators.

Functional specification
Post sign-off, I created a detailed functional specification which described the behaviour of all the UI components on the page, referenced against the functional requirements we identified in stage 2.

Solution

The clickable proptotype and functional specification were used by the in-house development team to rebuild the calculators which were relaunched in early 2013. Both engagement and conversion increased significantly as a result of the relaunched tools.

Financial services

Dubai bank: Platform rebuild

Dubai bank: Platform rebuild

About The Project

I assumed a hybrid BA / UX role on this project, which involved a complete design and build of a transactional internet banking site incoporating a mobile specific solution for Dubai Bank.

Project objectives

Dubai Bank aspired to position themselves as the market leading bank in the UAE. In order to acheive this, they required a complete overhaul of their digital estate across devices. Phase 1 consisted of the implementation of a new CMS which would deliver an aesthetically pleasing customer experience. Key features the new platform would offer included online applications for current, savings and investments accounts, live chat, branch and ATM finder, and an appointment booking service. I was also engaged as a UX consultant on phase 2 of the project which consisted of an m.dot version of the desktop site, which excluded the transactional components but enabled users to discover Dubai Bank’s products and services.

Project process

I was recruited as a BA role on this project. The IA and UX had already been signed off on the project and I was brought in at the design stage to ensure the templates were built according to the client’s requirements by the offshore development team who were building the site using Sitecore CMS. This process consisted of several tasks:

  • Content inventory: Based on the sitemap created by the former consultant on the project, I produced a detailed content inventory which specified each page, ID, content “type” (article, form etc), location within the hierarchy, URL and associated template. Each of the templates was modular and consisted of several different components so these were also referenced within the content inventory.
  • Requirements catalogue: I also produced a detailed requirements catalogue for sign off by the client prior to build classifying requirements by type (general, technical, functional and non-functional requirements) and feature category (site administration, forms), created the acceptance criteria and acted as the single point of contact between the developers, designers and client throughout the build.
  • Wireframes and functional specification: The client required a proportion of the desktop site to be replicated on mobile in Sitecore. The mobile site would not be transational; instead, the requirement was to enable customers to view products and services offered by the bank on their mobile device and click to call to apply. I started this process by creating a content inventory based on the desktop site, and prioritising which content should be retained for the m.dot site. The next step was to define the core scenarios for the mobile experience with the client, which formed the requirements for the wireframes e.g. Iphone 4: NTB customer opens current account.

Project solution

Both desktop and m.dot websites were launched on the required due date and fully aligned with the clients overarching business objectives to increase the revenue stream for the bank via online applications and cross sell of other products and services.

Financial services

RBS: m.dot site

RBS: m.dot site

About The Project

This project involved designing an m.dot site for RBS.com. As the lead UX consultant on the project my remit entailed requirements engineering, employing UCD methods (personas, goal and task analysis), information architecture (creating a content audit and defining the site structure) and producing a prototype and functional specification.

Project objectives

RBS.com required a mobile-friendly version of RBS.com, their corporate website. The business case for creating a mobile optimised version of RBS.com arose when it was discovered that 10 – 15% of rbs.com traffic is from mobile devices.

It was also discovered that there was a high bounce rate from the homepage, suggesting users aborted their journey after failing to achieve their goals. The business objectives for the project were as follows:

  • Improve RBS.com brand reputation and positive perception;
  • Drive traffic to news articles and encourage users to comment.
  • Enable faster access to contact information;
  • Increase email / social media sign-ups and sharing.
  • Project process

    Phase 1: Kick off workshop:
    I ran a kick off workshop with the client where I elicited the business and project objectives and clarified the assumptions and constraints for the project. The m.dot site needed to emulate the look and feel of the desktop site, and reside within the existing CMS. It was also a requirement that the m.dot site would only contain a proportion of the desktop site content, that which had been identified as regularly accessed via a mobile device based on the client’s existing analytics data.

    Phase 2: Goal & task analysis
    Unfortunately user research and testing were out of scope for the project however the target audience group were well understood by the client and they were able to supply me with up-to-date analytics and market research data which enabled me to construct personas and user stories. The key end users for the tool defined by the client were customers, investors, journalists and job seekers. This helped me to define the type of tasks the different end users might conduct on a mobile device. I constructed a framework for the type of tasks typically carried out on a mobile device. These formed the basis for the use cases for m.rbs.com end users which included:

    Task type RBS example
    Tasks involving a deadline
    Checking the latest key events using the calendar.
    Tasks using rapidly changing information
    Checking the latest news story or share price.
    Tasks that require finding out information
    Finding out how to make a complaint to RBS via the contact section.
    Tasks that require finding out directions or public transport information
    Finding out where RBS is located in France.
    Tasks that require communication with others
    Replying to an RBS tweet on Twitter.

    Phase 3: Requirements engineering:
    I compiled a detailed requirements catalogue based on the information elicited in phase 1 & 2. The requirements were categorised and prioritised using MOSCOW.

    Phase 4: Site structure:
    Next step was to create a content inventory based on the existing site map and then define which sections and pages would display on the mobile site, which I did in conjunction with the client. We agreed that based on the analysis of target user groups and tasks only to include News, Worldwide locations, Contact centre information, Share price and Social media links. All other sections (e.g. Sustainability and About us) were to remain desktop only.

    RBS.com sitemap

    Phase 5: Prototype and functional specification

     

Financial services

HSBC: Site refresh

HSBC: Site refresh

About The Project

I was engaged as a Lead Information Architect and UX consultant on this project. My key tasks were running a kick off workshop with the stakeholders, conducting remote tree testing and a moderated open and closed card sort, and generating a new information architecture for the site.

Project objectives
HSBC GCS wished to improve the information architecture and user experience on their area of HSBC.com. Unfortunately there was no scope for template redesign and build; we were working within the constraints of the existing system.

Project process

1. Content inventory and Tree testing
The project objectives were to improve the information architecture of the GCS area on HSBC.com. My first step was to compile an audit of all content on the existing site and identify the page title, category within the existing IA, file type (form, article etc), template, owner, and content summary.

The next step was to recreate the existing structure within Treejack, a tree testing tool, and create a set of “findbility” questions in a survey. This survey was distributed to a set of end users. I analysed the results which helped me to identify issues with the existing site structure. You are a journalist and you are visiting for the first time. You would like to find out about in. Where would you locate this information?

The results of the tree test indicated the majority of participants had problems with locating content on the site.This could indicate problems with the site structure, problems with the way in which content is organised within the site structure, or confusion over terminology or labelling.

2. Kick off workshop
I conducted Stakeholder workshop and requirements engineering to understand the project objectives, target user groups and goals, and to present the findings from the remote tree test I had conducted prior to the workshop. The output from the stakeholders in the workshop helped me to create a set of “provisional personas” (Unfortunately the user research budget for the project was restricted so these were not based on external, representative users of the system) . However they were quite a successful tool throughout the project which helped us to “bring to life” the representative tasks and goals of the various targeted users, thereby enabling the structure to be more effectively modelled.

3. Open and closed card sort
Next, using the page titles from the content inventory, I conducted a moderated open card sort with 20 participants. This task would help me understand how end users grouped content on the site and understood the terms or labels used. This generated the primary categories for the global navigation. I then tested the results of the open card sort via a closed card sort, to evaluate the top level categories generated in the open sort.

4. Wireframes
The final step of my role in the project was to create a set of wireframes to showcase the new structure within the existing templates. I then worked alongside a copywriter to refresh the content on the site.

Financial services

M&S money: Proposition launch

M&S money: Proposition launch

About The Project

Usability testing: M&S Money

Project objectives
M&S decided to extend their range of financial products by launching a full range of banking services to include x, y, z. This offering, M&S Money was to be promoted via existing channels and online via a new website. I was employed as a usability consultant in the user testing phase of the project. The purpose of the usability testing phase was to validate the navigation, site structure and design of the M&S Money homepage via two high-fidelity prototypes (Option 1 and Option 2) and address any usability issues before proceeding to the development phase of the project. My role entailed conducting usability testing on two high-fidelity prototypes to obtain feedback on the layout of a homepage and information architecture using Tobi eye tracking software and running a follow-up card sort and tree test to further refine the site structure.


Project process

Stage 1: Participant recruitment and lab set up

Participants were recruited via an agency according to a strict profile which closely matched M&S money’s target market. These profile requirements included age group 35-55 years old, B and C1 socioeconomic groups. 10 participants were recruited in total with each test lasting approximately 30 minutes.  Tests were conducted in a lab using Tobi eye tracking software.


Stage 2: User testing plan

I produced a test plan which outlined the format for each session and a range of scenarios and tasks participants were given. The format of each session was as follows:

Task

Timings

Orientation and pre-questionnaire

5 minutes

Eye tracking calibration

2 minutes

Warm up task

3 minutes

Main task

15 minutes

Retrospective interview

5 minutes

Users were given a set of ‘findability’ tasks to locate information on the two prototypes, which each contained a different global navigation (Options 1 & 2). The two versions of the prototype were presented to the participants in a random order to ensure the results were unbiased. The tasks were also supplemented by participant interviews to obtain qualitative first impressions and feedback after the activities. The results were further supplemented and validated with eye tracking data. Typical scenarios and tasks participants were given during the main activity included:

Test tasks

Ok so I’m going to show you the homepage again. This time, I want you to click on the place where you’d find information about travel insurance

Now can you click on the place you would find out about M&S credit card

Now can you click on the place you would find reasons to bank with M&S.

And finally, imagine that you already have a credit card account with M&S. Can you see where to login to your internet banking?

For each of these tasks, the observer was asked to rate the task as having passed or failed, according to the following categories: 

Rating

Summary

Easy

Succeeded easily

Medium

Succeeded with some observed difficulty

Hard

Succeeded having expressed difficulty

Assist

Succeeded with assistance

Fail

Failed


Stage 3:Results, analysis and test report

The heat maps below show the areas of the homepage where the participants fixated when shown option 1 and option 2 for the first time. Both heat maps demonstrate common ‘fixation’ areas (Our products block, M&S Credit Card block, Hero slot (with particular emphasis on the woman’s face) and the Login block. However, there are some differences between the two. Option 2 indicates that there were longer or more frequent fixations around the ‘Explore M&S Money’ category on the global navigation. Participants also focused for longer periods or more frequently on the blocks lower down the homepage. Participants were shown Options 1 and 2 in a randomised order, to ensure unbiased results, so this data could indicate participants paid more attention to the global navigation in Option 2, once they had identified it as a navigational device. Results were were distilled into a set of recommendations delivered to the client in a report.


Overall findings:

  • Majority of users completely overlooked the global navigation (both option 1 and 2) as a navigation device, some even after being prompted, preferring instead to navigate via the ‘Our products’ block.
  • Majority of users did not realise that Marks and Spencer offered so many Financial products and don’t consider M&S to be a mature finance provider.
  • Most users preferred option 2 primary navigation, as they preferred to see all the content up front.
  • Some users felt that the images should be more relevant to banking (e.g. hero slot, mother and child).

Grant Thornton: Data visualisation

Grant Thornton: Data visualisation

About The Project

This project entailed running a requirements workshop with the client to establish business and project objectives, target audience and high-level requirements. This was followed up with the creation of a set of UX artefacts detailing scenarios, task analysis and tool features, which were used as the foundation to build the UI by developers.

[column size=”1-2″ last=”0″][box title=”Client: Grant Thornton” color=”#a6a6a6″][client logo=https://gmwhite.com/uxguru78372893/wp-content/uploads/2016/08/CmYyOQJV_400x400-e1472313113172.jpeg align=”center”][/box][/column]
[column size=”1-2″ last=”1″][box title=”Skills used” color=”#a6a6a6″][skillbar title=”Business analysis” level=”100″]
[skillbar title=”User research” level=”100″][skillbar title=”Usability” level=”50″][skillbar title=”Information architecture” level=”50″][skillbar title=”Interaction design” level=”0″][/box]
[/column]

Project summary
[divider style=”with-link-to-top” color=”#bababa”]
Grant Thornton wished to display the results from one of their publications, The International Business Review within their digital estate in an engaging and interactive way. The Grant Thornton International Business Report (IBR) is a quarterly survey of business leaders from across the globe.

I was employed on the project as a BA/UX consultant tasked with capturing the client’s requirements and creating a set of artefacts to demonstrate to the UI designers and developers what functionality the tool should contain.

Project process
[divider style=”with-link-to-top” color=”#bababa”]

[spoiler title=”1. Kick off workshop” open=”0″ style=”2″]The first stage of the project entailed conducting a workshop / focus group with the client to define business and project objectives, identify target user groups, their goals and tasks for the tool. [/spoiler]

[spoiler title=”2. User needs research” open=”0″ style=”2″]The second phase of the project involved summarising the findings from the workshop and reporting on these to the client. The tool would be used by four different audience groups, both internal and external. 1. GT employees 2. The media 3. External businesses 4. Educational institutions. To demonstrate my understanding of the audience groups who would be using the tool, I created experience maps to demonstrate how analysing the different goals and tasks of each target audience segment would drive requirements for different features within the tool.

Each experience map journey was broken down into three stages: 1. First encounter (How do I use the tool? What questions do I want the data within the tool to answer?) 2. Interacting (using the data within the tool to answer specific questions such as “How does Country X compare to Country Y in other categories and indicators?”) and 3. Follow up (actions taken by the user after using the tool e.g. Can I download the PDF version of the report for further analysis and commentary?) The tasks at each stage differed for each audience group.
[fp_carousel width=”900″ height=”200″ items=”3″ num=”3″ speed=”600″ orderby=”date” post_type=”post” include=”767, 774, 776″]
[/spoiler]

[spoiler title=”3. Requirements engineering” open=”0″ style=”2″]The experience maps provided a useful stimuli for the client to further brainstorm different use cases they would need to cater for within the tool. This led to the development of detailed user stories and task analysis which were used by the UI designer and developer to design the interface according to the client’s requirements.
[/spoiler]

Solution
[divider style=”with-link-to-top” color=”#bababa”]

[callout add_button=”yes” button_text=”View tool” button_url=”https://dataviztool.internationalbusinessreport.com/ibr.html” button_color=”#09b6eb”]You can view the data visualisation tool by selecting “View tool”[/callout]

Central government

National Strategies: platform build

National Strategies: platform build