PRESENTATION

REPORT - INTRODUCTION & READING

The Phonehouse is a British company that has over 2900 stores over nine countries in Europe. Their goal is to use the next couple of years to expand and strengthen their position as market leader for largest European telecom store. All the more reasons to have a critical look at their website.

Online shopping is starting to take over from physical shopping, and thus, for the Phonehouse to strengthen their position as market leader, they should focus on online sales instead of expanding the amount of stores.

The Phonehouse believes that they differentiate themselves from the competition by offering the best advice, lots of contact points (200 stores in the Netherlands) and being independent of providers (allowing the users to compare providers for the best deal).

Especially the first and the last of those USP’s can be implemented in their webshop. And when executed well through good webdesign, it could help the Phonehouse strengthen their position as market leader.

This report shows a redesign of the current (Dutch) Phonehouse website, based on an extensive analysis where accessibility, functionality and aesthetics were taken into account.

The first part of the report will focus on the analysis of the current webshop, where we looked at the website’s structure as well as its color use and accessibility (for colorblind people). The second part of the report focuses on the functional and aesthetic redesign of the website. For reading the blog we recommend to start reading from the first blogpost. Then you get the right structure of our process.

FINAL REDESIGN PHONEHOUSE WEBSHOP

INSIGHTS ON REDESIGNED WEBSHOP

The Insights by Fabrique will help us by making choices for our redesign. First a selection of different Insights is made based on the lecture of Wouter Middendorf and our own design requirements. In the pictures below the selected Insights are linked to several redesign elements. (Middendorf, W., Insights, Fabrique, 2012)

GETTING INSIGHTS

FIRST IMPRESSION REDESIGN

COLOUR PALETTE

Because the brand identity in our opinion should not be changed,

we decided to keep the blue from the Phonehouse's logo

 We chose a colour palette that fits this blue shade

http://colllor.com/02254d

FUNCTIONAL REDESIGN

Functional redesigns are made.
Using the information gained in the conducted tests, we came up with the following functional redesigns. At the left the home page is visible, right the product detail page. 

Functional redesign:

After the analysis phase, we decided to start with creating a functional redesign. Wireframe sketches were made, based on the earlier determined relevances for all the current elements on the Phonehouse website.

Homepage

The functional redesign of the homepage was based on the idea of seeing the home page as a place where a consumer would do their ‘window shopping’. It should be more seducing, and shouldn’t be flooded with information, deals and functions as the current home page. We decided this, because the current homepage has an abundance of functions that are also accessible via the navigation menu. For example, the current homepage has an accessories button on the navigation bar as well as a big accessories element on the bottom of the page. In this case, we’re saying: less is more.

One of the elements that needed a big redesign according to us was the navigation bar. It should be given more attention by increasing the size, as well as accompanying the text of the buttons with icons.

Product page

Aside from the general changes to the website’s structure (navigation bar, providers’ orientation), there were also a couple of elements of the product page that we thought needed a redesign.

The sliders to adjust data, text messages and calling minutes are given more attention by placing them next to the phone’s information and images. By placing them like this, it becomes an element which the user sees as soon as he opens the product page instead of having to scroll down first.

And by having the providers above them, you can easily select one of the providers, adjust your bundle, and see your deal. You can then quickly switch providers to compare them, as well as adjust the bundle to see how that affects the price. For the users who still want a more ‘table’-like comparison, this element is still present when the user scrolls down.

BRAINSTORM

Brainstorming on functional redesigns for our webshop.

Different sketches were made.

DESIGN REQUIREMENTS

Our redesign is based on a overal conclusion of all our previous work.

When we look at the visual structure, one notices that the landing page provides a lot of information. Showing all these different elements can overwhelm the viewer and so decreases the coherency of the webshop. The navigation bar is a centerpoint for the user, making this element more important will allow elimination over other elements. The conducted eye tracking, visual analysis and colorblindness are all backing this up. 

The eye tracking experiment made it clear that the key to drawing the eye is distinction from surroundings. Although many things seemed to catch the eye, they all had a clear attribute that set them apart from their surroundings, be that color, type size, or being placed in some sort of border or box. These attributes should be applied in our re-design in the areas which we have determined to be important in the visual structure.

The visual analysis mainly showed us the use of color of the Phonehouse website could be more balanced. The designers of the current webshop seemed to have used a color harmony, but they didn’t make use of one dominant color and they chose slightly different hues than the tetradic harmony suggests for the green and orange.

The colorblindness experiment made clear that the website has no real accessibility issues in its current design, which is a desired effect and we have to keep this in mind for the aesthetics of our redesign.

EYE-TRACKING

Method:
To perform the eye tracking testing, we tracked the eye movements of 7 participants, each viewing two different webpages from 5 different websites and 4 abstract images, all for 12 seconds each. The eye tracker was placed on the tripod, approximately 10 cm above the table surface, and the laptop placed on a cardboard box about 10 cm tall. This provided the most successful calibrations. The abstract images were white fields with numbers one through four, used as a secondary check for calibration.

