Website Examples - Archive

Website revamp for fluentintuition

A recent big success at B Websites has been the website revamp for fluentintuition – a local language training facility based in Woking.

fluentintuition is run by the amazingly focussed Nikki Oliver Pentucci who came to us after being recommended by the equally amazing Caroline Arthur for whom we created a website last year. fluentintuition provide a range of innovative language learning courses and experiences, such as book clubs, cookery classes as well as the more traditional training.

The branding was already in place so our brief was to reuse the company colours to create a new accessible and easy to use website with 50+ pages and on-line booking system. 

The entire website had to be planned from the ground up. Part of the challenge was that we had just 3 weeks to plan, design and build the site since it needed to be ready for the September term and to top it all Nikki was to take a (well deserved) holiday half way through our development time. 

In terms of the back end and user experience we included a massive list of features:

• 50 + pages all with their own custom banner
• Tweet this, send to friend, bookmark this
• Print button with print friendly version
• Facility to upload and store 100′s + PDF downloads
• E-commerce to allow visitors to book and pay for courses online
• Secure area for fluent training materials
• Newsletter sign up
• Easy to use navigation (so no drop downs!) which includes a breadcrumb (the “you are here” but at the bottom of the page)
• Integration with the existing fluent database
• Extensive cross browser testing (let me know if you spot anything…)
• Lots of work on SEO to retain the links and credibility obtained from the previous website

And to top it all fluent can manage every aspect of their website using our bespoke SMART CMS (which we’ve tailored specifically for this project) along with full technical support from us for the lifetime of their website.

We have thoroughly enjoyed working on this project. Designing websites that are easy to use and include such a lot of data is not always easy.

Everything else, Website Examples | 31.08.2010 12:01 | No Comments

New e-commerce for Petit Poppet

We have had an amazing few months working on some fantastic new e-commerce websites. First up was BuyStudentArt, then What Katie Did Next and this week we are working on a new website for Petit Poppet.

Laura founded Petit Poppet after spotting a niche in the market for baby slings. Laura’s unique idea was to allow her customers to try a sling before they commit to purchase. Even better still is that all profits raised from the “try before buy” are donated to the very deserving charity: Sands. Personally I have experimented with a number of slings and have never found the perfect sling for my body weight, type of baby and lifestyle. So I am certain that Petit Poppet is a winner!

I love planning e-commerce websites, they are very different from a standard website or blog. The e-commerce website absolutely has to sell. It has to provide visitors with masses of reassurance before they will place an order and technically they have to be spot on (have made a note to write a blog re do’s and don’ts for selling on-line!).

Have you ever made a purchase on-line and instantly worried whether or not you’d receive the goods? E-commerce websites need to break down all barriers between the visitor and the checkout page.

The current Petit Poppet website was a low cost project aimed at testing the market before committing to a major investment. The creative logo was drawn by Laura’s brother and we really liked the shades of blue and pink.

We identified the need to be able to search for slings by type or brand. Not wanting to take up too much on screen “real estate” we have used a nifty tab system so that the visitor can select their own default.  Laura also plans to incorporate some other baby related products into the site so we’ve included these in the early design stages to prevent major re-engineering later. We have also helped Laura to de-clutter the website and she will be using a new integrated blog and chat forum to house extra content.

I love the design, the colours are vivid and engaging and I can’t wait to hear about all Laura’s new sales!

Website Examples | 16.08.2010 19:02 | No Comments

New website for antdesign

We have recently been lucky enough to work with the very talented Kashmira Jhaverim: the brilliant graphic designer at antdesign.  Kashmira designs cards, calenders and corporate graphics based on her unique style -  a fusion of  Asian images and healthy living.

Kashmira came to us because – in her own words “I have a design that I have created for a website but I do not know how to code it”.

The requirement was a small 7 page website with integrated blog and scrolling home page banner – all done on a strict budget.  To be fair coding it was a challenge even for our developers –  with 10 years experience a piece!

Converting flat graphic designs into fully functional websites are always a bit of an undertaking.  We had to give Kashmira a bit of a crash course in website design (and use a bit of creative thinking ourselves!)  in order to adapt the vision into a fully functional website with as little compromise to either design or functionality as possible.

The main differences between print design and web design are as follows

