Case Study: Investment Finance Design

Integrating a holistic design practice for an underserved industry

Carlo Llacar
Oct 17, 2019 · 23 min read

INTRODUCTION Normally, I would try to focus at least a few of my skills into more concentrated efforts, but in the case of working at Research Affiliates as a design consultant, I was able to use the full breadth of my skillset — which is rare in a client setting. It’s important how the different disciplines work in conjunction, together and separate, which is just as important than the projects themselves. FYI, working in finance is also rare in my situation as it is not my preferred industry vertical of choice, but it is a very interesting one. This case study will attempt to broadly describe my 1.5 year long experience as briefly as I can, from digital product design, to data visualization, to branding, and other skills I’ve gained and applied along the way.

To skip to the deliverables, read the section below called Solutions and Outcomes.

About the client

Normally some folks would not describe Research Affiliates (RA) as a FinTech company just because it is a data-driven finance firm that just happens to use technology. They are plainly a research firm, as their name suggests. They have actually been around longer than most of the FinTech companies existing today.

I describe Research Affiliates as a finance-investment research firm disguised as an academic one. They study global and local markets in macro-economic frameworks that serve best for investors and financial advisors, which in turn, create strategies and profitable investing packages as their business model. In fact, Cam Harvey, one of the partners and senior advisors at RA, was a pioneer in the discovery of the yield curve inversion, a macro-economic chart which to some, is now relevant because of its relationship to recessions and bond markets.[1] So, armed with business intelligence to foresee the future, they devise the paths that need to be secured for their partners and clients to ensure profit and gain.

My Role

I was initially hired to consult on digital product design within a loosely-named marketing department, but over time, it expanded into branding, branded illustrations (which is also called key-art design), UX research, visual interface design, interaction design, information architecture, design strategy, art direction, even created visuals for video content (e.g. title design, and animation). At the end of my tenure, my role eventually became a vague-ish Design Director, as opposed to being a lead or a senior designer which was my intended title (to be fair, being a consultant encompasses all of that anyway), but I will explain why that came to be in the Outcomes section.

The role eventually morphed into part marketing, part product design, and part strategy, so yes, it is the multiple-hats scenario, because frankly, we did operate like a start-up. As a 6-person department within a 100-person firm, we had almost complete control of visuals, content, and perception. As a caveat, I will not place any judgement values on these approaches because honestly, although it may be unorthodox, it just worked for me. (It’s actually common in a lot of startups).

If you placed any other lesser-skilled person in my position, I can guesstimate that there would be a high probability for failure. That person will had to have the endurance of an agency veteran, and the critical thinking of a boutique consulting studio. They (and I) were thankful that I had those experiences in my pocket. Surprisingly with all of those responsibilities, I was not over-worked, and rarely worked overtime. Work-life balance was real, and I just happen to think and work faster within the allotted time that I had: 40 hours, 9-to-5 (no more, no less — although with a few exceptions). Even with that structure of time, we accomplished a lot.

The org likes to operate lean and flat (like many tech startups). Even though that concept seems normal to designers like me, it is completely unorthodox for this industry. Minus the dress-code (they eventually went semi-casual at the end of my tenure), RA had many characteristics of a modern-startup (free lunches, unlimited vacation, etc.) but they tried to stay away from being associated as a startup, per sé. Something I admired about their work culture is that they are really employee-centered. I won’t get into much of those details because I’m here to talk about the work, which of course, has its own challenges, of having design processes and methodology being regularly accepted — but what org doesn’t? The fun part is building it.

Challenges

To save you some time, I will briefly list them out and you can read under Solutions and Outcomes to see how they all played and intermixed with one another that truly made this role unique and special:

  • How to create a new design system from scratch, which includes introducing design processes into collateral departments like IT (which housed the web development team), and research authors (the content development team — which typically have nothing to do with the design team)
  • A global brand re-factoring and analysis
  • Refactoring dated digital products and working within a challenging CMS (content management system)
  • Designing sub-brands under the parent brand
  • How to create on-brand key-art and other visual content for newsfeeds and other content-channels
  • De-siloing a work environment so that collaboration happens more often
  • To understand and design for a completely new audience (for me): such as investors, financial advisors, journalists, and other economic-related demography (e.g. academics and researchers)
  • Establishing a design culture within finance culture

