For this assignment, I chose to create an e-commerce website selling mugs. I felt that wordpress is the better suited platform for myself since if I decide to pursue web related projects in the future this seems like the best choice for the type of client I’d work for.

My site is based on a fake online store selling graphic mugs called Matties Mugs.  The tone of the site is meant to be humorous, light and easy going,  I wanted to reflect that in the design. This will be portrayed through the use of colour, illustrations and textual content.

The aim of the site is to promote and gain consumer interest towards the products with the ultimate goal being that they purchase the mugs.  Another goal is to increase awareness for the organisation,  that will result in an increase of web traffic and consequentially repeat-customers. The design and overall aesthetics of the website is meant to represent Matties Mugs brand and make it easily recognisable through its simplicity, illustrations, colour schemes and finally the tone as mentioned above.

The audience for the website  consists of the general mass audience of coffee, tea  hot drink drinkers interested in purchasing graphic print mugs. Other target audiences for the website are people looking to buy gift mugs for others. Fundamentally the website is aimed at targeting those that like novelty mugs and either collect or have a bunch of them. Additionally, aimed at people interested in design and art based off the prints and the graphic design nature of the products and the  aesthetics of the website.  To cater to the broad audience, the functionality will be straightforward with a clear and simple navigation between the pages and the written content will be sparse since the main focus is the shop. Most pages will link back to the shop to direct audiences to it since it is the main purpose of the site.

The approach or treatment of the site will be reflective of the organisation’s voice and image.  For this reason, the site will be clean and modern.  As the site is for a non-profit organisation, the site must not look too high-tech, flashy or expensive.  A more basic design and interface would be suitable.  In contrast, professionalism is a must.  The organisation needs to be trusted, and endorsed by site users, therefore a professional approach is vital.  As the organisation focuses strongly on professionalism, the site will also need to be business-like and systematic, following a logical layout and concentrating on simplicity and ease of navigation, regardless of the user’s technological knowledge.

The Homepage

The direction of content on the homepage  will support the  minimalist theme that I will be going for with  a large header image slider that shows Matties Mugs branding and simple colourful background. As the core page of the site, I didn’t want to overwhelm the viewer with a lot of written content but rather communicating visually through the images similarly to what the mugs do.  The Homepage is the first introduction to the website and brand so I wanted it to be all about the mugs to convey the subject and purpose of the website. Having the  “shop”  call to action ghost button over the hero image in red, the viewer is faced immediately with  both a sense of purpose that leads to action and information on the site purpose. The second image links the user to the about section so that more information can be disseminated from the homepage, lastly the three images at the bottom is a product feature that links the user into specific products.   This is all to make it easy for the audience to get the information they need as quickly and efficiently as possible without having to search through several pages or being overloaded with a lot to read.

About Us

Unlike the homepage the about section is more written content orientated due to it being the background story of the organisation. The written content is broken up by a lot of white space to make the page not seem overcrowded or like a lot to read. Additionally, it is further broken up by little symbols with smaller bits of copy that provide quick bits of information. A call to action button is placed at the bottom of the page linking the about page to contact us since they are relevant to each other.


The store page is a woocommerce plugin that aligns the products in columns and rows and looks like a conventional store but is practical and displays all the products clearly. All the products are displayed on the first page and the user navigates through the products of their choice for more information. The shop is the only page on Matties mugs that has a sidebar. The purpose of the sidebar is to show the items in the cart and recently viewed products that makes it an easy shopping experience for the user allowing them to backtrack without clicking out to the page. didn’t play around with the shop layout design since I wanted it to be as straightforward and user-friendly as possible so that the consumers shopping experience isn’t overly complicated.


The blog links back with the visual orientated communication objective and will have large header images and videos in a single scroll function. For more written content the reader can click into it for the rest of the blog post.

Contact Us

Contact Us page is also another important page that is on the practical side it serves the purpose of informing the user about the necessary information they are seeking. People click on the contact us page to get a specific piece of information and do not want to hunt for it or spend a lot of effort looking for a number, there is no point making it sticky or content heavy to keep audiences on the page. That is why I went for a basic design that revolves around the contact details rather than focusing solely on aesthetics. The layout is clear and lets the writing  flow into one another divided by large bold headings and white spaces. Users are provided with a quick feedback process to directly email the organisation  from the page or on the left call, mail, email Matties Mugs. Additionally a mailing list sign up is provided to get the user more connected with the brand.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s