Analyzing the website structure

The first step in a redesign of a webshop is to analyse the current situation. In order to do that, an abstraction can be made through wireframes. This reveals the ‘bare bones’ of the webpage, in which all the visuals and frills are stripped off.

When that has been done, it becomes clear what kind of ‘information blocks’ the website is made out of. What kind of buttons are used? how many? how much space are text and visuals taking up? These questions can be answered using the wireframes.

Prioritising page elements

Now all the elements are identified, they can be arranged in order of importance for the website user.

Homepage wireframe

1. Website name and subtitle
2. Product thumbnails
3. Product categories: ‘most saved’, ‘most viewed’, etc.
4. Main menu ‘ladies’ and ‘men’ category
5. Category shortcuts: ‘vintage’, ‘accessories’, etc.
6. Search
7. Introduction movie
8. Subscribe
9. Help
10. Blog
11. App store link
12. About page
13. Contact
14. Switch language
15. Conditions

Product page wireframe

1. Product photo
2. Product details
3. Photo thumbnails
4. Conversation
5. Product stats
6. Buy button
7. Close button
8. User name
9. User profile picture
10. User wallpaper picture
11. Share buttons
12. Background

Next steps…

Now that all the page elements are quantified, user tests can be carried out whether the current site design meets the requirements.