VISUAL STRUCTURE HOME PAGE

The two pages that we chose to analyze and redesign are the home page and the product page of the Phonehouse webshop. To analyze the structure, we chose to divide the pages up into blocks and sorting them according to their functions. Each of the page’s elements are explained and rated on their relevance. These ratings for relevance served as a foundation for the functional redesign.The visual structure of two pages from the ‘Phonehouse’ website are shown, landing page and product detail page. Each page can be separated into three components: Header, Content and Footer. Within these three components, websites differentiate from one another using a wide variation of elements (such as shortcut buttons and bars). The elements are described and a degree of relevance is given in order to help us redesign the functionalities and visual structure of the ‘Phonehouse’ website.

The relevance of each element indicated in the text is rated with a grade from 1 (not important) to 10 (very important). To determine these grades we only look at the functionality of each element, not its aesthetic appeal or design. The relevance determines whether an element should grasp the viewer’s attention or not. Thus, in the redesign elements with a high relevance will be perceived to be more present.

                 

Landingpage

Header

1 Logo

Illustration of the logo of the company. This logo is also functioning as a home button.

Relevance: 10
Image of the brand, shows brand identity and usually displayed at the top of a web page. When getting lost on a website it functions as a control point for the viewer, allowing them to navigate back to the landing page of the website.

2 Search box

A single-line text box with the dedicated function of accepting user input to be searched for in the database.

Relevance: 7
Easy to use and allows the visitor to quickly scope and navigate through the options of the website and allowing the user to find what he/she was looking for.

3 Service menu

Direct links to user services as; customer service, order state and shops.

Relevance: 6
Shortcut buttons which are displayed multiple times throughout the website. Increases ease of use, but might interfere with the web page's overview.

4 Navigation bar

Navigation through all the options/parts of the website. This navigation bar is split into different subgroups which are titled with different categories (home, telephones, sim only, extend, prepaid, outlet zone, accessoires, tv internet and calling, service). All of these categories are buttons which connect you to the relevant page.

Relevance: 10

It is the main guidance point for the website, without this navigation bar the user would get lost. It allows quick access to certain main-parts of the site. Sub-menus appear when hovering over the buttons

5 Unique selling points

Short displayed unique selling points of the phonehouse(‘s webshop).

Relevance: 7

Brand identity and image. An explanation why the viewer should choose the Phonehouse. It’s main function is promotional, but doesn’t contribute to the usability or aesthetics.

Content

6 Advertisement

Advertisement image with text, indicating special actions on buying mobile/smartphone’s.

Relevance: 8

This part of advertisement can convoke three different things: activation, information and inspiration. This part is used as a purchase trigger. It shows a promotional deal, and functions as main eye catcher.

7 Suggestions

By clicking this button you can give suggestions on the website.

Relevance: 2

No one will visit a webpage with the intention to review it. This option will almost never be used. If there exist a complain, people will contact the customer service or complain elsewhere instead of clicking this button.

8 Side information

This small block of information will always be shown at the right side of the webpage. By scrolling down it will hover with you.
Relevance: 5

It guides people who want to see if they can extend their phone deal. For other viewers it might trigger annoyance, since it follows the user when scrolling down. It is one of the few elements that separates itself out of the grid, although it is mentioned within the content grid as well.

9 Product catalogue

Here are some product deals shown. Besides that it gives an indication of the products Phonehouse offers.
Relevance: 7

An overview of promotional deals with shortcut buttons to quickly access more details. Showing the stores variety in products and options is important, but can overwhelm the viewer with information.

10 Product deals

This is another kind of advertisement. This advertisement shows different sim only deals and tries to activate and inspire people about the newest deals.
Relevance: 7

Again an overview of promotional deals, this shows another product category. It uses a different grid to show the possibilities and actually only shows three deals. Again a it allows quick access to more specific details about the deal.

11 Search function

By selecting a brand and model you can search for a specific phone.
Relevance: 4

A search bar to browse through the phone catalogue. Most people searching for a specific phone would go to the phone catalogue using the navigation bar. This element’s position being quite low on the landing page makes it irrelevant.

12 Advertisement

This advertisement box contains the same information as the small box on the right side of the webpage. The function of this box is also incite people to think about or fulfill a certain task.
Relevance: 5

The second advertisement suggesting the viewer to check the extension of their phone. If the viewer would be interested, he/she would have used the shortcut earlier provided.

13 Product details

This part of the webpage will cause impulse purchases. When someone plans to buy a new phone he or she could directly search for a specific accessoire.

Relevance: 7

It shows variety of the products the store sells, and hints something to the viewer that is often easily forgotten.

14 Product deals

By clicking this button you will get a complete overview of the prepaid deals.
Relevance: 4

Prepaid deals is something a viewer most likely will specifically look for, thus using either the navigation bar or the shortcut to promotional deals (10). Having another element on the landing page for the same function doesn’t seem necessarily and only confuses the viewer.

15 Product details

Not only mobile and smartphones are offered but also complete packages with tv, internet and telephony.
Relevance: 5

A quite specific option, users will most likely search for in menus at the beginning of a page. Although, it is understandable that the Phonehouse likes to show their broad portfolio.

16 Information

Advertisement and information. Here you can find everything you want about the iPhone.
Relevance: 2

It is not really necessary to put an information block about Apple on this webpage. If you are looking for information about Apple you will visit their own webpage. It ensures the viewer of the websites authenticity, something that doesn’t need so much attention.  

17 Providers

All providers are displayed which have a cooperation with the Phonehouse. If you click on a certain provider directly all the phones accessible with that provider are selected.
Relevance: 7

It will be really useful to know which providers are offered and which combination is possible with a certain mobile phone. Most of the time visitors will visit goal oriented and look directly for their existing or ideal provider. There is also a high possibility the Phonehouse has to place the providers on the page as sort of an advertisement.

Footer

18 Shortcuts

Links to certain important parts/options of the webshop. A general overview of multiple elements that can be found earlier, but without the coloured buttons and commercial aspects.
Relevance: 7

Most websites place such a menu at the bottom of their landing page, for specific options. Most of the options are accessible throughout the page, but a general clean overview that doesn’t grabs visitors attention is always good for increasing usability.

19 Social Media

Icon links to the social media accounts of the Phonehouse.
Relevance: 6

Commercial elements to expand the web store's network on different social media’s. Almost always a must on every web store, but shouldn’t be promoted too big. Understandable that it is placed in the footer.

20 Copy rights

Copyrights and Rights
Relevance: 9

It’s importance is obvious, it should remain visible yet not too noticeable for the visitor.

21 Hallmarks

Certificates and hallmarks the Phonehouse has.

Relevance: 9

Same as the copy rights.