The BarbLog

Design, front-end dev and other random thoughts

Planning

All of the posts under the "Planning" category.

Website makeover – YumYum.com (Part 1: Planning)

[To avoid potential misunderstandings: this project is for educational purposes only, not a real commission]

The site

To start off with, I looked at the existing homepage and its content and thought about how I could group/lay it out more effectively, as at the moment it’s largely just plain text which is too much to read for a front page and is not at all visually stimulating for the user. Marked up a couple of things for reference.

content-layout-ideas

Home page


Read more →

Barbara December 27, 2013 Leave A Comment Permalink

Sketches and mockup for ‘Warm Bean Coffee’

This project involves building a website for an imaginary small business in a town in south-east England. I started out with a vague idea of something warm, inviting and slightly retro, but also professional. I started by simple sketches on my tablet using my finger – helped me focus on the wireframe and colour palette rather than smaller details. I then played around developing those ideas in Photoshop and also created a logo.

Sketch6322488 Sketch63222727

This is what I worked from – it’s not pixel perfect and it’s not complete yet but I think I have the colour scheme and branding more of less defined now. The below also doesn’t show the responsive version which I designed in the browser as I went along. Check my coursework website (link in the right sidebar) for more details.

warm-bean-wip

Barbara November 12, 2013 Leave A Comment Permalink

3 new websites: Inspiration and suggestions

My approach to this task was as follows:

  1. Look up similar bands’/businesses’ websites, observe any recurring elements
  2. Consider what messages my client would want to convey/what the site should do, based on the above and my own assumptions (in a real situation of course this would be replaced by actual discussions with the client)
  3. After establishing key functional elements, consider the aesthetics – also based on point 1 and my own assumptions.

Please note, I viewed and screengrabbed all the below sites on a tablet so on a desktop they might look a bit different but hopefully not too much.

Client 1: The Dead Sea Squirrels, an upcoming indie rock band from Sheffield

INSPIRATION GALLERY

The trend I noticed after looking through around two dozen indie/rock band websites was the abundance of white type on a black or other very dark background. I can say that in around 90% of the cases this was the design and often it resulted in a visually far too busy home page due to all the information they had to cram on there; white on black is not the best for that in my opinion so I would not take that design direction. I did find The Offspring’s website better than most though, as it was relatively uncluttered with clear sections and a more organised look and feel (score! I love The Offspring). Muse’s isn’t bad either apart from the dotted lines separating the sections and the repeating background which are both visually distracting for me. Again, too much bright on black results in this for me. The RHCP’s site was the only major band’s that steered clear of the white on black trend and it was very refreshing and interesting – I would take elements from this design to spice up and distinguish my band’s page from all the others. However a good example of a mainly black and white design was InkedMag’s one which I would probably use as a basis for my layout if the band did want a more conventional colour scheme.

As for the elements to include on the site I found RHCP’s tour location map a great idea, if the band plans to go on tour, the pins let you see straight away if the band’ll be near you instead of having to scroll through simple lists on a page. Going back to the Offspring and Muse, what they do right is show tour dates on the front page, as this is one of the most important reasons you’d visit a band website. Recent news and merchandise also feature, as do social media links. The RHCP also have the option to listen to their latest release then and there on the site, in a toolbar at the top.

Looking at the band name it comes across as slightly playful, a band that doesn’t take themselves too seriously. As such I imagined a grungy, cool header graphic with a squirrel and their name incorporated in it that could be the header image on the site and used as a further branding element later on. For this I found Design Shard’s and Misprinted Type’s header images to be a good starting point. For typography Von Dutch is also one to look at, as well as for the eye-catching colours on their site – although for squirrels I would think of more red than orange the way that orange pops is something to consider – look at the saturation level?

Client 2: Beech Farm, a homely bed and breakfast in Cornwall

INSPIRATION GALLERY

This was the hardest of the three. I browsed B&B and guesthouse websites all over the UK to find some inspiring ones… most of them were awful! But this means Beech Farm will start out with an advantage, because we’re aware of what we have to do better. Many sites were cluttered, not visually pleasing and therefore didn’t look trustworthy – something that I find very important for a site advertising such services. Therefore I was pleased to come across Park View Exeter’s page that was closer to getting it right: contact information clearly visible in top right corner; concisely worded navigation instantly accessible on top of page; and a nice image to show off the location. I particularly liked their Find Us page that had a downloadable PDF of directions to the accommodation and had a map and clear directions on the page itself too. Every place should have this, especially rural ones where you can get very lost and don’t have anyone to ask for directions in the middle of the countryside, possibly with no mobile reception either.

Woodbine Guesthouse has a slightly less obvious menu bar on the left but the home page contains a Book Now widget on the right making it easy to check if they have rooms on your chosen dates. They also have a summary of what they have in all of their rooms without you having to check the rooms page separately. Contact details are also visible below the left hand nav, though I would put them into the header as Park View did. Woodbine has further good elements that should be included on Beech Farm’s site. Their rooms page is clear and lists room facilities and that room type’s availability in one place. Their Things to do locally page is a nice plus and something that could put them ahead of competitors in SEO terms: it contains local information and activities so if someone was looking for things to do in Exeter first then deciding on the hotel, they would show up in search results and might get a booking straight away.