For each participant, the eye tracker was first calibrated. Then, the participant was shown the slide show of all 14 images (10 web pages and 4 abstracts). During the test, we realized even minor distractions would cause participants to adjust their gaze to the source of noise or movement. Therefore, we performed the test again, making sure the testing area was distraction free.

Results:

Despite having relatively controlled conditions, our test data did not indicate any strong trends between participants and only in some cases seemed to correlate closely to the webpage they were viewing’s design. The most conclusive findings seemed to suggest that larger text sizes and brighter colors were more eye-catching (Fig. 3 and 4), although again, this was exhibited in certain tests but by no means was consistent. Pop-up windows were also an eye-catcher (Fig. 5).

Discussion:

Because the results were not very consistent it is difficult to draw firm conclusions from the eye tracking. As mentioned above, the clearest insights it provided were that bright colors and large text appeared to be more eye-catching.

A source of error within the test could also be the fact that there were not specific instructions or tasks for participants to follow. This was done with the intent of not influencing the data, however the result appears that every participant scanned the page in a somewhat random fashion (Fig. 6).

Using the eye tracking software in combination with a static visual search test could possibly provide more useful data, or better yet, in combination with a series of tasks navigating through the site.

An additional opportunity to perhaps find more meaning within the data is to perform the same test on re-designed webpages to see if the re-design induces more correlation. This could indicate that the seemingly random eye patterns were in fact an accurate measurement of the original website’s lack of visual hierarchy.

VISUAL STRUCTURE CONCLUSION

According to the relevance on which we rated the different elements, we will decide what has to return in our redesign. Unfortunately, during analysing we noticed a lot of repetition, most elements can be merged into one. The viewer gets an awful lot of information, which tends to be overwhelming. A clean visual overview is what we want to achieve, eliminating multiple elements. The navigation bar is the most relevant element, allowing the viewer to navigate through the entire web page. Although, currently its relevance seems to be neglected, and operates on merely a functional level. Each option represented in the navigation bar is repeated in the content. Increase the navigation bar’s size, making it a main focus on the web page will give us possibilities to eliminate these repetitive elements in the content.

The use of icons may lead to better usability of the webshop. A lot of text is currently shown, so it is difficult to distinguish options from each other without reading the text. Using icons is visually informative and make for a more coherent web page.

The header & Footer basically stay the same. Both contain loads of valuable informations, but they don’t need to attract the viewers attention. Making the header and footer merge with the background is a nice way of blending it with the total page.

One of the factors causing this information overload is the amount of products shown on the landing page. All the different phones are difficult to compare with one anothers, and don’t differ in color or size. As a viewer it is unclear where to look, what information should be absorbed and how to proceed further. Changing this will definitely benefit the visual structure of the web page.

VISUAL STRUCTURE PRODUCT DETAIL PAGE

Visual Structure for the product detail page is shown below

       

Product detail page

Header
Same as landingpage.

Content
22. Route
The route shows the user which steps have been taken to arrive on the current web page. This route can be useful to check in which category you are or to navigate to a previous one.
Relevance: 5

Because the visitors are navigating through the web page by themselves, the route is not that necessary. If the visitor will get lost he could easily return to the homepage by clicking on the logo. Hereafter the visitor could start navigate again.

23. Detailed product advertisement
This type of advertisement has the function to inform the visitor. Here you can find anything about you’re chosen phone such as the price, specifications and possible providers. Besides, this advertisement consist of a ‘click-buy’-button.

Relevance: 9

Without this kind of advertisement less purchases will be made. The reason the visitors will visit this webpage is because of the needed information. By giving a complete overview, the visitor is informed entirely and will purchase quickly.

24. Specifications
These buttons gives you the opportunity to navigate through the different options you can select for your chosen phone. By clicking one of these buttons, the information will become directly available underneath.
Relevance: 9

These options are really important to the visitor. It gives all the necessary information needed by taking out a new subscription or extending it. Besides it shows additional information and even more important, reviews of previous buyers.

25. Providers
This will give the visitor the possibility to chose between the different providers you would like to compare. For example if you would like to compare all the deals of Telfort, you easily click on their logo and the deals will show up.
Relevance: 8

This function is really useful for the visitors. Most of the visitors always would like to make a comparison between the price and the functions the phone consist of. By using this function you will directly get a complete overview of the comparison you have made.

26. Preferences slidebars
These slidebars can be set on your ideal amount of data, minutes and maximum price per month. This function is an addition on the previous options. By setting all these preferences the best deal will be made especially for you.
Relevance: 8

Even for this function applies, without it the comparison will not be complete. For the visitor it will be easier to search through the offers when a small pre-selection is already made.

27. Provider comparison
This overview shows a result of all previous actions. After setting your preferences an overview of the best phone deals is shown.
Relevance: 10

In comparison with the previous functions this one is the most relevant but without the previous ones this overview will not be complete. This function is really convenient for the visitor which provides a positive experience.


Footer
Same as landingpage.

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.