Re-platforming and rebuilding Securities Services

CAPCO is a global consultancy specialising in the financial services. Upon joining I was given the opportunity to work in Security Services for a tier-1 bank.

Working in Capital Markets is not without it’s challenges. Balancing the complexity of financial data with the simplicity and accessibility required in UX design can be tough. However, despite the challenges it was tremendously rewarding. Working as part of a cross-functional team scattered across London, Hong Kong and China I learnt and laughed a lot.

Context

CAPCO had embarked on a transformation project with a client to re-platform and rebuild their Securities Services Enterprise tools. A decision had been made to rebuild them with Design Thinking at the heart of what they produced. CAPCO were brought onboard to help them achieve this strategic vision and teach every POD about the value of user-centric design.

Team setup
Each UX’er sat within a cross-functional team known as a POD. They would include: Product Owner, Domain expert, BA, Dev and a Designer.

Ways of working
We were empowered to think beyond what was technically feasible, enabling the desired user experience to drive the roadmap rather than technological limitations.

Tools used
Sketch, Invision, Marvel

Key challenges

  • Taking over work from another UX’er

  • Working with PODs who were new to Design Thinking

  • Colleagues were based in multiple timezones: China, Hong Kong, UK

  • Limited access to the end user and unable to conduct user testing

  • Competitive analysis was difficult as access to these types of tools was not publicly available

  • Lack of design system

Delivering new experiences in Transfer Agency

Approach
I stepped into these role after the departure of a predecessor and inherited a trove of insights from numerous workshops that they had led. Building upon this foundation, I guided a cross-functional team comprising Operations, Client Services, Technology and Product through Design Thinking methodologies, infusing the project with a user-centred approach.


The Transfer Agency (TA) POD which was primarily based in Hong Kong were responsible for working on multiple tools to be used by TA teams. These tools included four different Apps and two environments, presenting a complex landscape that required careful consideration.

Deliverables
Upon leaving I had successfully delivered a comprehensive suite of tools to support Transfer Agency:

  • Transaction flows

  • Investor holdings

  • Fund Flows (App to be used in conjunction with another tool within a workspace)

  • Fund Holdings (App to be used in conjunction with another tool within a workspace)

  • An onboarding video tutorial

Methodologies used

  • Lean methodology

  • Desktop research
    - Analysing current tools: identifying what can be reused, what can be redone
    - Referring back to original workshops and identifying what works, pain points and ‘opportunities’
    - Referring back to personas and context of how these tools will be used
    - Researching online for updated patterns and trends (both competitor and other)

  • Facilitating workshops
    - with key stakeholders and presenting weekly design walk-throughs, capturing further requirements

  • Translating complex business requirements into simple designs
    - Workshops with immediate team to discuss problem framing, impact vs effort matrix, creating a backlog of stories for future tranches of work
    - Sketching ideas for team to discuss
    - Cross referencing user-stories with designs
    - Rapid prototyping of ideas
    - Producing pixel perfect wireframes / prototypes and accompanying documentation for Development team

  • Development team
    - Supporting Development team throughout build ensuring UX standards and designs had be built
    - Testing end product for design and accessibility, working with the Development team on fixes before it was pushed on further HSBC and AbilityNet testing

  • Wider design team

  • Regular critiques with wider UX/UI team to ensure consistency in style, build and use of components throughout the project.

  • Work with the wider UX/UI team to build and develop the style guide we had created for this platform.

Challenges

Domain expertise: I had a limited understanding of the information processed by these tools. However, I understood that what truly mattered was creating tools with simple, intuitive interactions and incorporating the key features expected by the end users. Working together with the domain expert we were able to do just this.

Designing new environments: as a team we created a new environment that enabled two tools to interact with each other. As the UX’er my role was to identify how we could best create this environment - as well as explain how it worked to end users.

Lack of design system: although the POD had access to a component system that was used elsewhere in the bank - there was no design system in place specifically for this platform. Identifying this led to our team building out and documenting a design system that would be used by all teams.

Reimagining Market Insights

As the UX Designer on this POD I led the transformative project to redesign the news concept, creating personalised experiences that incorporated the latest insights on reading patterns, imagery and searchable content that would engage our clients.

