LOYAL3 Analytics Portal
Design Lead

LOYAL3 partners are provided data about their investors through an analytics portal. This consists of roughly 15 different charts ranging from number of investors to geographic and census information to the NPS for that company.

Defining the Product

We started the project off by holding a whiteboard session with key stakeholders at the company who understood what our clients would want. Unfortunately, we didn't have access to potential users, so we relied on the experience and knowledge of members on the team. This whiteboard session defined and prioritized the data that would be important and relevant to both the marketing and investor relations teams at public companies.

We arrived at four main themes:
1) Show retail shareholders are growing over time.
2) Show millennials are a larger percent of investors.
3) Show that LOYAL3 investors are buy and hold shareholders.
4) Show that NPS increases after stock ownership.

Info Architecture & Navigation

I started with creating a sticky note for each chart and began to group them into logical groupings that would form the navigation. I moved to drawing each chart out on paper, lots of paper, to make sure I understood exactly the best way to display it. Once confident I was headed in the right direction, I began making the designs digital. After many reviews and iterations, we finalized the information architecture, interaction design, chart display, and visual design.
Initial Version
The analytics content was broken down into 5 different categories each themed after the project goals.
Iteration
Added the ability for the user to logout and edit the profile information. Moved the primary navigation to a separate line and added useful icons.
Final Version
Simplified the navigation by reorganizing the content into more logical groups that are easier to understand what's contained in them rather than according to our project goals. Allowed us to highlight the most important data - number of investors, number of shares held, and the loyalty rating.

Defining Complex Interactions

Interacting with the map, the map panel, and line graphs involved some complex behaviors that needed to be spec'd out in detail. I documented these interactions to (1) allow myself to properly think through the various states and possibilities and (2) have a deliverable to hand off so others could understand the interactions. You can see the details of each interaction below:

Final Designs

The analytics portal evolved significantly over time after gathering data from potential customers and talks with the internal team. The many rounds of design reviews resulted in countless iterations as we tweaked the design based on changing requirements and new discoveries. Working daily with the developer to define the minute details of the chart behaviors and animations, was a lot of the fun I had with this project.