Original Site Analysis

Overall, for the website’s original design, I was satisfied with establishing a clear brand identity with the logo, colours and engaging copy.

I felt that the copy emphasised the benefits of visiting the physical shop, such as ‘smelling the fresh dough’ and being filled in on the local gossip, along with highlighting the history and craftsmanship, then went into the products.

However, the visual design did not seem to express this feeling of the physical shop in the same way as the copy, particularly on the homepage.

It was also noted that the website felt incomplete without having a footer or map. There were also issues with responsiveness that I needed to address and problems with the heading levels.

Summary of Improvements to the Design.

I have put a lot of time and effort into rethinking and improving the original design. I wanted to express the friendly atmosphere of the shop that I had described in the copy clearly in the visual design.

I also wanted to make the website feel more complete and improve all the pages’ layouts. This has included adding content, a footer, a map, and more images, particularly of people. I have also added the font of Playfair display to the headings to help reinforce the copy’s traditional feeling of craftsmanship. I also rethought how I used grids, considering user experience and page flow and improving responsiveness.

Although this was not an issue with the first website, I have added an additional copy to help further reinforce the benefits of visiting the Melton shop.

In improving the physical design, I have also improved the code, particularly the efficiency of the media queries.

 I also reexamined the code structure and the choice of HTML elements with accessibility in mind.  For example, I changed the heading structure so h1 and h2 were used logically, with h3 only used for the footer.

Design Improvements in detail

The Homepage

The Homepage was improved to make it immediately apparent to the user that the website is promoting a physical shop.

I have added the opening times in the header and the JavaScript element of ‘we are open’ or closed based on the shop’s opening times.

 The homepage also has the addition of the image of the shop front, with my logo on the front window.

This again establishes through the visual design that this website is promoting a high street bakery. It also gives the layout a key focal point.

 Added to the shop image, I have the address immediately underneath to emphasise that this is a physical shop at a street address.  I have also reworked the copy here. In addition, I have removed any underlines so that it couldn’t be confused with a link.

I have changed the image on our story page to a picture of a man with bread to give it a more welcoming feeling and again set that friendly shop-like atmosphere. I have also added quality products to give this copy a bit more life.

I have added a map on the homepage to enhance the user experience, so they can immediately find the bakery. This information is also in the footer as well as a street address and telephone number and links to other pages on the site.

As with many other pages, I removed the grid, which helped prevent responsiveness issues.

Overall, I have made this page feel more complete and give the user the immediate impression of the website promoting a physical local high street bakery.

Contact Page

Removing the grid helped with the structural issues that I was having with the layout of this page, making it neater and flow better for the user.

I centre-aligned the headings to fit this change to the layout.

I added an image of a phone and a croissant, which tied together the bakery and the nature of the page. This also enhanced the look and style of the page and made it feel visually more complete.

I changed the table to a definition list to create a uniform page style and enhance accessibility for this element and the address list. I also made sure they were centre aligned.

Lastly, as with the homepage, I added a map to enhance the user experience and reinforce that this is a local high-street shop they can conveniently visit.   

About Page

I removed the card layout. This helped give the design more breathing room and removed any responsive issues with variable margins.

I replaced the section two article elements for better semantics and accessibility by removing the complex section structure. I also reduced the headings to just two and added the new Playfair font. This was visually appealing and had a traditional look which fit the copy of the shop’s history well.

I added a selection of images to make the page feel more complete. I added a picture of a sign saying Melton is the rural capital of food to highlight the local and regional identity of the shop to the user.

I added an image of two smiling people with aprons (to represent members of staff). This reinforced the idea of the friendly atmosphere that the physical shop would offer customers.

Finally, the picture of Melton high street emphasises it’s a local high street bakery, which would hopefully help persuade local users to visit.

I also added a quote from a customer, adding a strong visual feature to the page, helping to bring the design together and emphasising further the unique experience of visiting the bakery.

Product page

Similar to the About page, this was given a redesign in terms of its layout removing the card structure to remove the responsive issues with the variable margins.  I also used article elements rather than section elements.