Solutions

In this section, I will attempt to go into detail of my projects and initiatives, while the next section called Outcomes, will expound on how it was received in relation to its execution.

I. The creation of a new design system

An under-developed version was lingering when I first came on, and it was initially called WDS (Web Design Standards), which then evolved into RADS (The Research Affiliates Design System).

Embracing slow systems

This was quite an undertaking as it requires a global brand analysis and visual audit of every element, digital and physical. The last brand update was back in 2008, and even though brand principles would tell us a good logo is successful when it doesn’t need to change, what modern best practices tell us that yes, good logos don’t necessarily have to change, but they must adapt. They reach a point of contention where the context (the environment) may or may not match its logo application (its value intentions). In this case, the original logo still had some legs to it, because frankly, this is the finance industry. Nothing needs to move or look fast, only the money does. There is a murmur of an idea that if things change too much in this industry, it is regarded as untrustworthy. The value of trust is adamant within the world of finance. When dealing with lots of money, we cannot break down the biggest pillar that this audience requires. So, things have to change slowly over time to gain the trust of its elders and newcomers alike. This realization solidified my thoughts into Slow Philosophy, which I will write about in another essay, but designing for this condition is just as important as designing for fast culture. The global audience at this time is now realizing the effects of Silicon Valley’s ‘move fast and break things’ mantra, because we now know that things can definitely break, and take years to fix. Even though I wasn’t able to design a completely revolutionary design system during my tenure, I was able to plant the seeds.

On the technical side, we had to consider design elements that had to be outfitted for Adobe’s CMS (called AEM, or the Adobe Experience Manager) which was frankly, a challenge in itself. It limited potential for innovative interaction, layout and experiences, so all design artifacts had to be designed for this environment. In short, many workarounds were based on hacking (sub-par at most) the pre-determined CSS and HTML styles through AEM’s modals. I may explore this thought further in the lens of information architecture or CMS systems, but it does definitely warrant a discussion on technical debt.

For this design system, we mainly focused on desktop and tablet browser experiences, not necessarily mobile. Of course, when I designed new branded elements, I made sure it was compatible for growth (e.g. mobile), so if RA had any plans to design for native apps, it would’ve been able to scale if they decided to in the future.

The first task was to address design debt. I also want to emphasize that this is different from technical debt. As a creative team, using design debt as a term frames it as a set of challenges, so that we can attack them as solutions. It then becomes a holistic mindset (e.g. design thinking), rather than just throwing technology at it, which sometimes exacerbates technical debt (thus creating a vicious cycle). I created the matrix above to see where we as a creative team stand, as well as the projects to be analyzed further for ROI.

The initial audit had brought these issues up, but I should warn for certain teams, it could be a prickly subject because it tends to highlight flaws and problems, and if not brought up gently, it can lead to disastrous shaming (or worse, job loss). Thankfully, no jobs were lost, only time (although it was productive!). So, there were a few easy tasks to get the digital environment up to speed. The first is creating assets of the logo, logotypes and other elements of the identity system to make it ready for the digital screen. There were only two iterations of the logo, and about three color swatches. Frankly, that is an optimal situation rather than having to clamp down from a bloated system like most re-brands nowadays. In this case, we can build up, and it was easier to imagine the possibilities instead of being bogged down, getting frustrated by over-thinking which assets to eliminate. Although there was an exception with previous CSS rules and elements which were excessive at one point.

Establishing a coherent visual design language

It meant updating typographic systems, eliminating excess elements, and simplifying said palettes, icons, CSS rules, et cetera…across the board. Taking signals from earlier, there needs to be a gentle way of gathering and reducing assets, because it’s true: feelings can get hurt. You may realize that this is not just a technical case study but a slightly political one (not in the traditional sense, but as in work politics). Skills in strategy are not just important for our users, it’s important within the business as well. Anyway, once mental models were aligned with the creative workers, we then wrote down a few design and brand principles, and were able to build a solid foundation for growth.

