Case Studies by Daniel D'Alonzo

UXD 2017

Microsites. What are microsites? How might I leverage microsites to better serve my agency clients?

UXD case study

My client, a digital agency, had its own client, and this client is defined by Bloomberg as follows: “The Company provides brokerage services, investment banking, trading, private placement of securities, and investment advisory services.”

I was invited into this project at the point when my client already had his own vision in his mind of what the product should be which meant I wasn’t directing the UX or design process and basically had to follow their lead on the creative and strategic vision. In order to get to the much more fun aspects of the engagement – real-time problem solving – I had to put in time upfront to show the leadership I can easily execute their wishes. I would soon earn the agency’s trust and was able to engage with CEO in an immersive one-on-one coaching mentorship through his mindset adjustments, provided curated research and microlessons to fill specific knowledge gaps I discovered during our relationship, designed a new product and service matrix for the agency to improve upon the outdated, over priced, and out of scope contracts most agency’s get themselves stuck under water with, and provided the tech blueprint to build a modern alternative investment asset management distribution platform that scales asset distribution by equipping registered investment advisors with all-in-one marketing and sales platforms to run their shops.

When I am brought into a new industry that is waiting for disruption, you can expect that it will soon feel the impact of the innovation co-created with my clients. The work we do is specifically designed to build a substantial competitive advantage between you and your nearest competitors. I tie myself to your outcomes because, let’s face it, any other model is the same as stealing. The traditional agency model is broken. I am here to fix it.

While it may be clear from the start of some projects that my client’s customer was clearly not involved in the research process, I learned that it is best to follow instructions during the outset of a new engagement.

Eventually, we had an opportunity to update outdated design and make improvements to the my client’s client’s web assets based on the real-time feedback we got from both their end users (high net worth investors) and the internal team’s managing the relationships with those investors. Here’s a visual design snapshot to give you an idea of the level of improvement we were able to make once we got this first project under our belt.

alternative investment asset manager hero

Here’s a snapshot of the outdated webinar visual design which provides an idea of the user experience offered to high net worth investors and registered investment advisors (RIAs).

Following the close design direction of the CEO of the agency that hired me, I quickly polished it up to look like this:

Typically, I am not a fan of webinars. Of course, I wasn’t going to share that with the client on day one when they already had invested time and resources into the initiative. I was asked to keep the layout the same and make the visual design look more polished. Rather than acting on impulse, however, I talked my client through the backend of how the site functionality worked. I stressed the importance of taking into consideration how and who will add new webinars in the future, are they tech savvy, does the client have access to login to the site as it currently stands, etc. Otherwise, my client would throw money away on visual design polish that would just get torn apart each time a new webinar needed to be added/edit/removed. Sure, I didn’t agree with the strategy, but I still invested myself into making sure whatever we build together is going to be incredibly awesome and effective at achieving your business goals.

Once we finished the initial iteration of this microsite, I soon learned how involved my client had been in the process. My client invited me on most phone calls with its clients throughout this engagement, and after the second call I observed with this financial institution I became aware that the perceptions of the financial institution leadership of what “marketing’s” role is has fallen behind the times. We would have marketing calls where the CEO of the financial institution would read of a list of edits they wanted made on their website – many of the design decisions were made on a whim, rather than data. My client was spending at least 1+ hour 2-3 days per week on frivalous tasks issues by the financial institution CEO many of which would then be sent to me. I understood the dilemma my client was in, though. My client was caught in a similar position as many agencies find themselves in today: working to balance their client’s happiness with generating a return on their investment. I would soon show my client, the CEO of the digital agency, how to unlock his fixed mindset and introduce his clients to a new world.

Eventually, the CEO of the financial institution asked me to repeat the same task twice. Anytime that happens, it is typically a sign that some type of technology and/or automation can be leveraged. The purpose, to prevent a human from being confronted with the repetitive task which could easily, and more precisely, be completed by a computer.

The task?

“Add a new webinar to the microsite.”

I quickly built a front-end form that allowed my client’s client to visit a private URL to submit the webinar details (guests, descriptions, topics, dates, etc) and it automatically published the form field inputs into the appropriate places in the webinar feed of upcoming events. This removed my client’s agency from adding friction to the process and brought my client’s client one step closer to where they need to be – centered around each and every customer to make sure nothing is lost in translation, and that each customer is proud to associate with our brands.

Let’s get to the reason why you’re here: to learn about microsites and how to build them for your agency clients.

What is a microsite?

The purpose of this microsite is to streamline the due diligence process for an asset management firm. Due diligence refers to the time it takes a potential investor to decide whether she would like to invest in your investment vehicle, or not. Here’s a screenshot of the live microsite as it stands right now.

Microsites are clusters of web pages, or even a single web page, that compliments another asset or project or entity.

asset manager home hero
As I mentioned in the previous post of this series, this story – and the stories to come – include the step-by-step playbook and documentation of the tangible assets I developed through the course of my relationship with the clients who contributed to over $40,000 in revenue over the course of ten weeks.

The completion and launch of this project was a success in and of itself, but through a few additional steps I was able to use this project as a platform for my relationship with my client to flourish by empowering my client to use the same platform for the agency’s relationship with their customer to flourish.