For mobile, I kept the layout to a 1 column grid before switching to a three-column grid for larger screens. This gave the design a visual balance and effective use of white space across different viewports.

I also added another image of a person with different products. To again build the visual impression of this website promoting a physical shop on the high street.

To reinforce this point in another way and to add to the copy’s effectiveness. I added more quotes from customers relating to the products. Again, to reinforce the experience of visiting the shop.

As with the About page and the other website pages, I also rationalised and changed the heading elements on this page.

Adding these extra elements and cleaning up the overall layout, making it neater, has enhanced the page’s user experience.

It looks visually attractive, responsive, and more complete than the product page for the original website.

Brief Points Addressed

Use of PHP and server-side includes.

I have used PHP server side includes on all pages for repeated common elements such as the navigation, the header, and the footer. This modular approach helped when needing to make changes to these elements, ensuring I didn’t have to make a change, on every page of the website, just on the code inside the PHP include file.

UX considerations

As I have described, I have always considered the user experience when redesigning and working on the pages that I have improved.

I also feel the amount of time I have put into considering the accessibility of the page has benefited the overall user experience of using the website.

Error 404 Page.

Creating the error 404 page, I adopted the same style and colours as the main website and used the Richardson’s Bakery logo.

This establishes a sense of familiarity for the user so that when they make a mistake in the address bar and find themselves on the 404-error page, they don’t feel like they have left Richardson’s website. To add to this sense of familiarity and put the user at ease, I’ve included a clear link back to the main website.

Following the brief, one of the critical purposes of the site is to get people to visit the physical shop.

Also, users who have made a mistake and ended up on the 404 page may be in a rush. They, therefore, will want to get all the information they need to visit the shop without needing to return to the main website.

I have therefore put the address, telephone number map, and opening times all on the 404 page. The user does not have to return to the main website for vital information. They have a choice, they can use this information to find the shop or click the link to return to the main website.

Offering this choice enhances the user experience and will encourage customers to visit the shop and possibly check out the entire website later.

Features that are inclusive and sustainable

The inclusive features, I think, are covered by the work done on making the website accessible and the general user experience. Equally, the work on responsiveness has ensured that the website will be sustainable.  

Specifically on image optimisation.

All images added to the visual design were optimised through the same process used in the original site using XNconvert after art directing in Photoshop.

I improved the original CSS code for image optimisation using max-width 100% and height auto, rather than needing to use max-width to the exact width of the image, i.e., 400px in the CSS.

I also found that with this updated CSS, I didn’t need to have the images inside the figure element for them to be responsive.

JavaScript

I have added a custom message, scripted to appear based on the time and the shop’s opening times.  So, if the time is equal to or more than 9, it reads, ‘We are open’, and ‘Sorry, we are closed come back tomorrow’ when the shop is closed.

 I adopted the body font style, with the JavaScript message highlighted in the caramel colour to emphasise this to the user.

Considering the progressive enhancement approach, I started with a message that would appear without JavaScript.  If the user does not have JavaScript turned on, they will still receive a message welcoming them and telling them the shop’s opening times. So they will know whether they are using JavaScript or not when they can visit the shop.

However, if they do have JavaScript here turned on, it progressively enhances the user experience by telling them the shop is currently open or closed, engagingly.

In addition to this I also added a print web page button, to enable users to print the current web page. The JavaScript involved for this used an event listener on the button and the window print method. So when the user clicked on the button, it would open up the print dialogue page and enable them to print the HTML document.

I feel this was a nice addition in terms of overall user experience and in terms of accessibility as it may be useful for visually impaired, or Dyslexic users to be able to print out the HTML document.

SEO

Keyword Strategy.

Developing a keyword strategy, I spent time in Google Keyword Planner analysing the content on my page and seeing where I could improve.

Analysing the data, I landed on several key strategies using the copy. The first was to take advantage of what was working well, for example, words such as ‘craftsmanship’ and ‘, quality’, ‘traditional’, which also played to the key means of persuasion in the copy for people visiting the shop, of the bakers’ high skill and history.  I added to this with emphasis on words such as ‘artisan’.

 Any mention of the word ‘local’ or a specific place like Melton, therefore, I decided to build this within the copy of my website when I had the opportunity.  

