JP Morgan

American depositary receipt (ADR) program website

The research for this project started with a visit at the JP Morgan facility with a handful of stakeholders that had a valued interest in the ADR program. After a full day of whiteboarding and picking their brains for what they imagined would be a successful product we came back with personas, competitve analysis, preferred data returns, and project timelines.

With a full creative brief to work from we began with the overall current site structure and designed a new approach that simplified the user flow into a more streamlined approached.

For this project we are working with an Agile Methodology with remote development teams from Mexico and Guatemala. The project owner is remote as well in the US. Our daily communication is through Zoom and Microsoft Teams.

For the kick-off meeting with the development team we introduced the proposed site structure and for reference the existing site structure. Once we had buy in and an overall understanding from the development team we started the design process for the wireframes.

The ADR stakeholders didn't want us to go through their marketing team for styleguides and patterns feeling that it would hold up the process. That was a glitch that we had to deal with by researching JP Morgan sites and pulling colors and patterns to create our own style guide that we could work from and have as a deliverable for the development team.

The main focus of the site is the DR Directory and DR Profile. The purpose of the DR Directory is to give the user the ability to browse ADR based on a filtering component. Once the user finds the ADR that interests them they are taken to a detailed DR Profile that holds all the data associated for that ADR program.

Early in the development process we introduced a document for the development team that broke down the pages into components that they then wrote their sprint stories from. Having the pages broken down into components made it easier to communicate and follow the development process.

The implementation phase started out by delivering interactive specifications using Sketch Measure. The problem we ran into with delivering specs from Sketch was that the development team had a hard time interacting within both the documentation for the intended behavior and interaction and the interactive specs from Sketch. So, we started delivering the documentation as one document with intended behavior and interaction while referencing the styleguide.