site: www.localskillswap.com

We were approached with the idea of creating a website that would allow users to get in touch with other individuals in their local area with a view to skill swapping. That is exchanging skills and expertise on a negotiated basis rather than paying for them using money. For example an accountant can exchange skills with a gardener provided they can find an agreeable balance for the services they both provide and require.

The concept is simplicity itself; our task was to create a website that kept it that way.

Understand and model the process
The first stage was to begin to understand and document how a user would interact with another member. We had to explain how users met, connected with each other and explained their requirements. How they advertised their needs. How we organized them into groups and how users create and manage an exchange. Over a period of weeks, through discussion with the client we came up with a document explaining a Local Skill Swap and how the processes could be managed and governed by a set of operating rules. Through this process the users control requirements could also be explained as well as those for site management.

Structure the process – Wireframes
Once we’d understood the requirements of a SkillSwap we could then begin to explore how this would be represented online. We began to develop wireframes, a very simplistic representation of how the site works. These wireframes allowed us to explore how the various elements of the site inter-relate and what the basic interface functionality needed to be. We also designed a series of ‘screens’, each of which were used to explain the user interaction. Through these elements we developed ‘walkthroughs’ that followed potential user journeys and modelled user interaction without writing a line of code.

Through progressively developed iterations of these wireframes we could describe everything a user could do. Such as placing ads, interacting with other members and modifying their own profiles. We could also describe how the management overview worked and when control could be invoked.

Enable the wireframes – Functional design
Once completed the wireframes informed every aspect of the ongoing development. In effect the wireframe became the basis of the design requirements for the database, code and user interface. From the wireframes the database designer defined the information and validation requirements of each screen, how information was retrieved, presented and stored. The interface functionality visible from the wireframes meant that the software design could begin with a clear understanding of the performance requirements. And of course the user interface design was then based on bringing the wireframes to life.

Development and building.
Using a LAMP (Linux, Apache, MySQL and PHP) platform the development began. With our methodology we could build and test the database, develop and test the site hierarchy and take the visual design through various iterations up to the development of the CSS keeping the wireframes as the development reference point. We chose to build the administration system after the main site so that any reporting and control requirements we in keeping with the finished website and where possible common code could be reused.

Delivery
The project ran from February to August 09 and launched as www.localskillswap.com

Technology
Creative development: Adobe Photoshop, Illustrator. Custom code and CSS development environment: Dreamweaver and EditPlus. Delivered on LAMP platform.