Atomic Smash homepage splash

Just Bee Generous

Services delivered

  • User experience
  • Design
  • Community development
  • Illustration
  • Hosting
Visit website
Desktop image of Just Bee Generous Wordpress project Mobile image of Just Bee Generous Wordpress project

Just Bee Generous

Services delivered

  • User experience
  • Design
  • Community development
  • Illustration
  • Hosting
Visit website

Introduction

Just Bee Generous started it’s life in 2012 as a way to tracking acts of generosity. After performing a good deed, a ‘deedle’ card was also given or left. This allowed the recipient of the good deed to send thanks and also continue the trail. By registering the unique number on the card, the website acted as a way of tracking all it’s activity.

The big issue with this approach was the physical nature of the deedle cards. Having to produce and distribute these cards became costly and also restrictive – the good deeds that occurred because of these cards were always within a certain geographic area. This had to change, the cards left and hashtags arrived.

Just Bee Generous Cards

Concept Development

Before starting the project, JBG and Atomic started to assess what did and didn’t work from the previous version of the site. There were many things that needed to improve:

  • Remove need to produce physical deedle cards
  • Allow anyone to around the world to see and add to activity to the site
  • Allow users to contribute without needing a JBG account
  • Allow people to interact via twitter
  • The site must be responsive and work well on mobiles

Yet even though there was a lot that needed to change, the core principal remained and it boiled down to something JBG refer to as ’social movements’. The new version of the site would focus on the tracking and sharing of these social movements.

Once we had completed the first planning stages for the project we got to work and started prototyping versions of the new site, the production of clickable wireframes was a crucial part of this. Prototyping in this way allows for very fast and efficient planning of key site structures and concepts.

Wireframes for JBG

These digital wireframes were clickable, so it was possible to navigate around the prototype as if it was an actual website. This really aided in gathering feedback about the site from third parties. Their comments and advice at this stage allowed us to make big changes to how the site worked very quickly without wasting time on complex development.

One discovery from this stage was that Twitter was going to be a fundamental part of the site, not only for finding and sharing social movements but also as a means of contributing to the site.

Designs and illustration

At the start of the design process we produced a style tile. These are the designs for the fundamental building blocks that make a website (typography, list styles, what buttons and forms look like etc.)

Just Bee Generous Style tile

Merging this style tile and the wireframes, we are able to produce a website designs that are consistent and on brand.

Wireframes to Wordpress

One key demographic that used the previous version of the site was school children. So we had to strike a balance between playful and stylish, to do this we kept the base design very simple and added complimentary illustrations:

Just Bee Generous Bees!

After the design work was completed, we uploaded these flat designs into InVision. This tool allows us to create clickable hotspots around the pages that act as links, effectively providing a hi-fi prototype for JBG and others to review and comment on the designs further. People can even comment and discuss features directly inside InVision.

 

Development and technical challenges

Taking the flat designs and turning them into a working website is the final step in the process. We used WordPress as the content management system (like most of our projects) but on top of the standard integration work, there was another level to the project that set quite a challenge – searching Twitter for specific hashtags and contributions.

Twitter allows anyone with an account to search for particular hashtags or content. There is a limit to the number of times you can ask twitter for this information (Search is rate limited at 180 queries per 15 minute window), this wasn’t necessarily an issue. The real problem came soon realising that Twitter only allows you to access the last 7 days worth of history from the twitter archive. For a long running social movement, this wouldn’t be that effective as older tweets are just as valuable as new ones. To respond to this we created a caching engine for those tweets:

Wordpress and twitter

Using this system allows us to keep an unlimited history of all the tweets the site requires. We even repurposed the WordPress comment system to allow moderation of these tweets (just incase something inappropriate needed to be hidden).

Going live and ongoing development

We are looking to build on the functionality of the site shortly, with any community based website it’s crucial to take feedback from the users regularly to see what can be improved.

Back to top

Keep up to date with Atomic news