It’s been a while since I’ve posted — I blame the Summer (although admittedly my last post was in February…)! As the MA starts again soon, I thought it would be a good idea to catch up on the back log of posts I said I’d write before the end of term in May, so here I am writing them at the end of September!
The first of my flurry of posts is on the redesign of my small business website — The Bike Shed — one of our assignments for the Content Management module. This was hard. I thought building the original was difficult, but actually redesigning the site and trying to incorporate everything we’d learnt in class was pretty tough — php, mysql, javascript, SEO, layout, responsive design, branding, error 404 page.
I did a critical analysis of my original site, and came up with this: re-do the whole thing. There were so many elements that needed to be improved and incorporated that it would be easier just to rebuild the whole site rather than trying to fix things in the original. I’ve fleshed out the major things that I changed in my redesign below:
Overall
A big headache of mine was trying to fit my own brief — a site that tailored to both children and parents without it looking too childish. In the end I opted for a flat design, and although it could end up looking a little bland, at least it would look neat and less amateur-ish? I also wanted a design that could be made easily responsive, and would work on any screen.
I wanted each page to include enough information for the user so that they’d be interested in visiting other parts of the site and exploring. Another way I tried to implement this was to have links to other workshops/events and products on each of those pages, so that it’d be easier for the user to navigate rather than having to go back up to the nav bar. A subscribe to newsletter option and contact form was also included so that visitors could keep updated with the latest ongoings, give us feedback, or have an easier way to contact us.
Homepage
I got rid of the horrible horizontal boxes that went across the page and decided to divide the page into two main columns, and three main sections: Welcome, What’s On, and What’s New.
In class, we spoke a lot about what a user wants when they come to a homepage for a business, so I wanted to include as much information in the Welcome section as possible: opening hours, address, contact details, and a little bit about the shop.
With the What’s On and What’s New section, I wanted to notify users of the latest event/workshop that was happening, and the latest products we have in the shop. This was to try and increase engagement from returning visitors, and to attract new visitors in terms of laying out the types of things and products that The Bike Shed offered.
I struggled a bit with the big image, and still not sure whether I should have chosen a photo rather than an illustration. The idea behind it was that it would be updated every week or so with a new image that advertised any offers we had in the shop. However, looking back at it now, maybe it makes the site seem a little less professional.
The Bike Shed: homepage
Colours
I revised the colours so that they were more pastel-y and a little easier on the eye, and as it was a flat design, I wanted to use colour to try and pick the site up a bit. I kept with the idea of each colour representing a different category: green for events, blue for workshops, and orange for products. Colourful and busy images were also used to contrast the design of the site.
Content
Some of the content was reused, however, I did have to rewrite a lot of it in order to insert keywords that would boost the site’s rankings. I also added in a lot more detail for the events, workshops, and products — providing timings, location/venue, price, description — information that users would want to know so that they could make a decision on whether to do a workshop or buy a product.
The Bike Shed: Accessories page showing the description and price for each product
Responsive Design
It took me so long to get the hang of this, but I was so proud when I finally did! I think the end result looks pretty good. I worked from small screen to large, so that meant having to think about what content I wanted and then planing around that, and actually it was a lot easier because it meant that I only had content that I really needed rather than adding in unnecessary detail. I did have a lot of fun trying to work out how breakpoints worked, and working out at which point the design on the screen should look different.
The smaller screens were a lot easier to deal with, whereas when it came to the larger screen sizes, I struggled to make the site look good – there was too much space, but I didn’t want to stretch the content across the page, so in the end I decided to limit the main content space and put a border around it. Looking back at it, it’s probably not the best thing to have done — but you live and learn!
The Bike Shed: small screen
The Bike Shed: medium screen
The Bike Shed: large screen
Process
I approached this redesign project in a completely different way, in terms of writing all the content first and sourcing all the images before I started on any of the building, rather than get distracted halfway through. As mentioned above, I started the site design with mobile first in mind and drew sketches of how the site layout might change at several breakpoints, going from small to big. I made sure that the HTML I used was semantically correct, used the BEM method for CSS (although I might have unnecessarily over-complicated things for a project this size), and included a bit of php and javascript too.
I was a little reluctant to use javascript, mainly because I was scared…but it would be silly not to at least try, so I used it for my gallery slider on each event and workshop page. I did try using pure CSS, but I couldn’t figure out how to make it move smoothly, so just ended up with a jquery solution.
Hopefully it’s an improvement on the previous one, but I still have a long way to go!!