Simplicity is always key, and being careful not to over-indulge by adding too many colors or rules, so developing a palette that is being used for both the key-art (illustrations for research papers and other content channels) as well as brand applications was a tricky balance. We want to stand out, but not do it too much so that we don’t become the neglected step child (no offense to step children). This is almost contrary to the company’s founder, because he is typically perceived as eccentric, and a contrarian in the investment world (in their terms, it’s called being a bear, as opposed to being a bull — we even have a basketball and soccer team called the Permabears). But to clarify, even though the company seems to stand out in my ways, (small but powerful; contrarian, not status quo), it was important that the aesthetic shouldn’t be overly disruptive, we needed to remind the audience about trust again. A classic look (aka traditional), or at least a nod to it, gives a subtext of being long established, much like Wells Fargo, AIG, Bank of America typically does. This is a debatable notion in my opinion, but we decided as a team that classic-but-modern was the way forward. Boom. Decision made. Trust retained.

Although the typographic system was a tricky issue because we were juggling between rules set for the print medium and the digital environment. Anybody that has dealt with licensing issues for web fonts know what this feels like.

Once the design language was settled, the actual language that governed this system had to be written, literally. A design system requires a set of rules, and writing rules requires a coherent language. It’s almost like being a lawyer, but as a designer. In this environment, I was handed complete authorship of all policy writing, and thankfully there was a general consensus of agreement to the rules I suggested.

Implementing best practices eased any reluctance due to my position as “the new guy”, so using previously existing language was helpful to win over skeptical onlookers. It was just then all a matter of synthesizing all the policies and artifacts that suited this particular environment, making sure it was understandable to the layman, and to the general audience of researchers, authors, finance folks, and other stakeholders — not just the marketing and design department.

I don’t specialize in information architecture (although it helps to understand it a bit), there seemed to be no problem from inheriting and using the previously existing IA. Designing for a web-based environment was relatively simple. No huge backend integration was needed, and a lot of the major data-processing for their investment tools like Smart Beta Interactive and Asset Allocation Interactive was handled by a subsidiary agency. What was useful although, was organizing naming conventions and file structures so that scaling and adding new elements would be relatively easy. This was in collaboration with the IT/dev department so that boundaries stayed intact.


new keyart style
keyart in collateral documents
keyart in research papers
keyart in search results
keyart in context

Strong art direction. Branded key-art, or illustration in general is thought of as a last look, not considered anything more than just decorative head pieces for content. I have a strong opinion on this especially because art and image-making was my background, and there are loads of data and analysis how thumbnail design and key-art affect perception, retention rates, customer conversion, etc.[3] Of course, in the ad industry this is well known, (strong images is their pillar) but in under-served in-house marketing and design departments, it takes a bit of convincing. Treating key-art like a branded element like a logo would, or a color field on a poster or email should be just as equal. Every color, concept and intention must be thought through, or the link in the branding chain fails. It’s easy to design more and more, using maximalism as a signifier of design maturation, but that is not always the case. It’s usually the opposite. ‘Less is more’, still holds true does it not? Strong concepts with a simple color field and a strong foreground object, over time in a series, is as effective a brand strategy than making complex individual art would. Having a strong in-house department with consistent designers and creatives for an extended period of time can solve this.


The How-To-Invest desktop interface

II. Digital product design for investors, financial advisors, and investment enthusiasts.

There were a few initiatives that we experimented with, while some stayed in the incubation stage, one product was released onto the public, and it was called HTI (short for How To Invest).

How To Invest

This was a relatively simple service that helped acculturate novice and experienced investors in the world of mutual funds and ETFs.

Based on Research Affiliates decades of research and strategy, this online service provided asset classes, strategy types, and market exposures to the general public either as a reference, or as pathways to RA’s investment strategies. We designed it to be accessible for both desktop and mobile experiences so that it organized over 45 funds and strategies to be easily filtered for each user’s needs based on their location and preference.