Design-wise we need to consider the ‘homely’ aspect of this B&B – I’m thinking muted neutral or pastel colours, to give a cosy cottage feel to it, with some green in there to signify the countryside and the fact that it’s a farm. The typography should also be friendly and not too modern, and we would need some professional-looking images to go in the header and rooms sections (not photos taken by the owners, those tend to make even the best design look bad). We need the customer to trust this place to provide high quality service and the site needs to reflect that professionalism in every aspect. I found a couple of blogs that had imagery/colours/typography to use as a starting point, although of course we need to be aware of making the fonts easy to read and make the site accessible to all users.

3. Primary Health, a private healthcare company based in London

INSPIRATION GALLERY

To be honest I find healthcare websites extremely boring so this part of the assignment was the most tedious to write up… Of course I understand that these sites are more geared towards usability and good information architecture than prettiness and once design conventions are established in such industries it’s not easy to break away for fear of coming across as unreliable (because you’re displaying something in a way the user is not expecting you to) and that’s very important for healthcare. But I tried to find elements in the sites I chose that would make Primary Health stand out at least a little, to make them more personable.

The child’s drawing and slider text on Bupa’s homepage is a good example of this; it aims to reassure the viewer that they are important. The CTA button is very clear and the navigation layout presents not too few and not too many options. The ‘contact us’ link and the search bar are where you’d expect them to be. The only potentially misleading thing is the carousel where the list of slides on the left looks very similar to the top navigation so it could result in someone clicking on one of them thinking they’re using the navigation, so I would be aware of this when creating my design. Otherwise Bupa’s homepage does a good job of presenting various options, contact details and the daily health feature in a way that is easy to skim and read. Their footer is useful as well, listing quick links to the most important pages under each section heading.

Blossoms Healthcare has a simpler layout and quotes and imagery appearing to be from real customers, to build trust. The calming green colours are nice although the contrast looks like it might not be high enough for accessibility guidelines. Their bookings and contact details are very clear to see, as are their locations at the top of the page. This layout was the one I like best but this site has much less information than Bupa. Depending on how much info my client has, I would not necessarily be able to simplify it as much as Blossoms did.

Spire Healthcare is in the list for their ‘Find a hospital’ widget on their home page which is very useful – but only for people who have Flash! I would integrate an interactive map using alternative technologies since as we know fewer and fewer mobile devices support Flash (Android 4.something has stopped too, in addition to iOS). BMI Healthcare has a similar tool for searching for treatments which we could also consider adding to my client’s site depending on whether it applies to them. BMI’s patient information page was also a good idea – large boxes for the most common queries and smaller ones for less common ones, all with friendly photos of people to make the experience less impersonal for the user.

The last screengrab, Clinica’s site, is in there because of their header advertising their prestigious address (if you’ve got it, flaunt it, as they say!) and their photos of high-tech equipment – both, again, creating the impression of reliability.

The importance of good UX and planning

‘Name the top three factors that make a good website’ – this was the task we tackled in groups on our first proper day of teaching, and the one that every group included, that is arguably the most important of all, is the user experience (UX). No fancy design or witty content will make your website successful if the user can’t find what they’re looking for, or has trouble accessing your content even if they do know where to look.  I’m a project manager and the first line of client support at a company that develops websites on their bespoke CMS platform, and this task made me think about times when I came across examples of this problem in my job (we don’t do design, only implementation, so we are presented with the signed-off templates already). Often, planning is not carried out as extensively as it should and design seems to become more important than making sure a site presents its otherwise relevant and useful content in a clear and user-friendly way.

The most recent example happened only last week, when I had to amend something on one of our clients’ sites I rarely need to access. I wasn’t familiar with it and when I had to find a certain feature I struggled; we can probably safely say a new potential customer would as well. I was working on the pages jointly with a colleague and he also said he found the site a bit difficult to use – and he’s used it a lot more than I have! This is a client that sells luxury products and the website is beautiful in terms of colours, graphics and typography, but perhaps in their quest to create something beautiful the designers forgot about making it usable as well.

The other important aspect related to UX to consider when creating a website is information architecture hand in hand with planning. If your information isn’t structured properly then the UX will be poor however well-designed the user interface itself might be, and good information architecture obviously involves meticulous planning. I am at times baffled by websites that don’t appear to have had sufficient thought going into them in the planning stage; this is where a project manager should come into the picture and set out the processes the team and client should adhere to before doing any visuals. The excellent Web Style Guide by Patrick J. Lynch and Sarah Horton dedicates its whole first chapter to processes and planning; I strongly recommend reading it as it may highlight things to consider that you might not have thought of before – I learned a lot from it despite having experience in managing web projects. It’s a great read otherwise as well, by the way.

As an example I can again offer two of our clients who had a site built relatively recently and had had plans to incorporate lots of extra information after some time but this doesn’t appear to have been considered during the design process.  Now we have to make do with the available layout and try adding bits and pieces without changing too much; it would have been much more straightforward to make the design flexible enough to accommodate the changes in information that would come up and plan the UI and UX accordingly instead of trying to squeeze it into the existing setup. To have another example here, I personally find the HMRC website somewhat confusing to use as well; I have tried and failed on multiple occasions to find a definitive answer to some questions I had about self-employment and NI contributions as there are so many links directing you to different areas of the website and suggesting conflicting solutions… I ended up having to call their support helpline. Anyone else with this problem or am I just HMRC-ically challenged?

Barbara September 21, 2013 2 Comments Permalink

get_footer() ?>