In this post I will continue with the wireframe analysis series. Just to remind readers, I am doing a series of blog posts, in which I review wireframes to give beginners in this field an idea of what wireframes can be like and what they are intended for. This time I am reviewing a wireframe of a one-product e-commerce website.
Goal of the wireframe:
Create a low fidelity wireframe of the homepage of an e-shop that sells one product, namely organic compost tumblers.
Here is the wireframe:
The Pluses of the Wireframe
Wireframes are intended to provide focus during critical design decisions. So, most importantly, this wireframe focuses on the main idea of the website, without introducing any distracting elements. From this wireframe we can see what the main information on the home page is: product image, introductory paragraph and product highlights. Since it is a one-product shop, the wireframe is quite simple, which means that the website is also quite simple. Apart from the home page, other important pages are the product page, which can be accessed from the tab “product” and from the button “learn more”, the purchase page which can be accessed from the tab “purchase” and from the button “buy now” and the FAQ. It is clear what the structure of the website is: tab navigation buttons leading to the most important information items are on top, and extra page links of secondary importance are on the bottom. In terms of information architecture and navigation, this wireframe is representative of a clear and reasonable information structure.
The user interface design of this website is simple. And that is a good idea. A one-product web-shop must be simple and attractive enough to convert visitors to buyers. The less possibility there is for confusion, the better it is for the website.
The Minuses of the Wireframe
I think it is hard to go wrong with a wireframe as simple as that of a small one-product website. It is a great first step to determine the key elements on the website and their relative position and size. One piece of criticism that I have, however, is that the text looks a bit cramped. It could be better to break the introductory paragraph up into two and perhaps use a bigger font. Some additional information on the actual content of the paragraph could also be helpful as a basis for decision-making.
I give this wireframe a score of 4 out of 5.