My final more general strategy was picking words with a good traffic volume, mostly between 10-100k but with less competition.

This led to several changes. For example, on the product description page, I changed ‘sweet treats’, which had high competition, to ‘sweet delicacies’ (which I also felt fit well with the tone of the copy). I included phrases such as ‘hit the sweet’ spot, which was engaging copy and had high reach without high competition.

It also influenced the description on the opening page, mentioning favourite, local and all words which had performed well.

 Other minor changes include changing sourdough loaf to better-performing sourdough and adding quality to the products like on the homepage. These were easy changes that could easily improve the site’s SEO.

Meta Description Tag  

To improve the site’s SEO, I added a meta description tag which would enable anyone searching for the site on Google to read a short description of the site, hopefully persuading them to visit the site.

I wanted to ensure that the description was persuasive and informative, mentioning where the bakery was and incorporated elements of my keyword strategy.

My meta description aimed to be persuasive by using the direct address of ‘your traditional local bakery in Melton’, catching the reader’s attention. I also drew attention to their reputation and history, describing how they had been ‘providing the finest quality baked goods since 1953.’  

It was informative, mentioning the location, the nature of the businesses and the fact that it was local. Whilst adopting elements of the keyword strategy by the terms local, traditional and quality.  

Other SEO considerations

 SEO and Accessibility, user experience, and responsiveness have a close relationship.  So, therefore, by focusing on these areas, I have ensured that my website performs well with SEO.

For example, title elements, headings, and overall semantic HTML structure were all features that I considered important to the site and included for accessibility which also helps SEO.

Accessibility

I created an accessibility statement which is linked to the website. This is styled due to the large amount of text on the page to reinforce legibility.

In the accessibility statement.  I have detailed the improvements I have made to the accessibility of the original website and the principles behind them.

A summary for this report follows below.

I have improved the semantic code by fixing heading-level issues and using more semantic elements, such as articles over sections.

I have ensured all images, including those added, have detailed alt tags. I have used aria-labels considerately, such as on the Nav and interactive elements. As I did in the original design, the SVGs also have description tags.

In addition, I have made sure that all colour contrast on links and text is WCAG compliant, passing the AAA rating. I have also made enhancements to the Nav and Footer links to scale up to a larger size on hover to help visually impaired users.

 I have also ensured that accessible elements originally established in the design, such as the clickable areas, continued to work effectively.

I have added a skip to the main content button to enhance the user experience for users using a keyboard to tab through the website. Lastly, I have added a print out web page document button. This may be useful for visually impaired users, or those with dyslexia or other cognitive difficulties who may find it easier to print out and read it away from distractions.

Responsive Design Improvements.

I set out to improve the responsive design regarding the overall layout and improving the efficiency of the code in the media queries.  

One of the significant improvements I made across the design was how I used grids.

 I improved the layout of the product page, removing the card-style design with the variable margin. Instead, I aimed to create a design with a more flexible structure, with the grid only applying specifically to the content I needed at specific viewports.

On smaller screens. It was styled so you could scroll down in a one-column grid. Favouring the user experience of using a mobile or a tablet, or a smaller laptop, with the appropriate padding and margin sizes.

 On larger screens (1000px), the content was set out in a three-column grid, with each piece of content neatly spaced with plenty of breathing room.

I decided the content had a more natural flow and a greater user experience by removing the grid on the homepage, contact page, and about page. It also helped to increase flexibility when experimenting with the layout of the pages, in particular with the added images. This allowed the overall visual design of these pages.

As mentioned, the other significant improvement was simplifying the media queries. Changes in the visual design helped with this, for example, needing fewer grid queries and complicated section queries because of the removal of the card structure.

The overall layout so now more naturally responsive, and so, therefore, did not require as much complexity in the code.  Media queries instead are more targeted and efficient. This helped in terms of fixing errors and improved the overall design.