← back to projects


Posted on July 18th, 2016 by Graeme

Prototypr.io is a blog of curated content based around all things prototyping: Responsive Design, Wireframing, Front-end Development, Accessibility and beyond.

Simple beginnings

Prototypr.io started off as a medium publication filled with ideas and articles written by myself. After a few months the publication began gaining followers from the content I was writing, and I was then contacted by other writers who wanted to contribute to the publication.

As the blog gained more subscribers, I began curating other design articles to help share the message of writers to the publication's audience. Each article that is added to the publication is then scheduled to be shared shared across various social media accounts I have set up for Prototypr using Buffer.

When it comes to social media strategy it's not about spamming as much content as possible, but sharing curated links that are useful to readers. Additionally, I like to create twitter lists of my audience, so I can share what they are talking about too.

Social Media Audience

The Prototypr twitter audience has grown to 4,200 designers and prototypers.

The Facebook page has around 2,000, enabling me to learn about paid growth, as well as organic.

Prototypr Website Design (using Sketch App)

As the audience of the Prototypr brand grew, I created a separate site on WordPress so that I could better categorise the content being curated. Since I'm a fan of material design, I started the site using a wordpress theme I found - why reinvent the wheel?

I then ripped the theme apart, to fit the layouts and designs I mocked up in Sketch.

I had 3 goals for the site:

  1. Enable users to register their interest in the site through a large call to action to sign up.

  2. To provide the user quick access to the latest content on the blog (which I would then further categorize in the future).

  3. Have a slack channel to enable users to connect with each other for further discussions.

Mobile first design

  • I created a responsive layout using Sketch App, with a large call to action for the visitor to subscribe for a newsletter or whatever I would be offering. That took care of my first goal.

Sketch responsive mockup

Listview for latest content

  • Next I focused on goal 2 and 3. I added a second call to action at the top of the sidebar for users to register to the slack channel
  • I also displayed the latest content in a list view that would take readers out to the medium blog.

Sketch mockup

Material design artwork

Since Prototypr is based on prototyping digital media, I wanted to use images that show the process that goes into building an app. I used concepts of material design in the artwork, by layering the different components (e.g. navbar/floating action button) of a simple app layout on top of eachother at different heights by using shadows:

Material design artwork

Onced I'd reached this stage in Sketch, I just coded it and hosted the site using Red Hat's OpenShift.

Listview Changes

  • The original list view had a voting mechanism, which was barely used, so I got rid of it in place for some more useful information:

  • I moved the thumbnail image to the left hand side of each item, as it's the most distinguishable element for each, and added the prototyping tool tag (if there was one) to the top right:

Automating content using RSS Feeds

Having created the site, I discovered that I'd turned myself into a content posting monkey. Every time an article was published on the medium blog, I'd have to cross post it onto the WordPress site, and also schedule a tweet using Buffer. To solve this, I used the RSS Feed of the medium publication to update the WordPress site.

RSS Feed for prototypr blog

There are many plugins on WordPress for RSS Feed curation, so I tried a few different ones and settled with one that worked. Of course I had to also customise the plugin to fit my needs. For example, when the WordPress site aggregated a new post, I wrote a WordPress action hook to send the content to Buffer, with hashtags for #design and #ux so the content was more discoverable.

Slack Automation

Slack Auto-invites

Normally, people have to request access to join a Slack community and then the owner of the Slack channel must approve the new member. That could be a bit slow and tedious, especially since I only check my email once every day or 2.

Therefore, I needed a way to invite people automatically to the slack channel - and I found the answer with Slackin, which I set up on a separate url: slack.prototypr.io.

Prototypr Slackin

Slack welcomebot

The slack channel was quiet when it had very few members, and for every member that joined, I had to be on hand to welcome them in. As much as I loved that people were joining and wanted to welcome new members, it was difficult for me to be on hand all the time. To solve this, I found a Welcomebot python script on github, and deployed it to Heroku for free.

The bot monitors the Slack channel for new members, and sends them a message when they first sign up with information about the channel.

Making the site more useful

The prototypr site at this stage was just a landing page, and a feed from the medium publication. I wanted to make it more useful, in being a one stop resource for all prototyping tools out there. To do so, I added a 'Prototyping Tool' taxonomy to the structure of the site, so that I could have a page for each prototyping tool, and then categorize the existing posts based on which tool they were written for. I added this menu, just below the 'sign up' call to action:

User testing has shown that this menu is a welcome addition, as people are using it when visiting the homepage as shown in this heat map: 

Upon selecting a tool, you are presented a short bit of information about the tool, and then articles mentioning that tool:

  • There's also a 'get it now' button in the sidebar that takes the user to the download page of the selected tool.

Content Strategy

Sometimes I will work with writers who ask for feedback about their articles, and make edits to tailor their article for our audience. From my own writing, I've picked up a knack for structuring articles, to make them more reader friendly. This includes:

  • Restructuring articles by adding subtitles and images
  • Tailoring the article title to be more impactful
  • Making the content flow better by suggesting additional content or content to remove

One example can be seen here, where I worked with Patrick Zimmerman from Sapient Nitro. The article was a success being shared by InVision and Ideo on Twitter.

  • When writing, I put most weight on the end user reader's experience, combined with the business/writer's objectives of the piece.

Resource Management

Since I'm hosting the site on Openshift, I had the entire WordPress setup running on one small 'gear'. That meant a MySQL database server, and a PHP server running at the same time on on gear with limited resources - no wonder it was running a bit slow.

I changed this by allocating an extra gear, so the MySQL database is running on one, and PHP on the other, which made things run a lot faster.

Funny user testing Observation

When analysing the heat map, I found some people thought the button on the image in the background was clickable:

  • Maybe I should make something happen when that 'button' is pressed.

Living document

This is a living document of the progress of this project - it will be updated again as more progress is made.