Fidelity Personal Investing

Senior UX/UI designer: 2010 - 2013

As senior designer I take the design lead on all the projects working alongside other designers, UX designers, business analysts, content editors, developers and stakeholders to produce the best site and experience for the user.

I am involved in every aspect of a project; from the initial stakeholder brief, conceptualizing, producing user journeys, wireframes and prototypes, UI design, user testing, and working with developers for the build and launch of the site.

Another one of my duties is to inspire and lead our team of designers and developers based in India. One of the challenges with having a team so far away is to make sure that designs and interaction ideas are understood. I regularly lead conference calls to ensure this is achieved.

While I was at Fidelity I was in involved with a variety of sites aimed at B2C, B2B and internal staff. With the B2B the aim was to provide advisors with the tools to manage accounts, make transfers and advise clients. The B2C was primarily creating the external facing sites such as the core Personal Investing site, European core sites, Institutional DC & DB pension and FundsNetwork.

Main Fidelity site

Wireframe & design

This involved a full redesign of the Fidelity site. Our aim was to keep it simple in appearance, although, due to thenature of the beast, heavy in content.

We had to understand where and how the site could improve. Whether we could remove sections or simply add to them. To acheive this several UX reasearch methods where used, from card sort, contextual enquiries and user testing.

Next we took the results of the research and started creating sketches and wireframes before finally creating hi-res Photoshop designs.

Once the site was launched there was a massive 40% increase in fund up-take from the same time the previous year.

Retirement Calculator

Wireframe & design

The task was to create a tool to calculate how much you need to add to your pension to sustain a particular lifestyle.

I used Ommnigraffle to wireframe the tool, Once the initial ideas were ready we made a protoype which we tested with colleagues and stakeholders. After a few tweeks and another round of testing I used Photoshop to design the final product.

Fidelity Wealth Management

Wireframe & design

Fidelity Wealth is a mirror of the core PI site, however it is intended to look and act more like a premium site for wealth customers, that is, people investing more than 500,000 pounds.

There where some screens that were specific to this site, each of which I wireframes and tested with colleagues and stakeholders before creating hi-res designs with Photoshop. When the designs where ready I coordinated with developers both in Germany and India to ensure the pages and tools where built to spec.

The Select List

Wireframe & design

Redesign of the Select List, a list compiled by financial experts at Fidelity of the best performing funds. This new design added easier search methods for fund searches as well as a new dashboard, which allow users to add funds for comparison. With full fund details such as 'past performance, charges, reviews and charting.

Headstart portfolio

Wireframe & design

Headstart portfolio was a tool that I was heavily involved with our UX designer; together we evolved this design from napkin wireframe to low-res wireframes and then several hi-res mocks.

Testing as we went along, we finally came to this solution, an interactive slider based portfolio selection guidance tool which helps users select an appropriate fund portfolio, which they can fully customise or select one of Fidelity's pre prepared portfolio.

It was an instant hit with the business and users, with high levels of user interactions recorded throughout the whole process, from entry to purchase.

Personal Investor's mobile app

Wireframe & design

Working together with Somo, we desgined and built an iPad app for personal investors. Including a dashboard where users can see their ISA's progress, SIPP growth and pensions. Also giving users the power to switch money between funds.

Responsive design

Wireframe & design

Making the Fidelity PI site responsive was an enjoyable experience, Not only making sure that the site looked good for each device, but to make sure that the correct information was always present and discoverable.

Unfortunately, when we attmpted to make the changes, the CMS system almost had a meltdown and this project was shelved until the Business where ready to make the investments necessary to update the CMS.

Fidelity FundsNetwork: Conceptual

Wireframe & design

Workign with another UX designer, we created a set of sketches and wireframes which we shared with the business. Once we had design which was approved, the hi-res version was created.