ipushpull

Web & mobile site redesign to increase trust and improve product message recall

A website redesign for a financial technology software-as-a-service platform that securely connects data from the desktop to third party applications, mainly used by medium to large financial services companies.

The Proposal

Challenge

To disrupt the traditional fintech market with out of the box and custom solutions for sensitive data management, by showing users that the solution is secure and uniquely meets their needs.

Key objective

To create a responsive and accessible website that worked on desktop and mobile. The company had some content from the previous website but most of it needed updating. The target market was not well known and the website needed alignment with the target users.

The Solution

Over the course of five years, I collaborated with the C-Suite and development team to create and maintain the website, as well as implement a full product suite across web, mobile, add-on, and desktop apps, as well as digital and print campaigns. In addition to fulfilling key objectives, I helped write go to market strategies and content, ran buying decision process workshops, created marketing analysis reports, set KPIs and designed & animated pitch decks.

The Role

Product Designer

Tools

Figma, Miro, VS Code, Adobe Suite, Trello, Flowmapp and Jira

Impact

Increased product demo conversions

• A mega menu was added to the navigation to list all the options for the user, making it easier to pinpoint the user’s objective and improving accessibility, by providing better menu control to the user.

• I added alt text and metadata to the whole website (a project in itself!) to improve accessibility and SEO.

• Before the redesign the site was 4 sections on one page, after the redesign the website now comprises 39 pages (including case studies) and in-depth information about the product offering.

• After in-depth research of personas, the website is now designed towards the target customer based on their invaluable input and post design usability testing.

Decreased sales cycle length

Ease of recall of the homepage

Ideation

Having previously worked on the brand and gathered secondary research, it facilitated the conversation with the C-suite team about the direction and form the website needed to take. The team and I spent time exploring problems within the fintech market and deciding whether to target both B2B and B2C markets. I led a brainstorm session where we storyboarded proposed customer issues and narratives, then putting them into sequences. These sequences played a key role in later stages of the design and journey mapping process.

Finding the right audience

After this session, it was a pleasant surprise to figure out that more narratives did fit into the B2B market side. Using my previous marketing experience we were able to compose a buying decisions process document, which helped to sift through all the customer relationships that were built by the company and identify a core audience to target. We came to the conclusion that more research was needed into customers views and feelings about the solution.

After this intention was developed, I put together a proposed timeline and strategy in roadmap format, turning the design process sections into sprints.

Research

Research Goals

  • Refine the selected industry problem statement

  • Identify the key strengths and weaknesses of competitors' product solutions in the target industry

  • Evaluate design strategies aligned with our business objectives

  • Define the target audience demographic and gather psychographic insights such as values, interests, and pain points

  • Develop a design strategy to meet the needs of the personas

To thoroughly explore all possible approaches and eliminate any solutions that wouldn't align with our intended goals, I conducted comprehensive research to understand the problem set, the market, and the potential users of our upcoming technology.

“I have to train my whole team to use new technology on top of other work, they can’t all have access to all the data immediately otherwise it’ll be chaos.”

Storyboarding

I led a brainstorm session where we storyboarded proposed customer issues and narratives, then putting them into sequences.

These sequences played a key role in later stages of the design and journey mapping process.

Secondary research

Target market research

We came to the conclusion that the core audience consists of heads of departments, CTOs and founders. From market research I was able to identify that this audience is:

  • Many are time poor

  • Concerned with security

  • Have to consider regulatory requirements

  • Have multiple employees that require different levels of access to sensitive materials

  • Require one source of information that can be controlled, that other users have read only access to

  • Some can build technology in house and others prefer to outsource the build

Expanding upon previous secondary research we conducted of the market and it’s competitors, I used that research to conduct a new SWOT analysis of those competitor’s websites and to identify product and customer differentiation, to seize the opportunities available in the marketplace.

I was asked to swap out one of the companies for another as after the previous SWOT analysis, they were deemed as a better fit for this exercise by the CEO.

User need UX feature

Time poor CTAs

Product diagrams/ illustrations

Regulations Clear product definition

Security Easy to see security features

(Customer trust)

Access levels Trial access

Outsourcing Well defined benefits