I mainly served as a UI designer for this project, although provided some experiential feedback on its last round of revisions. On that regard, it was a relatively easy problem to solve as it required only a simple organization of data and typography. A card metaphor utilized in horizontal divs.

It was easy to navigate, large enough to read for our older users (average age is 43 and above), and responsive (mobile-friendly). Although I should add in hindsight, that it probably needed some more visual cues to help the user understand what the funds or the other line items actually mean, but the initial assumption was that the typical user would have SOME basic knowledge about investment. The actual ‘How To Invest’ intention was to help bridge users from seeking fund-providers to channel traffic to their partners (like PIMCO). There is unfortunately, no early hand-holding on HOW to actually educate users on investment strategies like a children’s storybook, but I guess that’s what resources like Investopedia is for (and calling their sales rep).

One challenge we had early on was the display of stock tickers. Now, here’s a prickly situation working with the SEC (The U.S. Security Exchange Commission), is that firms like RA must be neutral or give equal treatment to all fund providers. I don’t know the law exactly, but in short, the SEC’s job is to protect investors, so research firms that provide a wealth of investment knowledge cannot express favoritism to any fund provider, especially in a transactional nature. At first, the display of tickers was nil (or no go), and had to use other means of expressing a fund such as 15 word headlines — which dramatically changes the display format. It was initially these large text blocks that was too bulky and cumbersome to be displayed elegantly in such a referential manner. Eventually this law, for some reason, had loosened up, and the display of stock tickers was approved. Without this simple approval of this element, in my opinion, HTI would not have launched and gain the well-reception it came with. It’s still being used to this day by financial advisors and investors alike.

If you like to check it out yourself, go to www.researchaffiliates.com/HTI


III. Branding and sub-branding

The general notion of branding should be in every designer’s back pocket — in-house especially. It’s more than just making sure that the logo is the right size or position on the page, or if the colors are the right PMS swatch — it’s trying to understand your organization’s soul, and then articulating that through messaging and tangible outcomes. So, how does one output the company’s “soul” through a subsidiary brand and illustration for their research papers? I’ll talk it through the projects below.

Environmental, Social, Governance

Off the bat, I have a special place in my heart for social-impact initiatives so the drive to make this as authentic and to be executed right was very important to me. Environmental Social Governance (also known as ESG), is one of RA’s premiere investing strategies for investors that are factoring companies embracing corporate diversity, environmental costs, employee-centered policies, and many other “mindful” corporate activities. It is a fairly new strategy in terms of being more forthright and discernible within the investment world, especially when climate change, inequality, and other social-risks are more pronounced in our culture. It’s interesting that even investors know how money institutions are affected by external and environmental factors, they have to adapt — by learning to profit from it (that’s another discussion not appropriate for this paper, but it is not without merit). How did I translate all of this into visual artifacts? Read more below.

all animation by yours truly

Identity Design. Being modular, scalable, and utilitarian is a common foundation in my own design principles, and so merging that with a card-like aesthetic that seems to shuffle like cards on a deck was, in my opinion, an appropriate vehicle to highlight different ESG entities as no pillar is more important than the other. Social factors are just as equal to environmental, governance factors, and vice versa. Having just one graphic symbol to visualize a complex system was challenging, and probably not conducive to a modular presentation. It had to be understated, and utilitarian, using type within a simple container that would expand and contract to showcase symbols associated with each respective entity. It also had to work in conjunction with its parent brand to be juxtaposed next to each other, trying not to cancel each other out but especially must compliment, as sub-brands should. The child should not overpower the parent’s visual footing (usually). I’ve also integrated the ‘fin’ mark from RA’s original mark to be integrated within the ESG logotype to serve as an anchor, a ‘call-back’ if you will, to the parent logo. It akins to official framing of special objects or documentation. Both the fin and rectangular container are modular in that they can adapt to any page, any screen, and any context it applies itself in.

RA Symposium

