User Experience Design (UXD) Case Studies

UXD 2017

An end-to-end user experience design (UXD) walkthrough of the strategy, steps, and technical process to complete a microsite that would streamline an alternative investment asset manager’s due diligence process.

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.

alternative investment asset manager hero

What is a microsite?

Microsites are mini-websites. Microsites are clusters of web pages. A microsite can be a single web page, that compliments another asset or project or entity. Microsites are helpful because we can build out new features for users without touching the existing corporate website.

This customer story includes 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.


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.