Skip to content

Commit

Permalink
chore(blog): add Design+Code blog post (#12598)
Browse files Browse the repository at this point in the history
* Update from Forestry.io - Updated Forestry configuration
Linda Watkins created docs/blog/2019-03-15-design-code-blog-post/.gitkeep

* Update from Forestry.io
Linda Watkins created docs/blog/2019-03-15-design-code-blog-post/gatsby-fuels-content-and-sales-in-design+code-rebuild.md

* Update from Forestry.io
Linda Watkins deleted docs/blog/2019-03-15-design-code-blog-post/gatsby-fuels-content-and-sales-in-design+code-rebuild.md
Linda Watkins created docs/blog/2019-03-15-design-code-blog-post/index.md

* Update from Forestry.io
Linda Watkins updated docs/blog/2019-03-15-design-code-blog-post/index.md

* Update from Forestry.io
Linda Watkins created www/src/uploads/Screen Shot 2019-03-15 at 9.59.52 AM.png

* Update from Forestry.io
Linda Watkins updated docs/blog/2019-03-15-design-code-blog-post/index.md

* Update from Forestry.io
Linda Watkins updated docs/blog/2019-03-15-design-code-blog-post/index.md

* Update from Forestry.io
Linda Watkins created www/src/uploads/Screen Shot 2019-03-15 at 10.05.35 AM.png
Linda Watkins updated docs/blog/2019-03-15-design-code-blog-post/index.md

* Update from Forestry.io

* chore: fix

* chore: tweak file that got changed
  • Loading branch information
DSchau committed Mar 15, 2019
1 parent 1857717 commit 4bfc993
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 2 deletions.
2 changes: 1 addition & 1 deletion .forestry/front_matter/templates/blog.yml
Expand Up @@ -33,4 +33,4 @@ fields:
hidden: false
default: ''
pages:
- docs/blog/2019-03-07-sell-gatsby-to-clients/how-to-talk-about-gatsby-to-clients-and-your-team.md
- docs/blog/2019-03-15-design-code-blog-post/index.md
1 change: 0 additions & 1 deletion .forestry/settings.yml
Expand Up @@ -41,4 +41,3 @@ build:
- BUILD_DIR=www/
preview_output_directory: public
output_directory: www/public
instant_preview_command: gatsby develop -H 0.0.0.0 -p 8080
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
47 changes: 47 additions & 0 deletions docs/blog/2019-03-15-design-code-blog-post/index.md
@@ -0,0 +1,47 @@
---
title: Gatsby Fuels Content and Sales in Design+Code Rebuild
date: 2019-03-15T07:00:00+00:00
author: Linda Watkins
tags:
- case study
---

When [Design+Code](https://designcode.io/ "Design Code") needed to rebuild their website to focus on more robust content and meeting increased sales targets, they started with what they knew - React. As a teaching resource for building real, live apps they were already familiar with React. As experts in the courses they offer, they reached for Gatsby. This combination would provide the leading-edge experience they gained by designing with Gatsby, while customer experience was elevated from visit to sales.

![](./images/dc-homepage.png)

Design+Code started in 2015 when Meng To began with a digital book on designing iOS apps and Sketch. With Swift, Design+Code taught how to build the real iOS app from the app itself. This would serve as the foundation for future Design+Code courses – teaching how to build real, live apps, but in a compelling and design-focused way. The Design+Code React course has become their most popular course by far, and teaches how to build a production website (designcode.io) for designers and beginners. It goes from basic React concepts all the way to adding content with Contentful, to deployment and accepting payments. There have been some beautiful sites from students who've taken the course (such as [https://cyfa.io/](https://cyfa.io/ "Cyfa")).

#### Example of a student-built website, Cyfa

![](./images/cyfa.png)

[Thomas Wang](https://twitter.com/thomaswangio "Thomas Wang on Twitter"), UI Developer at Design+Code, shared some of the important details of the rebuild, as well as the benefits their Gatsby-fueled site has provided their new offerings.

<pullquote citation="Thomas Wang>
We needed a new CMS to handle the amount of content we were creating and a more full website, transitioning from a digital book to an online learning platform. We also wanted to begin using more modern tooling and frameworks so that we could teach them in the future
</pullquote>

### **Learn from Doing**

The Design+Code team chose Gatsby for its out-of-the-box support for page routing and its compatibility with GraphQL. Thomas also acknowledges they were well aware of Gatsby’s emerging popularity in the React ecosystem. Gatsby’s signature simplicity of starting up a new website with its variety of starter templates ticked off even more extras they were looking for.

AND, not to be overlooked, they wanted to be on the leading-side of offering Gatsby-build training.

<pullquote citation="Thomas Wang">
Our philosophy is to always be able to teach what we create, so having an easy-to-understand framework (like Gatsby) to work with was perfect for us to be able to teach designers and beginners.
</pullquote>

### **Moving to a Subscription Model**

The team was looking to transition the site from focusing on downloadable, digital book content to a full, subscription-based learning platform. The volume of new courses being provided required a system that would support their anticipated content growth as well as drive the business side of subscriptions.

They achieved both with the new Gatsby-powered site and a Stripe subscription system.

### **Fired Up SEO!**

The launch was a success and landed Design+Code at #1 on [Product Hunt](https://www.producthunt.com/posts/design-code-3 "Design+Code") the first day of the launch and #2 for the entire week.

Gatsby ignited their Search Engine Optimization (SEO) with Lighthouse scores of SEO at 100, Best Practices at 93, and Performance at 97 out of 100. The site is far out-performing its predecessor and has become the content-driven, sales machine that was anticipated.

Try out Gatsby to see how it can do the same for you. [Get started here](https://www.gatsbyjs.org/ "Gatsby get started").

0 comments on commit 4bfc993

Please sign in to comment.