Keystone Financial is an independent financial publishing corporation, providing its clients with up-to-the-minute information on investment opportunities in the US and Canadian markets. They host a series of seminars to educate people on a DIY approach to investing in the stock markets. The Keystone Financial website is the conduit for their advice, delivering all pertinent information to their clients through email, SMS, and the client portal.

Custom WordPress eCommerce design by by Hammerhead, Vancouver's Strategic Web Design Company

The Challenge

Company & Custom WordPress eCommerce Website

  • Explain better what Keystone Financial does through an improved user journey
  • Increase organic paid subscriptions.
  • Allow users to purchase Reports, Tickets to Events, or Subscriptions through an easy-to-use interface.

User Portal

  • Provide an easy-to-use client dashboard.
  • Instructional overlays will help transition legacy users from the old system to the new one.
  • Users can review any reports, videos, and podcasts published by Keystone Financial, organized by service and date.
  • Users can partake in weekly live chat sessions with Keystone Advisors, and view chat archives of any past sessions.
  • Users can see a graphical representation of all of Keystone’s past & present recommendations
  • Users can use the custom search to find any company that Keystone covers, and view all past and present recommendations of those companies, including the trends since the coverage started.
  • Users can view charts of any company with coverage by Keystone, to see past performance.  
  • Users can subscribe to new services

Client Communication

  • Clients will have the option to receive updates from Keystone by Email, SMS, or through their client dashboard.
  • All clients get automatically synced with Mailchimp, segmented by what services they subscribe to, to allow for targeted marketing efforts.
  • The website and MailChimp will sync every day to make sure that all marketing lists are up to date.
  • All client communication is to be automated, triggered by events such as when an administrator publishes a new report, sending all applicable users the PDF report, and a text update via email and SMS.
Custom WordPress eCommerce web design by Hammerhead, Vancouver's Strategic Web Design Company

Services Rendered

  • UX & Prototyping
  • Speed Optimization
  • Quality Assurance
  • Mobile Accessibility
  • Information Architecture
  • E-Commerce

  • Custom WooCommerce
  • Custom WordPress eCommerce
  • Content Strategy
  • Content Delivery Automation
  • Data Analysis
  • Data Migration
WordPress landing page by Hammerhead, Vancouver's Strategic Digital Agency

Project Phases for this Custom WordPress eCommerce Website

Phase 1: Planning

Step 1: We worked with Keystone Financial to dismantle their existing system to determine all functionality that was needed for the new system.

Step 2: After gathering all of the pertinent information, we arranged everything into a new hierarchy of importance, to allow us to determine what should get the most attention, and what could be considered an after-thought. This left us with a list from most important, to least important.

Step 3: We then took that list, and separated each function into groups, to determine where on the new site all of it would live. This produced a blueprint of the site and its functionality.

Phase 2: Prototyping

With the blueprint in hand, we could begin wireframing out each of the unique aspects of the new system. To begin with, this involved laying out movable elements using paper cut-outs, until we had a concept that made sense. This was then translated into a technical wireframe, allowing the Keystone team an opportunity to review and provide their feedback. This process was repeated for each of the unique layouts on the site.

Custom WordPress eCommerce Website Wireframes by Hammerhead, Vancouver's Strategic Web Design Company

Phase 3: Development

The technical wireframes were then developed into Custom WordPress eCommerce templates, allowing us to produce and reuse any sections that were needed to build out the complete site. This allowed us to start moving over any static content from the old system, and provide the Keystone team with the basic user experience with real content.

Web design metrics by Hammerhead Vancouver

Phase 4: Data Migration

Keystone Financial has been around for over a decade. That is a lot of data. Their old system had been through a multitude of changes, adjustments, patches, and trying to make new requests work with old functionality. Needless to say, the data showed it.

Firstly, we had to manipulate the existing data to be able to fit in nicely with the new system. To compound this problem, we were going to be separating users from the old system – dubbed “Legacy Users”, and users from the new system.

Next, we completed several data imports of more than 7,000 users into the new system.

Phase 5: Launch