Approach
To kickstart the project I organised a number of remote workshops and discovered that clients not only desired curated news content but also craved the ability to choose and personalise the information that was most relevant to them, laying a strong foundation for our design approach.

Driven by these insights I designed a market insights App that delivered a seamless user experience with personalised and relevant news content. We also curated a comprehensive list of features that would elevate the App’s performance and ensure a best-in-class experience for our clients.

Deliverables

  • Rolling news site: I developed a cutting edge rolling news site integrating Thought Leadership articles as well as market insights. This comprehensive platform ensured our clients had up-to-the-date info at their fingertips, empowering them to make informed decisions.

  • Enhanced search functionality: To enhance usability I designed an easily searchable interface enabling clients to swiftly find the the news content that mattered most to them. By streamlining the search experience we minimised effort and maximised efficiency.

  • Personalised notifications: to further personalise the news experience I implemented a feature that allowed client to opt-in for notifications and emails tailored to the markets the were interested in. This customisation ensured that our clients received timely updates and relevant information.

  • Seamless sharing capabilities that encouraged a culture of knowledge exchange, we promoted engagement and facilitated meaningful discussions.

  • Redesigned email communications: I revamped the emails sent to clients ensuring a visually appealing and user-friendly design.

  • International Public Holidays calendar: developed to enable our clients to stay informed about countries currently observing holidays. This feature facilitated effective planning and ensured clients were aware of potential market impacts.

    Headline widget design: This provided clients with quick access to crucial information, keeping them informed around the clock.

Methodologies used

  • Agile methodology

  • Desktop research
    - Analysing current tools: identifying what can be reused, what can be redone
    - Referring back to original workshops and identifying what works, pain points and ‘opportunities’
    - Referring back to personas and context of how these tools will be used
    - Researching online for updated patterns and trends (both competitor and other)

  • Leading workshops
    - with key stakeholders - capturing requirements, design walk-throughs

  • Translating complex business requirements into simple designs
    - Workshops with immediate team to discuss problem framing, impact vs effort matrix, creating a backlog of stories for future tranches of work
    - Contextual enquiry
    - Literature review
    - Sketching ideas for team to discuss
    - Jobs to be done / Journey mapping
    - Rapid prototyping of ideas
    - Producing pixel perfect wireframes / prototypes and accompanying documentation for Development team
    - Supporting Development team throughout build ensuring UX standards and designs had be built
    - Testing end product for design and accessibility, working with the Development team on fixes before it was pushed on further HSBC and AbilityNet testing

  • Regular critiques with wider UX/UI team to ensure consistency in style, build and use of components throughout the project.

  • Work with the wider UX/UI team to build and develop the style guide we had created for this platform.

Challenges

Balancing stakeholder requirements with client needs

  • Working with stakeholders unschooled in Design Thinking

  • Some of the features we wanted to introduce were limited by the tech on offer.

  • Lack of universal design system

The App store

The concept for this store had been created some years ago when CAPCO first starting working with the client. The UX’ers at that time had held workshops with end-users and left behind a full set of designs.

The key stakeholders were attached to these designs and sensitive to the time already spent creating them. My challenge was to deliver designs with a similar look and feel but that had been updated to take into account where we were now.

Approach
Working with a POD newly formed specifically for this project I immediately set about understanding the designs built by the previous UX’er, identifying their influences and thinking that sat behind them.

Thorough documentation left behind ensured I could reference the workshops that had taken place years earlier and understand the wants and needs of the end users at that time.

In subsequent workshops with my team I explained these reasonings and made sure we all shared the same understandings.

Design
Armed with these insights I updated the designs, crafted mockups and prototypes for the App store. Weekly presentations to key stakeholders ensured prompt feedback which I was able to incorporate into the designs. This iterative design process guaranteed that the final product met the diverse needs and preferences of our users.

Deliverables
Building upon our design work we successfully developed a minimum viable product (MVP) of the App store. In addition, we identified a roadmap of key features to be added in subsequent sprints, ensuring continuous enhancement and refinement.