This annual project really tested my endurance and agility because at one point, I was the only designer. To design a 3-day conference for investors and financial advisors for at least 65% of the allotted design schedule took a toll on my well-being, but fortunately it was a success. RA hosts this annual event inviting advisors, financial advisors, economics professors, and anyone within the investment world sphere for free, to talk about strategies, signal analysis, market outlooks, and/or even discussing our authors’ research papers.

It’s a full-on experiential event so the deliverables I had to produce were deep and wide. Thankfully, I was able to adapt some of the previous year’s assets such as the conference booklet and map, and other collateral items such as name badges and environmental signages. I was able to adapt easily due to the design system of this brand that I established the previous year. Systems need repeatable and modular grid structures so that it can evolve elegantly over time. What actually took most of the time were the interactive pages, and the animated content for the stage (which includes sound design as well!). Despite a heavily stacked workload, it was a lot of fun.

Shifting modes between working sessions was as common as breathing in a span of a day: going from content strategy to designing interfaces to animating motion graphics, all the while putting out fires designing for non-event projects (illustration design was a frequent task because we produced research papers as much as Game of Thrones puts out episodes every season). While we eventually hired some more help, I was roughly designing 75–80% of the assets throughout the length of the 4-month schedule. All of that pre-production work for three days of conferencing hoo baloo.

Essentially, the deliverables were: branding quarter-sized 14-page attendee booklets, a conference landing page complete with speaker bios and content, animated video trailers, high-quality animated stage videos and presentation design, map design, information design, sound design, surveys, a completely updated brand look-and-feel…and that’s pre and mid-event. Post-event deliverables included video-presentation capsules (branded presentation videos captured during the event so that they’re produced as downloadable, informational content). I had pretty much been creative, content, and design lead throughout this whole process. I know it sounds like a lot, that I’m just padding my resumé with jargon you may not comprehend, but I promise you I did all those things and then some. I was able to do all these things because I had experience designing and making for these things in the past, directly and indirectly.

The capability that surprised my team the most was the stage and sound design — music and sound was needed for all the animated and video content both on stage and on-line, so my experiences in DJing and music-event producing helped in that regard. Without getting into it, in my previous life as a DJ, I was very familiar with producing professional audio and the nuances of event design. Conferences are essentially live-experiential design projects. Stage-lighting, choreographed cues, visual presentation, and most of all, entertainment value. What makes a conference about finance investment fun and interesting? That’s where I came to disrupt — and no disrespect to the previous designers, but I was able to bring the polish and conceptuality to a ‘tee’. Granted, there were a few things I could’ve done better with more time, but historically, I usually work with what I’ve got.

If you’re interested in the Symposium 2019 content, you can register and check it out here


Outcomes & Takeaways

So by now you must have discovered 75% of the work that I’ve worked on, leaving out the seemingly tiny, what I call “low-value”[2] work that glues all this stuff together. Painting a picture of what all this means is the true outcome, not just the laundry-list of items to check in a survey. Avoiding elaboration, I will try to describe some extrinsic realizations that helped me throughout this experience.

Design Directorship

This was the goal from the very beginning. I kept asking myself how I could refine the design process on a company-wide level, while being an evangelist for best practices.

In some cases my proposals and suggestions were sometimes overkill or unnecessary in retrospect. Even integrating from my startup experiences like KPIs, Agile and Design Thinking were sometimes too much for a marketing-centric department. Although to my benefit, they were going through a transition integrating digital products into their workflow. Once they assimilated the two worlds, the processes I hinted at made a bit of sense, trying to stir in the brand soup of success.

Rebel designer Mike Monteiro once quipped that good product design is actually good brand design, and that brand design actually does much of the leg work in marketing. Typical outreach activities like email newsletters, social ads, or other promotional approaches is really unnecessary ‘low-value’[2] work. They are successful on occasion, but in this case, spending the extra time and effort to do so was, in my opinion, inefficient. In the case of promoting research papers although, outreach was definitely necessary. I may be biased because I am a product guy, ironic since my career beginnings came from marketing, but in a way I rebelled by extrapolating the only good tools from that discipline which are: data aggregation, and analytics. Studying users and customers for feedback is essential to growth. In-house design or marketing does not typically have the foresight to integrate good product practices, although a C-level business development officer might. For a firm operating lean, they won’t have the time to explore them. Luckily, with the limited knowledge and time that I had, I was able to evangelize those thoughts by using fireside chats.