After a thorough review, quality assurance, and peer review, the new system was ready to launch. Like most of our clients, Keystone chose our monthly managed WordPress hosting & security maintenance service to host the Keystocks website.

Phase 6: Review

2 months after launch, heatmaps were reviewed to determine the success of the decisions that were made during the Prototyping phase. For, the data showed that the correct decisions were made, and users of the site were interacting with the new system as predicted.  

Unique Features & Functionality

Become a Client

The Become a Client page is the first interaction the user has with the custom WordPress eCommerce experience. Users Can easily Select All products and become a VIP, or pick and choose which products they would like to subscribe to. The order is updated in real-time and provides users with a total cost. Users can select to be billed annually or monthly and have the opportunity to input a coupon code.

The subscription levels were created by our team and simplified an extremely complex system. We also designed a system to phase out existing subscriptions. This provided a simple transition for existing subscribers.

Client Dashboard

The concept of the dashboard’s homepage was to provide clients with all the latest content. All content on the dashboard is marked as “new” if it has not been viewed yet, to allow the user to be able to easily identify what they need to catch up on.

It was decided to split the content up into the three main categories of content that Keystone publishes: Reports, Video Updates, and Special Reports.

Custom WordPress eCommerce website designs by Hammerhead, Vancouver's Strategic Web Design Company

A sidebar on the right gives space to provide users with Important Links, which can be updated by the administrator for special occasions. Under that, Keystone has 2 quick guides to using their service.

On the top right-hand side of the page, there is a HELP button, which will bring up an instructional overlay, and a quick run through the system.

Subscription Main

We have a similar layout for each Service’s main landing page, with Reports, Videos, and Special Reports, specific to that service. Like the homepage, “new” badges appear on any content which has not been opened by the user yet.  The custom WordPress eCommerce system we developed adds and removes products as the user updates their subscription.

WordPress website designs by Hammerhead, Vancouver's Strategic Web Design Company


The Portfolio section lists all of the companies that Keystone is suggesting coverage on, broken down into their branding of portfolio subdivisions. The user can easily review each of the portfolios under each service type they subscribe to and get all of the pertinent information on any of the companies listed.

Custom WordPress eCommerce website designs by Hammerhead, Vancouver's Strategic Web Design Company


The reports section allows users to search for any company, and find a report based on that company. They are able to filter by date, to narrow down their search.

WordPress website designs by Hammerhead, Vancouver's Strategic Web Design Company

Video Archive

This section lists all of the videos that are related to the service type. Taking advantage of the quick search allows users to easily find any video related to what they are looking for. Each video is tagged by specific content, allowing for accurate searching.

WordPress website designs by Hammerhead, Vancouver's Strategic Web Design Company

Hosted Q&A

Every week, Keystone holds several live chat sessions, where its users can interact directly with a professional trader. The live chat sessions are designed to hold a group discussion between up to 1000 users concurrently.

While the chat rooms are closed, a notice is displayed automatically providing information on the next chat session that will be held.

WordPress website designs by Hammerhead, Vancouver's Strategic Web Design Company

Chat Archive

At the end of a session, the content of the chat is automatically posted to the Chat Archive section, where users can read it for the first time if they missed the session, or review the session if they attended.

Users can search for specific companies on the site. They can then view all of the pertinent information about that company such as their current rating, a live feed showing their current price (up to 5 minutes), the latest reports, any past reports, and a live chart of the company’s performance.  

Hammerhead A Custom WordPress eCommerce Web App for Keystocks
Custom WordPress eCommerce website designs by Hammerhead, Vancouver's Strategic Digital Agency


The biggest challenge with this project was handling a very diverse pool of data. The original system that Keystone was using went through many different iterations, and of the data gathered over these iterations differed substantially. This caused some delay to the original project launch date, but we stuck to it and managed to provide workarounds for nearly all of the changes that were requested throughout the project due to the bad data.

This project was an immediate success: client retention was way up, and new subscribers started popping up as soon as the new platform was launched. The client marked an increased return on the website in the first month. The client saw a complete return on investment within the first 3 months.

Interested in exploring a custom WordPress eCommerce project? Check out our custom WordPress Development services and WooCommerce Development services or Contact Us today!