Flagstone

Flagstone

Revitalising the website and brand
for a next-gen investment company.

Revitalising the website and brand for a next-gen investment company.

Flagstone_3Dlogo@2x-100

Services I provided
- User experience design
- Wireframe & prototype design
- Information architecture
- Content audit 
- Competitor analysis
- Website design
- Design system

Visit website

The client

As the leading cash deposit platform in the UK, Flagstone provide the opportunity of greater protection for their clients’ money. Following a single application, they offer clients access to hundreds of accounts from up to 50 banks– including exclusive and market leading interest rates – accessed and controlled by the client through their own highly secure online account.

In a nutshell, Flagstone offer the opportunity of greater protection for their clients’ money by enabling them to choose from multiple bank accounts and interest rates – collected in one personalised portfolio under the client’s complete control.

The challenge

Having recently rebranded, Flagstone were keen to apply their new brand identity to thier existing website, whilst maintaining a focus on improving the customer experience.

There were some fundamental pain points on thier existing site that were causing a number of issues for their clients and prospective customers, communicating who they are and their proposition had historically been a hurdle they were yet to overcome.

The solution

I refreshed Flagstone's website inline with their new brand identity with an extended Design System. A new website with improved information architecture derived from our CX research and content strategy helped to shift the focus towards a faster and simpler user experience, enabiling users to find the information they need, quicker.

flagstone-homepage_mac_iphone

Design Strategy & Planning

Establishing key relationships & allegiances early on in any project is critical for success. I ran a series of kick-off sessions with various stakeholders at Flagstone to identify best ways of working, lay out expectations and to align goals and the scope of work.

We allied with Flagstone's internal design team to understand the challenges, and processes embedded within the organisation that would be integral to our success.

Smiling Businessman Sitting At Desk In Office
flagstone-app_image

Research & Insights

To get a full picture of the history and essence of the brand and website, we following up our stakeholder interviews with an audit of the current Flagstone website, ran workshops with the brand & marketing team, and reviewed all previous research to date.

I looked at the individual journeys within the website from each of the perspective client's point of view, gaining an understanding on what content and information was available for each client type.

Discovery
Competitive & Landscape Review
Stakeholder Interviews
Heuristic Analysis
Persona Development
Content Audit
Materials Review

flagstone-discovery
flagstone-previous_website

Flagstone's previous website: outdated design, and inconsistent messaging with unclear calls to action

Discovery & Immersion

One of the challenges that we discovered with Flagstone's previous website, was that visitors were finding it difficult to understand who Flagstone were, and what servies they offer, but as well as this, Flagstone's key audiences found it difficult to navigate throughout the site to find content that was releveant to them. 

After establishing clear categories and hierarchies for the information architecture, I collaborated with User Research consultancy Meisterworks to develop discussion guides to test prototypes of the revised navigation menu that I had designed.

To support the delivery of Flagstone's proposition, I designed a rich dropdown menu and labelled the most prominent items with supportive descriptions and ensured that there were clear call to actions to aid discoverability and findability.

flagstone-IA_sitemap
"I looked to create a design system that allowed for a degree of flexibility and growth, aligning to the design language that is premium, accessible and contemporary"
"I looked to create a design system that allowed for a degree of flexibility and growth, aligning to the design language that is premium, accessible and contemporary"
flagstone-wireframes

Some of the key 'high fidelity' wireframes I designed that were used for content strategy and prototyping

Iterative design

During the design process, I adopted an open and transparent way of working with Flagstone's stakeholders and their design team. Using both collaborative tools Miro to capture my research, and Figma to design high fidelity wireframes, to ensure that everybody could be a part of the journey, allowing stakeholders to provide feedback and insights throughout the project as and when necessary.

Synergistically, we worked together to achieve a common goal, relying on the complicity of prospective and existing clients to provide user feedback to ensure we were delivering the most effective solution.

We all got involved and got our hands on it, overcoming the limits that you sometimes find when working with agencies that are imposed on everyone: there were no restriceted compartments, only a great desire to design by iterating.

Flagstone customer journeys re-imagined

Now with a clearer navigation structure, and a more robust content strategy targeted to each client type, I explored a number of design concepts that pushed the boundaries of Flagstone's recent brand identity revamp, introducing new components and design elements that provides a degreee of flexibility, whilst staying on-brand.

Following the successful UI design of several key pages and templates, I created the foundation of a Design System that Flagstone's internal design team could continue to work on to establish new pages and designs as the website grew.

As Flagstone look to roll this out across their website, it will continue to drive improvements to deliver a clear proposition and customer experience going forward.

flagstone-benefits
flagstone-rates
flagstone-mobile

The result

Whilst existing clients were familiar with the current rates calculator flow, it wasn’t a joy to use, and prospective client's were finding the proposition challenging to understand. Clunky, dated and unintuitive, it was in serious need of a facelift.

I succeeded in modernising the whole experience, whilst retaining core aspects of the existing flow so as not to disrupt hardwired user habits. The redesigned UI is brighter, cleaner and calmer and the new UX makes it simpler to communicate Flagstone's messaging and benefits.

Case Studies

British Airways - WebsiteUX Strategy, Research, Web Design

Unitron - Mobile ApplicationUX Strategy, Research, App Design

Refinitiv - SaaSUX Strategy, Research, App Design

Got a project?