The Brief

Website design/IA that explains the ethos behind Bristol Wireless (a registered ‘not for profit’ company) and the services they offer. They were looking to promote their IT networking/connectivity, Linux Terminal Server Project (LTSP), repair and IT support services to compete with fully commercial companies.

Target audience: Alternative users to those who use Microsoft Windows, a replacement for those who use Windows XP;

Measurable: To retain the popularity of the blog but to present the company services in a clear and effective way to attract greater take-up of these services; Usability and understandability.

 

Click on the images & zoom in to view the detail

Experience Mapping

FinalUserJourneyTemplate BW - New Page

The Outcome

  • “It’s always good to work with people who are amenable, hard-working, and who have a passion for what they do. Indu is all of these” – Jane Sheppard, Graphic Designer
  • A new website design/Information Architecture (IA) design following relevant ISO guidelines, UX best practice, including Nielsen’s usability heuristics, and ascertaining the user journey in finding the users goals and tasks by talking to people as potential users who knew nothing of the Bristol Wireless services as well as people who were familiar with their services
  • New Information Architecture (IA) – Used card sorting for user validation: streamlining their current IA which they had accumulated during their business of 12 years, by removing duplicated areas and ascertaining their main services, grouping these into the 4 main areas: Connectivity, Low power high performance computing, Support, and Service and Repair
  • Navigation tab ‘Media Coverage’ showing their extensive media coverage during their business of 12 years as a way to emphasise they are reputable, promoting them
  • Navigation tab ‘Our Services’ for clarity to show the services of Bristol Wireless
  • Navigation tab ‘Clients’ as examples of work with clients to show examples of services available, to promote these services
  • Designing the Information Architecture (IA) from user research into the areas: ‘About us’, ‘Our range’, ‘Our services’, ‘Blog’, ‘Endorsements’, ‘Contact us’
  • Copywriting: drafted wording for the website pages from talking to staff about their work and information they had available on their own wiki

 

The Challenge

  • Highlighting Bristol Wireless as a ‘not for profit’ company in a positive light
  • Not all their staff/volunteers were always available to participate in discussions concerning the new website
  • Although, there’s an internal wiki for all members to view the new IA for feedback, there’s a co-operative structure through which decisions are made
  • To produce an IA starting with a blank page despite there being a current website that was seen as a ‘living historical record’ of the 12 years they have been running
  • The popularity of the blog on the current website has overshadowed the services that the company offers, rather than complementing the available services
  • To retain the popularity of the blog but to present the company services in a clear and effective way to attract greater take-up of these services
  • The company didn’t want Google Analytics to be used in the research process. It would have given usage information

 

Outline of my work

A new website design/Information Architecture (IA) to:

  • Highlight their services
  • Prevent user confusion as to their services on the current website. This confusion was corroborated from my research of talking to users/potential website users
  • Present their community ethos looking at their organisation’s culture via talking to their staff/volunteers. On the website design I included the navigation tab ‘Clients’ giving examples of their work that has a local community focus

New IA

IA_New_BW

 

Old IA

IA_Old_BW

The new IA included:

  • Research involved talking to Bristol Wireless staff, users and potential users of the current website rather than using personas/scenarios to ascertain the design goals, devising the content, making sure the navigation was usable, easy to understand, usable, accessible and is organised in an understandable way. Also, included catering for those with little technical knowledge on the subject so it can draw in new clients/customers and they can pick up the topic quickly as well as the site being relevant and meeting the needs of those with technical knowledge on the subject
  • The concept for services in a box was popular, the box metaphor for wi-fi, routers (box-shaped). Reviewed websites as to how the company services could be displayed in a box.

Research summary reviewing other websites for the concept of services in a box, their competitor Microsoft website, as well as the websites from Linux Ubuntu and Redhat who promote/sell Linux Server Terminals: Summary Review

  • Further to this website review research summary, I incorporated lifestyle banner photographs for each page of a website design where the product is being used in everyday life, colour coding for the ‘Our Services’ on the top menu navigation bar, user feedback via the hover facility, large icons, wording located underneath the icons
  • Structured to account for 2 categories of users from research and divided these into 8 user types on whom the usability testing, including task analysis was done:

Those who use Bristol Wireless products:- accountants; office managers/CEOs; people who are looking for IT equipment, repairs, including home users of IT; Linux geeks (generally already have these users); businesses including those that link with the public (retail e.g public house (public/social places), amusement sector (i.e cinema,community centres/those who provide community space, film/art studios, wildlife centres (public/social places). Those whom Bristol Wireless would like to attract:- alternative users to those who use Microsoft Windows; home users (networking – home set-up); people who want a replacement for their Windows XP set-up.

 

Click on the images & zoom in to view the detail

The new website design/screen pages are listed below including annotations
‘Home’ screen page

1home

‘Home’ screen page – mobile view

Click on the images & zoom in to view the detail

Other screen pages:
‘About us’ screen page

 

‘Contact us’ screen page

3contactus

 

‘Our services’ screen page

 

‘Connectivity’ screen page

 

‘Low Power High Performance’ screen page

 

‘Support’ screen page

 

‘Service & repair’ screen page

 

‘Media coverage’ screen page

 

‘Clients page 1’ screen

 

‘Clients page 2’ screen

 

‘Blog’ screen page

 

‘FAQ’ screen page