From the market research and it’s analysis, I could identify the crossovers in what was important to the fintech market and how well it was conveyed with UX design. There was also other secondary research conducted from sources such as Mintel and Euromonitor, collective findings are below.

Key findings

  • A lot of companies were offering controlled access for users, there was not a company that would offer the controlled access of data with a single golden source of information

  • Blockchain was a key trend when it came to creating more secure and decentralized financial offerings

  • API integrations were becoming more standard within fintech in accordance with PSD2, fostering competition and allowing fintechs to offer innovative services which banks felt the need to keep up with

  • With users being very time poor, a lot of companies in the current competitive landscape did not provide clear definitions of the product and referred users to book a call with sales

  • Security and regulatory worries were not addressed by every company, leaving users to figure for themselves how their solutions would fit into the puzzle of their current systems and whether they would address regulatory technological (regtech) needs

  • Cloud technology is on the rise, however a lot of companies are using hybrid tech to reduce risk, with older institutions the hardest to convert due to legacy technology which would need improvement first

Primary research

User interviews

We conducted 2 in-person formal interviews with experts, 6 formal interviews over Teams, and 4 formal interview over the phone. All participants were in the 35-65 age range. The evangelist/expert was selected for his in-depth knowledge of the platform and the particular market, while the others were selected randomly form a pool of 18 interested participants in the CTO and head of department roles, from across the UK. Our CEO sat in for some interviews and submitted questions for the participants during the prep stage.

Needs and values

  • Regulations compliant solutions and automation

  • Collaboration and holistic data management

  • Interdepartmental and departmental technology uptake

  • Getting tech focused people to understand that technology needs to have a business case

Goals

  • Fail fast and test technology quickly

  • Centralised data

  • Technology that is easy to integrate and improves data sharing use cases

  • Immutable data that doesn’t let versioning run wild

Expert interviews

To understand the users within the business case, I conducted an interview with a Head of a Department from a top financial institution, who was an evangelist for the product. They explained their role, what advantages ipushpull posed within their department and how the discovery and approval process had worked for them. We also covered the setbacks faced, such as onboarding users onto new technology who already had specific processes in place.

“I don’t have a lot of time, so I need to be able to quickly see what a technology is about and navigate to read more, before I book a demo. I will try to find information about my specific case and where the tech would fit in, before I move onto another stage.”

The experts highlighted that if there was already a need for a product to solve a specific problem the department was facing then they wouldn’t require convincing of the why, but how well the product will fit into a business case. They have built some solutions for themselves, however if there was a better one out of the box, then the experts would rather assign budget for purchasing and conserve internal resources. This, in essence highlighted where the website would fit into the journey of this user.

“Overall, I have to consider whether the advantages from new technology outweigh the hassle of discovery and onboarding, whether it will fit into current processes.”

Outcomes

After reviewing and analysing the data, I grouped the information into reference points and started putting the information into a story for the personas and reordering the data into empathy maps. Contextualising the information with the size of the company and the job description, I composed the user personas and in collaboration with the C-suite we narrowed it down to the most relevant and important points that the company can focus on.

B2B User Personas & Empathy Maps

Based on research and interviews, Grant was the primary user persona exemplifying the pains, gains and goals of our target B2B user. They would be directly responsible for the research and implementation of the technology.

Our secondary user persona was Daniel, his persona would be directly involved in the sign off of new technology and championing within the organisation.

Research implications

Brand implications

  • Create trust within the website with aspects such as branding and trusted partners

  • Clearly communicate the product functionality and benefits, to give time poor users easily accessible information

  • Add case studies that identify advantages of the product, which fit in with the business cases of users

  • Differentiate the product with ease of access and onboarding

Brand identity: Interesting, bold and collaborative. Transparency and innovation are key to users needs. Disruptive new technology that can be trusted.

Design implications

  • Security and trustworthiness are at the top of the priority list for the personas, key differentiators can be companies that already use ipushpull

  • It saves time and integrates with new and legacy technology - interoperability

  • It needs to be reassuring of regulatory requirements, plus time and cost investment

  • Users need to be able to easily reach their desired goal, so CTAs need an assigned signifying colour

Business goals & features

Using the research findings and outcomes I created a working blueprint for the product’s success

