Sainsbury’s components

A project looking at what new components and functionality we can add within the Magnolia CMS.

Competitor analysis

Looking into how our competitors serve up content containers to their customers.



Taking the personas and turning their needs into question to be answered

and then using these to create “How might we” questions

  • How might we allow our customers to find out more on our products, with interrupting their shopping mission.
  • How might we introduce new products to customers that relate to their previous shops.
  • How might we let customers know of upcoming offers.



Starting to sketch out ideas


Supplier site

A project at work where I was asked to build a go to website that would help answer the questions that our supplier have, when booking content onto the Sainsbury’s website.

Atomic design

When first joining Sainsbury’s, I found that the team were using templates for their page builds.

After talking with a number of the producer team I found that they want more control within their pages. As the team did not have HTML skills it caused a lot of pages to break as they tried to change their pages.

Here I instigated the move for our designs to be component based. Allowing our producer team to changed the content of the page and quickly and easily create their own templates without the need to brief a new template and duplicate content.

First building the atoms that allowed the producer to choose the text format they wanted to use within their content.

Then producing multiple templates the producer can use within their pages and drop content into.


SEO Notes

General rule is to make the content as useful and as easy to understand for our customers. Google will see this, and raise our pages up the ranking.

When putting a SEO plan together you will need to allow around 2 months before you see any improvements through on Google. Ideally content pages should be very specific to a given topic—usually a product or an object.

SEO Checklist

To help you when building your pages please use the checklist below:

1 Title tags

Added within Management center, this one of the most important SEO parts to the page. PHD will be able to supply the best copy to use here.

2 H1 title tag

Wrapping your headline tag within a <h1>tag. At the moment Management centre automatically adds this to the page, but will also change the hierarchy name as well.

3 Headers

Wrap your content in the correct tags. Eg <h2>, </h2>, <h3>, so Google can see the page is correctly structured.

4 Content

Use engaging imagery, text content, videos to show Google that we have a breadth of content on our subject type, and make sure that content isn’t duplicated within your pages. Also provide unique content about the given subject of your page.

5 Text

Drop in the keywords you want to appear highly for, within the body copy and headers of the page. Don’t keyword cram as this will lower your page within Google. Brightedge tends to allow the same keyword to be used around 10 times in the page.

6 Keywords

Wrap your content in the correct tags. Eg <h2>, </h2>, <h3>, so Google can see the page is correctly structured.

7 Image size

Use images no bigger than 100KB and use to help reduce the size of your image without reducing the quality.

8 Image name

Within the filename of your images use the target keyword for that image.

9 Alt text

Properly describe the context of the image within the alt text, remembering to add in the keywords you are targeting for that image.

10 Link text

Within the anchor text describe the page you are linking to, so both users and search engines can understand where they are going.

11 URLs

Make URL’s friendly, by making these shorter and keyword rich.

12 Responsive

Make sure your page renders correctly at both maximum and minimum width.

13 301 redirects

Redirect old redundant pages to the latest version to reduce duplicated content and allow our old pages that are high ranking in google to have a destination.


What Google is looking for

“Remember that Google cares a lot about how visitors interact with your content. If users click on your page from the search page but then bounce back to search, this will drop you down the ranking”.

“Think about the searcher. Give the user the experience they need and the answers they want”.

Make your content — semantically, lexically, and logically.

  • A) is on-topic and relevant,

  • B) includes critical answers to searchers’ questions, and

  • C) has credible, accurate information.