FIS one foundational design system

for FIS

A scalable and modular design system and detailed documentation for a financial services provider.

Project: FIS is an international provider of financial services technology and outsourcing services for small and medium sized banks. Frog worked on the foundational design system which over multiple projects would help create a holistic system of products and a unified design approach for the whole FIS offerings. This first project was the first stab at setting up an interaction design and visual design system.

Process: We started with a four week research phase, conducting interviews around the US at regional small-med banks, front and back offices. In collaboration with a design researcher, I led interviews and synthesized findings into the insights that formed the basis for our product vision. Once product design began, we designed and prioritized our sprints based onbased on user insights, business needs and market requirements.

My role and responsibilities: I was the principle designer on this 4 month project. With help from an oversight CD and a design technologist partner, I ran a 6 person sprint team of designers and technologists. I also took on product management responsibilities, helping audit existing systems, creating and managing the initial backlog. Ran workshops with 30 stakeholders to review and prioritize user stories for first sprints.

I also ran user testing in between design sprints, synthesized learnings and helped the team make several enhancements.

Project Highlights

1. User research for product discovery

In collaboration with a design researcher, we ran user interviews for different types of bank employees, back office, branch and mobile bankers. As most of the design team could not participate in the research process, I extracted some tangible insights and observations for the team to understand the full context of variety of users and start concepting against actual user needs. Our biggest challenge was designing for the variety of contexts, for highly distracted users and often disrupted work flows where they had to multi task using dozens of software at a time. Our FIS ONE vision was to start laying the ground work for unifying the systems, ui and structure.

Screen Shot 2018-11-12 at 8.45.47 PM.png

Screen Shot 2018-11-12 at 8.43.43 PM.png

Screen Shot 2018-11-12 at 8.44.10 PM.png

Screen Shot 2018-11-12 at 8.43.55 PM.png

2. Kick starting a design system

I started by documenting the Universe of users and FIS & 3rd party applications around them. This helped us get a larger context and start architect the system against the real world. We then defined some tactical design principles for the interface and guidelines to design against.

I first started defining layers of the interface, canvas, modals etc. the main spaces that users interact in.

For each sprint we detailed epics into primary user stories. Created flows and scenarios to keep the user perspective in plain sight for internal team and clients.

Screen Shot 2018-11-12 at 8.51.01 PM.png

Screen Shot 2018-11-12 at 8.53.02 PM.png

Screen Shot 2018-11-12 at 8.50.44 PM.png

Screen Shot 2018-11-12 at 8.51.58 PM.png

Screen Shot 2018-11-12 at 8.51.42 PM.png

Screen Shot 2018-11-12 at 8.52.17 PM.png

Screen Shot 2018-11-12 at 8.53.53 PM.png

Screen Shot 2018-11-12 at 8.54.14 PM.png

Screen Shot 2018-09-18 at 11.38.24 PM.png

Screen Shot 2018-09-18 at 11.38.06 PM.png

Screen Shot 2018-09-18 at 11.38.01 PM.png

Screen Shot 2018-09-18 at 11.37.38 PM.png

Screen Shot 2018-09-18 at 11.37.15 PM.png

Screen Shot 2018-09-18 at 11.36.59 PM.png

Screen Shot 2018-09-18 at 11.36.54 PM.png

Part of the high level final documentation.

Example user work flow and interface improvement

This model was one of the major improvements that was long due for the bankers creating new accounts and loan processing. Bankers found so many work arounds for software and processes that did not support how they actually had to work with clients. Especially for more complex products and relationships for small businesses where there were multiple clients involved, creation happened through multiple calls and face-to-face meeting over a days or even weeks. Form structures that had lateral navigation did not allow for a holistic view and made bankers’ job much harder. We proposed a solution that used a hub model where each step was isolated into its own flow and got summarized to let all banker working on it simultaneously to understand the status. During evaluative research, bankers responded with excitement and clients decided to push this initial model through mrs rounds of research and use it across different sections.