I'm Jon Coulter.

A web designer with a passion for building highly usable and great looking websites with the latest technology. I work on a small team and have a lot of experience designing, building, and managing websites for products.

Global Software Company Working to Consolidate

GrapeCity

GrapeCity has a lot of sites across several countries and they are all built and maintained in a different way by different teams. I was tasked with laying the groundwork for ActiveReports, ActiveAnalysis, and Spread. It needed to be lightweight, fast, and easily translated which lead me down the path of the static site generator Metalsmith. Content is completely separated from code in markdown files that can easily be shared, edited, and translated by anyone.

  • Product managers adapted to the system easily and were able to create production content without my help.
  • It's fast, under 1 second page load was the goal and it's well below that in some cases.
  • New instances of the site are easily created for different languages or other products.
  • A common framework using SCSS where a new theme can be created by changing variables.
  • Build and deployment is simple, one line builds the entire site into a folder.

About GrapeCity

GrapeCity was founded in Sendai, Japan in the early 1950’s by a group of American immigrants to Japan. The Company started with a focus on being the highest quality English education provider in Japan. Soon after, we established several world-class elementary schools in northern Japan. After much success, we expanded into technology and software. Through organic growth and acquisitions, the company today has a global footprint servicing numerous industries in both developed and developing countries.

Challenges

There are several technologies in play to make every site work. The marketing and sales portion of the site is built in ASP.NET with a custom shopping cart and user management which is out of the scope of this project, so it only received a new design. The support portion of the site is built in WordPress which handles forums and blogs, also outside of the scope of this project, so it inherited the new design. Separating the marketing content from the cart, login, forums, and blogs was one of the main goals of this project.

The product teams have different wants and needs out of the site, so making a static template wasn't going to work. Allowing non-technical employees to layout a page using only options in YAML is a tough sell when they are used to writing blogs in WordPress and other CMS. While allowing freedom was a goal, it was freedom within a set of rules. The home page was a free for all, but product pages should have a basic set of information universally so that users are already familiar with the structure if they happen to be interested in a different product.

These sites were meant to be a fresh start and no content was to be recycled including screenshots. A spec would need created outlining all of the screenshot sizes and how they would be used. It is not an easy sell to Product Managers that they have to take all new screenshots and write all new content, but one of the main goals was to really think about what the product is and how to tell customers what it is on a base level without diving right into deep technical content.

ActiveReports

Solutions

The marketing portion of the site is now separated from sales and support allowing endless iteration without the fear of interrupted cart purchases or customers getting questions answered. Deployment no longer requires database updates, it is boiled down to a single folder with static HTML files that get uploaded.

In order to create the flexibility required in templates I created components that define how content is displayed. Tabs, alternating items, highlights, values, buckets, and a few other small pieces that all take the same basic content like a headline, body text, and screenshot and turns it into to the associated component with an option defined in YAML above the markdown. There is a small learning curve, but all of the copywriters adapted to it quickly and ended up preferring it. Once the markdown file is set up, it can be sent to the international offices to translate and that is all it takes to create a different language version of the site.

All it took for everyone to get on board with screenshots is a prototype page with new screenshots that are not resized and very crisp. It took a lot of work, but having all new screenshots really gave the products new life and the customers can see exactly what they are getting.

Personal Contributions

The design of the site was left completely up to me. I have worked with GrapeCity for a long time and have made many iterations for all of the product sites so I had a pretty good idea going in what I wanted to improve.

  • Minimal or no dropdowns on the main menu. Most users know what they want to see already and want to get there quickly.
  • Consistent user experience across the site regarding items that are clickable.
  • Icon font and SVG for all logos.
  • A color scheme that can work with all GrapeCity brands and bold colors similar to data visualization.
  • Big screenshots that aren’t resized.
  • Looks good on mobile.
  • Crisp readability.
Spread

Results

Stats improved from 30-80% in Google Analytics and the site ranking has greatly improved in search results. These improvements allow traffic to improve organically without having to spend more money. Customers have enjoyed the simple navigation and especially the speed.