1. Colours.  Whilst colours can be coded into a website, the actual colour on screen will depend on the visitors screen.  Their monitor settings and may be a bit more red, more blue etc – the end result is that the shade you specify will not be the same shade that is displayed on screen.  As for matching print colours to websites – forget it!
2. Fonts. Although it is looking optimistic for the future, we are currently stuck with a limited number fonts that we can use reliably on the web.  Websites can only use fonts that are installed on the visitor’s machine (yes really!) and there are only a small selection that are reliably safe to use. In many cases an image may be used instead of a font but these cannot be read by search engines.
3. Font sizes.  The visitor ultimately has control over the font sizes.  As you can imagine changing the size means that the entire website needs to grow/shrink accordingly.  It’s possible to cripple the font changing functionality but this is really poor practise.
4. CMS.  Every content management system has its limits.  The antdesign website has been built using our very own SMART CMS.  Using any CMS means that the website needs to be coded to allow for change and variety of content (different sizes of text and images).
5. Design port.  Porting a design to a CMS in pixel perfect precision is very time consuming. I like to use the phrase “approximation” – which essentially means that we will reuse as much of the existing design as possible. In many cases a pixel perfect port is possible but the additional time required to pindown the last 5% can be significant.  Opting for an approximation can really help to keep the budget down.
6. Text formatting.  Having been so used to print, Kashmira was really keen to have the text line up and include breaks in very specific places.  In print this can work but the reality of a website (particularly one with a CMS) is that it will need to grow and shrink. Web designers take a much more organic approach to seeing their website looking different on varying screens/browsers & devices.
7. There are many other significant differences also (pixels and not cms, SEO, accessibility, writing copy for web, image optimisation, download speeds, user experience…)

Back to ant design… One of the features that we are particular pleased with is the image gallery.  SMART already supports a number of gallery formats and creating Kashmira’s vision almost perfectly was simple with a bit of CSS know-how from the developers at B Websites!

The thumbnail gallery allows user to see all the images on the screen and to select the image that they would like to see bigger.

We absolutely love Kashmira’s work and are chuffed to bits that we were able to do such a great job on translating the website design from print – to web. What do you think?

Website Examples | 14.08.2010 12:42 | No Comments

New website for BuyStudentArt

The concept behind BuyStudentArt is original:  BuyStudentArt is an on-line art community where students can upload and sell their art to the public. Students are allowed to upload 5 pieces at a time to sell in different sizes formats and prices. Visitors to the site can browse or search for artwork and purchase on-line.

As a start-up business we had a fairly tight budget for this project. The graphic design was created by http://www.pellingdesign.co.uk who also worked with the client on their brief/specification/functionality.

In order to stay on budget we advised the client to make a small number of sacrifices to the desired functionality. In an ideal word the students would have their own secure admin area to manage their accounts, see stats & upload products. But we have kept things for phase 1 very simple. BuyStudentArt will have some manual processing of student accounts. The idea is that we can get the project up and running and revise the back end functionality in a later phase.

We like to phase many of our clients projects for a number of reasons:

1. Start ups can test the market without massive initial investments
2. Phasing allows investments to be made in-line with growth/return
3. Project to go live sooner (and start earning money quicker!)
4. Live user feedback will allow for better specification of future enhancements

The key to a successful phasing is identifying the core elements of a project that must be in place to launch. To ensure the best possible chances of success the look and feel of the website need to be spot on from the outset. It also goes without saying that it’s also really important that  the site should be really well coded – skimp on this and you’ll miss out on all important visitors. Where you can make some cost savings without too much sacrifice is usually in the back end/processes. But it’s really important that you discuss these with your developer so that the site can be built to grow – you don’t want to have to start from scratch 12 months down the road.

Back to BuyStudentArt. This website has been built using Actinic v10. This powerful e-commerce platform includes a ton of brilliant features which we have been able to incorporate without reinventing the wheel.  Chris is an experienced developer so has been able to dig deep into the core Actinic code to customize functionality to allow us to create a pixel perfect interpretation of the original design.

The site is not live yet, we have a few custom forms to add in and then we are ready to go!

Website Examples | 2.08.2010 15:17 | No Comments

New website for Marketing Consultants Tangled Oak

Tangled Oak are a high end (read as expensive!) Sales & Marketing Consultancy targeting large corporate organisations and SME’s.  A typical client would be of board level or business owners direct. Tangled Oak are not sector specific – their existing clients include companies in industries such as Healthcare, Security and Technology.

The websites brief was to create a clean, modern, fresh and easy to navigate website.  Not too corporate as they are a small company and wanted to retain a personal and friendly appeal.  We had a logo to work with and Kay was also keen to incorporate blue into the design.

We have kept that layout simple yet effective.  The menu on the left allows for lots of pages with longer page names.  Clear contact details are included in the banner and a super testimonial on the bottom right to create confidence.  Shading and gradients are used in the background to simply lift the page without detracting from the content.  We have also included a glossary at the bottom of the page, this acts as a quick link to the glossary term and is a fab way to include keywords.

We will be building the website in the next few day which will include a branded blog and a newsletter sign up page.  Tangled Oak will be using our own user and SEO friendly CMS to enable them to update the website in all respects.

Website Examples | 29.06.2010 12:20 | No Comments