W8 TASK 2 - Critique and Redesign
Critique:
1. Structure of content
The content featured at the top of the Sportsgirl homepage is structured by: logo - the Sportsgirl icon, titles - SHOP and BLOG, subtitles - 'Find a Store,' 'Help & FAQ,' a navigation menu text and featured news text - '50% off Full Price Knitwear' and a COVID-19 disclaimer.
The content featured in the middle of the homepage is structured by categories: categorised news subheadings - '50% off full price shoes - Shop Shoes,' and a social media category with 'Instagram' as another heading.
The bottom of the homepage is structured into featured policies - 'Free Shipping,' a contact/sign up bar for email input and a footer menu for further body text pages.
2. Visual hierarchy resources
The designer chose to utilise contrast through the use of white text over black background bars or vice versa. Also through the red 'sale' menu text as an effective method of differentiation to the white menu text. This allows it to stand out as a dominant webpage for the viewer to engage with first.
Scale was used by enlarging the size of the 'SHOP' and 'BLOG' headings to evoke their hierarchical importance over the subheadings in significantly smaller headings. Scale is used effectively through the news headings where numerical text indicating sale quantity such as '50% off' is the largest on the page to ensure it is some of the first content the viewer notices in the text hierarchy.
Capitals in bold weightings are used on all headings and subheadings as the dominant hierarchical text, where the only text content without this is the COVID-19 disclaimer and descriptor text under the policies. Underlined text is then used to draw engagement to the hyperlink.
The top of the homepage is positioned to the right, with only the logo situating in the left side. Position is used in a standard manner for most elements, where the top billing text is granted top hierarchy for titles and lower positioned elements down the page are lower hierarchy with fewer engagement. However, the 50% off news text in a right-aligned centre page position is given the top hierarchy which breaks hierarchy rules of left to right.
3. What does/does not work
The use of medium/heavy weightings and size of text to ensure all the text is readable works effectively.
Positioning has been used effectively as a whole down the page, where there is an ease of viewing the most to least important content as the page scrolls down, to the viewers convenience. However, the amount of text at top of the page being constrained to the right is too cluttered and with minimal spacing which makes it difficult for the viewer to distinguish the hierarchy of what information they are intending to read. Coloured text is barely used, which contributes to detracting the ability to distinguish hierarchy.
It was also noticed that news content which seemed equally important to the top hierarchical news featured was only positioned mid-way down the page after scrolling which deems it as a much lower hierarchical element when it would be assumed the viewer would be wanting to view it straight away.
ORIGINAL:
REDESIGN:
Reflection
Due to the context and purpose of the webpage being to lead online shoppers to purchase and browse through the store, my decisions were based on how to increase this more effectively since the original design was too cluttered and confusing.
I hence decided to rearrange the information hierarchy. For instance, I placed the 'shop' and 'blog' sections at lower importance by decreasing the font size significantly, which then shifted them further to the top of the page and outside of where the eyes are initially drawn. 'Find a store' and 'FAQs' were then repositioned further down, centred and scaled up in size. I believed these directories were of greater importance, and hence positioned them higher in the information hierarchy. I created additional banners of the current sales which originally could only be seen after scrolling down. These are in the brands primary colour scheme and with significant spacing above/below and placed them exactly where eyes are first drawn to. I hence made them have the most important hierarchical position because I believe that is what a shopper would care to see most.
I also changed the drop-down navigation menu by adding underlines to enhance the hierarchical elements of the menu. Originally, the groupings of clothing types were difficult to see. I therefore decided that by grouping the clothing types with clear subheadings from the underlines, and decreasing the line spacing, the hierarchy was significantly more clear.