Collaboration is really important to any design environment, and being the ambivert that I am, I secretly can’t stand working alone for long periods of time. Dialogue is essential, and my ego gets fragile without peers. Having bi-weekly open-themed discussions and presentations of discovery and best practices, new technology, podcast stannings, and cultural research (memes included) proved to be more beneficial than a top-down approach.

Lateral discussions, proving that the org is truly flat (to a degree) worked out alright. This was the answer to de-siloing the work processes that flat orgs sometimes suffer from. When everyone’s a unicorn operating their own projects, silo’d work environments tend to arise. Scheduling fireside chats with the team or even other departments may be fruitful by breaking the monotony of rigid work flows. Our collabs with dev and IT were often successful — and fun. If you’re interested in how I actually conducted these events, I will write a post on it at a future date.

Catering to Macro/Micro Consumers. Although we didn’t conduct much user research, in my head, it seems that it collected data on its own about our users, both internal and external. Particularly, our content authors (the folks that write the research papers) represented one particular user/customer type.

Through some informal qualitative data I have accumulated via interviews, discussions, and casual dialogue, it seems that two mindsets dominate the majority of the RA audience: scientific, academic types that I’ve labeled as macro consumers, and micro consumers that make up much of the traditional finance folks. The way I describe macro consumers is that they often like to see a birds-eye type of view for all the data or information they consume. It is visible in every scientific presentation you see. An over-crowded, plethora of information cramped in one powerpoint slide. Many non-designers share this aesthetic. Micro-consumers tend to want their info quick, but not necessarily jumbled in a page — they follow hierarchy a bit more, so that simplicity is sometimes important to them if it gets to their objective quicker.

We designers like designing for micro-consumers because they are more open to negative space, more “human-centered” by avoiding designing information overload (macro consumers). Ironically, the biggest revelation to me was that even though the dominant trend is to be simple, employing the pillars of modernism which hints at minimalism— that designers need to design for both mindsets. Not just folks in finance. They exist in every industry. It is a challenge changing their behaviors to the other, because it is ingrained in them, and it’s much easier to accommodate for both mindsets rather than boiling the ocean.


ACKNOWLEDGEMENTS Thanks for reading all 5,000 words of this case study, and funnily enough, this was only the tip of the iceberg. I’ve hinted at further explorations with the topics above on separate posts, so if you’re willing to stick around, please subscribe to this Medium account, or read it on my blog at www.carlollacar.com

I know case studies are almost always about me, me, me, but if you perceived somehow that collaboration was always in my nature, then my friend, pat yourself on the back. So, it would be uncouth of me to not acknowledge my team at Research Affiliates who have contributed to my knowledge and the discussions we’ve had along the way. They would be Darren Wagner (D-Wags), Nick Eberhardt, Archie Bagnall, and Joey Castillo. Also special thanks to Durrell Brown, and Alice Chan for putting up with me.


About Carlo: I am a design consultant based in Los Angeles, and have designed for pretty much every industry like automotive, entertainment, and health & beauty, among others. I’ve even designed for cyber-security (case study on that later). So if you’d like to hire or collaborate, hit me up at hello@carlollacar.com


Endnotes

  1. https://today.duke.edu/2019/07/its-official-yield-curve-triggered-does-recession-loom-horizon

2. Low-value work is not a judgement call. They are typically fast, non-critical tasks that border on required/non-required, sometimes repetitive, but importantly, attached to high-value work. When accumulated over time, they become high value work.

3. About 40% of people click more for a customized thumbnail rather than a default image (https://wistia.com/learn/marketing/testing-video-thumbnails-in-emails)

Carlo Llacar

Written by

A ( ) designer based in Los Angeles, CA. Interested in tech/data/info/slow systems, futures, civic and mobility spaces.

More From Medium

Also tagged Brands

Top on Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade