Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
7th April 2009

Behind The Scenes: Clearleft and EdenBee

Riding the Web 2.0 wave to promote environmental sensibilities, Edenbee recruited design consultancy Clearleft to help make this dream a reality

Behind The Scenes: Clearleft and EdenBee

Riding the Web 2.0 wave to promote environmental sensibilities, Edenbee recruited design consultancy Clearleft to help make this dream a reality. Web Designer dropped by to hear how it went…

Edenbee’s philosophy lies within its name. “Eden – the Garden of Eden is the ideal to return to, before humanity began to degrade our biosphere. Bee – the bee is quite simply the most successful social network in nature.” The site was set up to make a difference in the world, created by Clearleft (www.clearleft.com), a web design and interaction consultancy recommended to Edenbee (www.edenbee.com). So, as the world hints that it’s beginning to get bored of Facebook and MySpace, a new social networking site enters the fray, one with an agenda. The question is, will it cut the mustard? We certainly think so!

AB: Andy Budd – creative director

WD: Before we delve into the heavy-duty questions, could you tell us a little about Clearleft and the type of creative work you do at the agency?

AB: Clearleft is a user-experience consultancy, comprising eight seasoned professionals. We design the kind of websites that are intended to be used, such as social networks, eCommerce products, web applications and informationbased sites. The services that Clearleft provides range from initial concept consultancy through interaction design and prototyping to usability testing, interface design and template building. Our mantra is to design sites that are both easy to use and pleasurable to engage with. WD: In reference to the Edenbee website, how did Clearleft come to be involved with the project?

Behind The Scenes: Clearleft and EdenBee

WD: In reference to the Edenbee website, how did Clearleft come to be involved with the project?

AB: When Edenbee was looking for an agency to work with, Clearleft was frequently recommended as a company highly experienced in the field Edenbee required – that of designing social software. Edenbee approached us directly, and we arranged to have an informal chat with the founders to discuss their ideas and to see whether there was a good fit between us. We got on superbly and struck up a relationship straight away. We were really keen to work with Edenbee as its concept of using social software to reduce the impact on the environment was one that struck a chord. Edenbee was keen to work with Clearleft because of the design experience and strategy
we could bring to the project.

WD: What was the project’s original brief?

AB: The original brief was refreshingly open in its scope. In essence, the Edenbee site was to use the collective intellect and motivation of internet users to lower their impact on the environment. It was to be a bottom-up approach to addressing climate change, enabling its users to work together to reduce their individual carbon footprints. A carbon calculator was central to the brief, but Edenbee looked to Clearleft to shape and define how this and the rest of the site would manifest itself. We needed to design a social network that would be vibrant and informative, and provide the tools necessary for its members to communicate on burning issues and to track their own progress, and that of others, in the fight against climate change.

WD: Looking more closely at the Edenbee website, what roles did Clearleft take on in the site development? Where there any external agencies involved?

AB: Clearleft’s first role was user research. We talked to potential users of the site and developed personas, enabling us to identify their needs and motivation. The next and most important role Clearleft performed was to define what the site would do. We ran a two-day workshop in Dublin where we worked through requirements and developed ideas with Edenbee until we had a solid concept that could be fleshed out and scoped. With a good idea of the required functionality, our next step was to wireframe the site. For this, we created an interactive HTML prototype, which doubled up as a design tool and functional specification. The prototype enabled us to perform in-depth usability testing before further design and subsequent development ensued. Clearleft specialises in design, so while we were designing the wireframes, we began work with New Bamboo, the back-end developers.

WD: Web standards are obviously a major player in the Clearleft philosophy. How did this affect the design/development of the Edenbee site?

AB: Web standards by way of valid, semantic and meaningful HTML and CSS, are incredibly important to us. It is embedded so much into our working culture that web standards are a given; they’re not something we need to think about consciously when designing or developing. Ensuring Edenbee is accessible and progressively enhanced for browsers of different capabilities was part of our process, as it would be for any client, so we had to work closely with New Bamboo to ensure the site would function adequately with JavaScript turned off and other such scenarios.

WD: On the surface, the Edenbee site is a simple and functional affair, but looking a little closer it obviously involves a lot of back-end technologies. What technologies were used and how much involvement did Clearleft have in the process?

AB: Clearleft specialises in design and user experience. We don’t do any software engineering or development, so our involvement in the choice of technologies was fairly limited. That said, knowing the site was being built using Ruby on Rails meant that things like useful URL schemes would be present, as well as having a quick, flexible working environment. The collective decision to use AMEE’s API for the carbon emissions data proved a good one, as AMEE has been adopted by many other environment-conscious websites as well as the UK government. It’s good to know Edenbee is part of that growing ecosystem.

WD: What type of design assets, if any, was Clearleft given to work with? Or was it a case of creating everything from scratch?

AB: All we had to work with was the great bee logo, which was designed by a branding agency in Dublin. We adapted the logo for use on the website’s homepage and we’ll also be developing it further later in the year. All of the other visual and graphic elements – typography and colour scheme included – were freshly created by Clearleft.

Behind The Scenes: Clearleft and EdenBee

WD: How many designer/developers were used to complete the project, and what role did each of them take on?

AB: A team of six people contributed to the design and front-end development of the site. We had two user-experience designers working with the Edenbee founders to create the concept. The UX designers then worked out the information architecture and designed the interactions. We wireframed the site as an interactive HTML prototype, which we used for usability testing. The wireframe also functioned as a design tool and functionality specification. Following on from the wireframes, two designers worked together on the visual design. They created an overall look and feel, grid and typography system, and further designed individual interactions. This design system was then interpreted by two front-end developers as an HTML and CSS template system, complete with JavaScript-based enhancements. The frontend developers worked with New Bamboo to integrate the templates into the software (and the software into the templates).

WD: What was the overall timescale for the project, and how was this assigned to the different elements of the development
process (eg, design, development, testing)?

AB: The time from initial workshop to launch of the public beta (or ‘beeta’, as we like to call this project specifically!) was about six months,
split roughly equally between design and development. Testing was an ongoing process throughout development, and there was, of course, further feedback to encompass during the early beta period.

WD: What steps and procedures are involved at the testing stage? Is the website tested across other platforms other than the desktop, ie mobile devices?

AB: Rails-based application testing was employed all through the development. In terms of browser testing, Edenbee was tested in detail on desktop browsers but only informally on mobile browsers.

WD: When Clearleft completed the Edenbee site, was this the end of your involvement? Or do you provide aftercare for the site? If so, what does this involve?

AB: Clearleft has a continuing involvement with Edenbee. Since the site gained a healthy user base, we have been helping Edenbee analyse usage patterns and are currently planning the first major round of iterations, which will incorporate usability tweaks and some exciting new functionality.

Behind The Scenes: Clearleft and EdenBee

WD: Finally, what up-and-coming projects does Clearleft have in the pipeline?

AB: We recently finished redesigning a large eCommerce website, which had some particularly challenging business models and usage patterns to design. The site is currently in development and should be released early next year, so check our website in the new year for more information.
We have also just finished another very exciting start-up based around niche holidays called Tourdust.com. This was an Agile development project, which posed its own challenges in terms of integrating UX methodology, but it means our involvement doesn’t end with the handover to developers
but with a final site, which inevitably is extremely satisfying.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.