I would use this microsite three more times as a clone to build additional products for this agency to serve the same asset management firm. Once this initial microsite launched, we had the branding, HTML, and CSS already implemented. Website projects that once took two to three months, $5,000 – $15,000, and a series of unnecessary headaches were now being completed in less than one day.

User Experience Design (UXD)

The list below contains most of the UX phases I will go through on a project, but for the due diligence events microsite I didn’t need to go through all of them.

  1. Brainstorm: ideation and outline of potential final product
  2. Storyboard: visual outline of the steps a user takes
  3. Userflow: steps a user of the product goes through
  4. Wireframes: page layouts the user is presented with at each step
  5. Requirements: guardrails/must-haves for each page of the flow
  6. Visual Design: high fidelity digital design to encourage the user to keep going
  7. WordPress Development: translate digital design files to live code
  8. Domain Management: map the proper URL structure for seamless user experience

Brainstorm (Outline)

This is a basic outline of the project based on our initial conversation regarding the problem, or need, the client has at the present moment. It might look a bit scribbly and sketchy, but that is the nature of creative work. As you work through your own outline feel free to doodle, diddle, and everything in between. All that matters is that you bring the project from an idea in your mind down onto the paper so that we can bring it through the entire process.

brainstorm

Userflow + Wireframes

I typically to userflow and wireframes in the same sitting. However, depending on the client, the project, the timeline, and the deliverables you can decide which works best for you. Some clients want these paper sketches turned into digital versions before moving on to the next phase, but that wouldn’t be necessary unless you have a hard time remembering what your creative workflow is:

userflow + wireframes

Visual Design

We went through a few iterations of the visual design together. Working from my wireframes in the previous step, I used Sketch to design digital renditions of the microsite. This would be the step when we transition from paper to computer.

events microsite visual design
The next iteration includes the first two pages of the experience. I didn’t include the last page because it is a simple thank you / confirmation page. I didn’t want to spend too much time working on that page just yet. We stayed focused on the core elements.

events microsite visual design
Finally, the third iteration, includes a more refined digital presentation of the due diligence events microsite home page as well as the second page which would be a roll of events within that particular event category. In this case, the second page represents the visual presentation of the webinar category.

events microsite visual design 5
The left screenshot below is the final iteration of the digital design using the Sketch App. The right screenshot is the first version of the live WordPress site.

Tools & Applications

The list of tools and applications I used to implement the above solution:

✓ WordPress
✓ WPEngine
✓ GoDaddy
✓ Sketch
✓ Headway
✓ Gravity Forms
✓ Domain Mapping Plugin
✓ Cloner Plugin
✓ Paper/Pencil/Post-Its

Features & Benefits

The Benefits explain the reasons why each of the Features (in bold) listed below are essential elements to the final product.

Clone-able WordPress installation so that my client has a scaleable finished product they can resell as a microsite productized service to future asset management firms

Page templates so that the agency can easily manage the dynamic content creation without hiring an outside consultant each time they need to add new events

Subdomain as the main domain of the microsite so that the existing main website wouldn’t be touched, it also allows us unrestricted URL structure which won’t interfere with existing main website’s URL structure, and makes it easy to clone the WordPress installation in the event my client does want to use the site as a productized service to offer their future customers

Front-end content management so the agency has clean, streamlined one-page process for adding new events internally and/or to train their asset management firm to use on their own, as needed – this would allow my client to eventually remove their agency’s involvement from the process, and, therefore, empowering their asset management firms with the autonomy my client desired

Native Categories and Posts from the WordPress core code so that the agency is able to assign each event type (webinar, luncheon, continuing education, etc) as a standard WordPress Category without impacting the blog structure of the main website, and using individual blog posts as new events

Hubspot integration so that the agency could embed Hubspot forms to use as the front-end registration for each new event and automatically adding each new event registration to a unique list within the Hubspot CRM

Transactional email automation so that the agency would be notified immediately following their client’s addition of a new a event which I set to save as a WordPress post until the agency approves and publishes the event, and so that the agency/their client would be notified each time a new event registration was submitted through one of the individual event pages

Launch campaign so that the agency would provide a ramp-up process to help the asset management firm use their existing email database to get an initial list of 10+ attendees to their very first webinar

Results & Outcomes

  • Agile & Lean: Built and launched a live user-facing site that was up and generating leads in about five days.
  • Established Trust: This was a test project for both of us – we used it to see how we worked together.
  • Built for Scale: I would use this microsite three more times in the near future as a clone to build additional products for this agency to serve the same asset management firm. Once this initial microsite launched, we had the branding, HTML, and CSS already implemented.
  • Reduce Cost & Increase Revenue: Website projects that once took two to three months, $5,000 – $15,000, and a series of unnecessary headaches were now being completed in less than one day.
  • Established Feedback Loop: The establishment of a feedback loop to improve the flow of information between the stakeholders involved would be essential in uncovering the next project. I built an open system for feedback and shared the link with all stakeholders so they had a place to submit their daily challenges – perhaps I would discover a challenge that I would be able to solve for them by empowering my client with the tools to serve the newly discovered need.

Are you ready to improve your investor experience?

Reach out to me when you are ready to unlock your asset management firm’s potential for growth.

Or, check out the story about the $40,000 LinkedIn message that changed my life.

Sorry, comments are closed for this post.