Methodologies used

  • Desktop research
    -Competitor research: identifying what App stores are out there; identifying features we may be able to make use of.
    - Referring back to personas and context of how this App will be used
    - Researching online for updated patterns and trends (both competitor and other)

  • Facilitating workshops
    - with key stakeholders - identifying key requirements, design walk-throughs
    - with immediate team to identify MVP features that could be added to the backlog
    - Personas & Jobs to be Done: prevented mission creep by returning all feature design back to who would be using this app and when.

  • Sketching ideas for team to discuss

  • User flow - clearing

  • Visual design - Worked on multiple concepts
    - Rapid wire framing and then prototyping of ideas
    - Producing pixel perfect wireframes / prototypes and accompanying documentation for Development team

  • Stakeholder management - this became a political hot topic between various different departments in HSBC

  • Regular critiques with wider UX/UI team to ensure consistency in style, build and use of components throughout the project.

  • Work with the wider UX/UI team to build and develop the style guide we had created for this platform.

Challenges

  • Old designs: the stakeholders wanted the designs brought to life. They were some two years old and designed on a number of assumptions. My challenge was to maintain the look and feel of these while updating them in line with where the platform was at that time.

  • Mission creep: as this was a newly formed team everyone had ideas on how this tool could be improved

  • Visual language: most of the tools within the store looked the same ie, Dashboard, how could we visually differentiate between Apps?

  • Lack of content: the original designs were based on assumption. At this actual point we were lacking the full range of tools to display

  • Tutorials: there were many updated tools on display, if we were letting clients preview them how could we ensure they understood their full power?

  • Permissions: different clients had varying levels of permissions to view the tools. We needed to ensure a tailored experience for every client.

Lessons learnt… Designing within constraint

As designers we’re well versed in the line ‘designing within constraint’. But what does this actually mean?

Every organisation, every project comes with it’s own set of constraints that we do our best to work within. For me this is where both skills and experience come into play. Whilst fully aware of the ideal Double Diamond methodology: Discover, Define, Design and Develop we’re not always in a position to follow through. This is where the experience of a Senior Designer can come into play. With experience you come to understand that there is no one single design process - but a toolbox of methods that can be called upon depending on what you wish to uncover.

Before any of the PODs moved into Design and Build the design team held multiple workshops with end users enabling them to create the necessary personas and deep dive into uncovering the problems and highlighting opportunities with the current tools. All this work was thoroughly documented and archived so that it could be accessed and reviewed at any time.

As the lead UX’er for each of my PODs I regularly made use of the methodologies below, amongst others, to ensure that a user-centric approach was adopted at all times and I was able to bring my teams along with me rather than simply 'present’ the designs for them to build.

Personas
Who are we designing for? Every new tool and iteration should be connected to these people.

Domain experts
Working in Securities Services is complex. I was not expected to fully understand the complicated calculations these tools were making. However, each POD would have an expert who had worked in this field who was able to explain what they needed and how it needed to work. Along with input from the BA (who wrote the specific stories) I was able to rapidly design and update tools that would first need to be approved by the expert.

Problem statements
Working within PODs mission creep is common. Each team was staffed by motivated professionals. I had to ensure that we stuck to the original problem statement so that we were able to produce good work within our timeframes.

Research
UX is a science not a feeling. So I ensured that I was able to justify every component and placement of with solid research. As well as ‘defending my designs’ this proved to be of great use in 'teaching’ the PODs about Design Thinking.

Competitor and comparator analysis
What had gone before? We don’t always have to re-invent the wheel. It’s often worth keeping what works. Also, it can lead to less ‘re-education’ of the users. Familiarity often encourages confidence. We should remember that the people before us were intelligent also. That said, is there a better way of doing the same thing?

Research, research, research…

Prototyping
An extremely powerful tool to demonstrate how the experience will be for the end user. The stakeholders can ‘feel’ the experience before time and effort is put into build.

Designing for Accessibility / Inclusivity
By designing for the widest range of people you design for everyone. We ensured that every one of our designs passed WCAG AAA standards - and each tool was finally checked by AbilityNet.

UX review and critique
As the CAPCO UX team we would review and critique each others work on a regular basis, ensuring that our designs were in-synch and that we’d produced the best work.

Create detailed UI Specs
Working with teams who had not worked with design before we devised a way of handing over our work to ensure they built the tool exactly as we had designed. This also had a dual purpose of ensuring the different PODs built the tools similarly ie, Padding, font size etc…

Testing built tool
After the tool had been built by the Dev team we would then test it against the designs and confirm that all the accessibility standards had been incorporated into the build.

Next

Vulnerable customers