Regulation Readiness

•

Project Overview

Regulation Readiness is a centralized landing page experience that showcases BNY Mellon's deep expertise on regulatory issues, while providing clients with a consistent destination for key information on regulations that may impact their business. The design suggests the notion of a road on which clients can navigate forwards or backwards through the regulatory landscape to interact with location markers that represent various rules across regions.

Click Here to Try the Prototype

I was introduced to the project during my first week at the organization, when it was brought to my attention that the design was not mobile-friendly. In fact, the system required the user to rotate his or her device in order for the experience to work at all. My goal was to deliver a responsive version of the desktop view that remained true to the concept of travel and navigation.

The original design of Regulation Readiness had a fatal flaw — it required the user to rotate his or her device to interact with the timeline on a mobile device. This was not a good user experience.

Strategy

Creating a responsive solution was quite challenging. For one – I was a new employee who was trying to understand the organization; two – I had little insight into the project's requirements and had scarce opportunity to catch up; and three – the core team was expecting to see an immediate impact from their creative lead (me).

Without guidelines or specifications, developing a solution required some reverse engineering. I broke the whole of the design into its parts so that I could better understand how the system was organized to deliver information to the user. I flattened the design, mapped out existing data points, and soon realized that I was being asked to create a tiny, professional version of one of my favorite games — Guitar Hero.

A reverse engineer of the desktop solution helped uncover a mental model that would inform my approach to a responsive solution. Regulation Readiness was the Guitar Hero of finance, and this was my guitar solo.

Wireframes

Once I identified the model, I had to learn how to play the chords. I tested out whether or not there was some inherent design solution present in the blueprint I had developed. The flat design of the road felt similar to an overhead satellite view of a map, however, the circular location markers were too small and didn't reveal enough information for them to be truly useful or engaging.

My first attempt at designing a responsive solution borrowed heavily from the blueprint.

My second attempt was more promising. I moved away from an overhead satellite view to a more eye-level, steering wheel approach. The user would be able to navigate through the regulatory landscape by using his or her thumb to quickly jog through data points. This UX had a lot of stakeholder buy-in, but the concern was that the interface might not be intuitive enough for the audience.

The next round of the mobile UX had legs, as it began to scale idea of navigation into this steering wheel approach.

Third time is a charm, as they say. I pivoted to a more traditional timeline, where the user could drag a marker within a lane to learn more about a regulation. I also provided non-linear navigation to access specific data more easily. Although the steering wheel felt a bit more dynamic, the lane design was friendlier to a wider range of devices, including tablets. The goal here was progressive enhancement — if I could get this to work on a iPhone, I could get this to work on the much larger iPad.

Round 3 presented a workable solution. It kept to the overall concept of navigating through time. It was also more developer-friendly and was designed to driven by BNY Mellon's enterprise content management system.

Visual Designs

The visual design process was very similar to the wire-framing exercise. The project's quick turnaround demanded that I work in high fidelity from the very start. Looking at the sheer number of art boards gives you a sense of how complex and rewarding this project was to both me and the client.