Business Goals

  • Ease of understanding for the value of the solution

  • Trust for the security of the application

  • Communication of mission and values

  • Increase brand awareness among the targeted personas

  • Decrease sales cycle length

  • Grow the customer base and increase WOM marketing

Common Goals

  • Ease of onboarding

  • Create interoperability between applications

  • Case studies across the website that are accessed within the right user flow

  • Increased user acceptance within teams

  • Convey the right level of technical information at the right stage

  • Secure data and privacy

  • Low barrier to entry

User Goals

  • Secure data sharing between users

  • Automate workflows and reduce email

  • Reduce regulatory burden

  • Golden source of data for regulated sharing

  • Quickly trying technology to glean its value to business

  • Compatibility with legacy technology

Technical Requirements

  • Global dropdown navigation menu to show all case studies and make it easier to find the relevant one

  • CTA buttons with an assigned colour across the site

  • Illustrations to make technical knowledge more accessible

  • Pages grouped by both product offering and industry use cases

  • Build up of information hierarchy so at first view it’s easy to understand the product holistically, as you dive deeper, you build your knowledge base and the knowledge is targeted towards your case study

  • Make the website into an informational repository

  • Links to case studies and news articles that underline the product value

Architecture

Sitemap

I created a sitemap using Lucid Chart, it allowed me to build on the technical requirements and establish a hierarchy for the product using a user centric approach, and align it with business objectives. This also helped us establish a roadmap and an understanding of the workload that would be required. From the sitemap we gathered that it would be a big undertaking and we decided to divide it into sprints, which the development team could undertake around other requirements.

User flows

Using the sitemap I created unique user flows with the help of the empathy maps and the personas, in order to understand how users would navigate through the website.

Wireframes & prototypes

Wireframes

I prototyped each screen for the web and mobile versions to understand how the design would work between the two, and to make sure the developers would be able to construct the interaction design and the UI. Liaising directly with the front end dev team allowed me to realise what was possible within the scope of the team and timing wise.

Mid-Fidelity Prototypes

Creating the structural design allowed me to separate it by components and create reusable architecture. In the future, this would save development time and allow other members of the team to imagine content format if they needed to add to the website.

High Fidelity Prototypes

In total I created 20 pages for a variety of devices that all utilised reusable components over a period of a year, and a further 19 pages thereafter. After the redesign of the website, the sales cycle decreased from 2 years to 1.5 years and the number of customers within the financial services industry increased from 1 to 8 institutions over a period of 3 years. I was part of the team from the beginning of the startup phase to the growth stage and continued to expand the site with the expansion of the business.

Below are excerpts of the web and mobile designs.

Usability testing

After the creation of the website I conducted unmoderated online user testing with Hotjar, we had a sample size of 10 participants who were recruited through purposive sampling (direct communication). The sample consisted of 35-65 year old financial services professionals in Head of Department, CTO and department management roles equivalent to HOD.

The study was conducted remotely, by scheduling a time for each participant to complete a series of predetermined tasks via Zoom, making it easier to record the test, conduct a preliminary interview and a debrief.

Goal:

To determine if the redesign of the website conveys the product message

To see how easily the users can complete their tasks

Tasks:

  • 5 second test

  • Navigate to a predetermined solutions page that is relevant to the user (x2)

  • Navigate to a predetermined platform page that is relevant to the user (x2)

  • Navigate to the demo page

Each user performed 5 of 6 tasks

Recommendations:

  • Make the CTA buttons more specific, so that it’s easier to understand what it will do on click

  • Add real-time help or assistant so that you can chat online with them if you need help or information

  • Create a centre with all the content like past webinars, case studies and demo so it’s easier to find the most relevant info to the user

  • Make the demo page more easily available within the website

  • Have the demo page show actual demo of platform instead of contact us form

Insight:

Having added a mega menu, it was very obvious from Hotjar recordings that it was the first port of call for user navigation allowing them to reach their objective in just a fewer clicks. It also made navigation more accessible with more control over how the menu opens and closes

Other Work

IPUSHPULL DESIGN SYSTEM & BRANDING

IPUSHPULL WEB APP

FUND FAST WEB & MOBILE DESIGN