Make the marketing assets for this brand's FinTech product innovative and bright, while maintaining a dependable and trustworthy look and feel
32 contact form submissions in 2 months
The product: Calypso's risk management software on the Cloud. The assets: a landing page, flyer, social graphic and email blast. The goal? Position Calypso as forward-thinking in a market already saturated with similar products. Bonus points for getting current Calypso users interested enough in the cloud product to switch over from legacy software or new users interested enough in the company to sign up.
Copyediting, End-to-End Design, Hacky Frontend Coding
After a full briefing from the Head of the Cloud Services Division, we created buyer personas for the two main target demos (people already using Calypso off the Cloud and new customers). I'll spare you the details, but both groups were traders/bankers who wanted to consolidate their workflows but who were largely unfamiliar (read: uncomfortable) with new technologies. Calypso users were familiar with the brand but still unfamiliar with the structure of the Cloud offering.
Because of this, we decided to take an informative approach as opposed to a sales approach. (That's what demos are for, right?)
One more thing before wireframing — competitor research, i.e. the marketing materials of FIS, Misys and Murex. One thing that that stood out was how scannable the pages were as a result of being very plain. Based on the spec, I knew we needed something that was just as scannable but with a lot more flair.
We discussed the information hierarchy at length. The main challenges? Creating a clear distinction between the standalone SaaS product and other products with varying levels of Cloud interactivity and tying the partners into the overall story. We opted for a somewhat standard landing page design to keep the focus on the product: benefits of the Cloud, a split feature section (main SaaS offering and less comprehensive offerings), partners, social proof (news) and a contact form.
From there, I worked with the Director of Marketing on the copy. Once it was written and (somewhat) finalized, I drew up a few sketches. The original wireframe had the "Why Cloud" section in one box, but I later opted to split it into multiple boxes to improve scannability.
Bonus: Separating the SaaS product from the add-on products allowed us to hook those unfamiliar with the brand directly into the full Cloud platform by making the SaaS offering feel more appealing.
As stated in the brief, the look-and-feel of the microsite needed to be innovative and full of flair. Enter full-width background images on the focal points of the page. The header/contact form was an overlay of clouds and effects on Calypso's standard city skyline graphic. Similarly, the backdrop of the SaaS section was a parallax-scrolling rainbow light wave, implying agility and innovation.
To add an element of trustworthiness and steadfastness, I left the rest of the page in solid colors with simple line icons. Calypso's brand had several tertiary colors in its palette and the executive team was extremely enthusiastic about using them. I thought the tab selector (add-on products) would be a great place since the colors provided an added benefit of showing which tab was currently selected.
The site was built on an old version of WordPress using Bootstrap and a combination of HTML, CSS and JavaScript coding. Our web management team was extremely helpful in the engineering process and I worked very closely with them to see what the technology allowed but there were still several bugs and design inconsistencies in the final version (negative margins, anyone?)
One area that went through several iterations during the design process was the Partners section. Calypso needed something that (a) didn't favor any partner, (b) didn't place too much emphasis on the partner section, (c) didn't look sparse with the 3 partners they had at the time, (d) could easily be adapted as new partners were added, and (e) incorporated the partners' logos while adhering to their individual brand guidelines.
Original sketches had circles with arrows, but the varied logos looked off in the final mockups. I moved to a version with horizontally-arranged cards but that looked too sparse and the cards were too big on desktop. The remaining iterations all had the carousel in varying forms. Calypso was still concerned about (a) so we added a summary card in front of all the others as the default state. In the final tests, some people expressed that they didn't know to swipe on the carousel. By then, it was too late to add arrows or other navigational cues, so we settled on a semi-directional, semi-CTA style box which instructed the user to flip through the cards in the carousel.
*Wireframes and website video walkthrough available upon request
Key lesson