504 - Design Production, Design For Screen, Page Development

 Page Development

Over this project it has been very hard to portray the over all atheistic of the shops brand interior, this is at the shop inside heavily relay on textures to give of the rustic, vintage, older vibe. Since the texture it's self could be used a  due to the limitation of digital on screen production and the way site works off pixel, a photo would have to be substituted which this often appeared tacky or over powering on the mock up, due to the way its distract from the important need navigation tools on the page. Using textures online is commonly associated with more lower class, cheaper brand who don't have the fund to imply a graphic designer and is often over used by these brand therefore this gives the online version of textured fabric a tacky association. 

Due to the nature the interior style need to be portrayed via a non-textured screen development into how to do this for the web page has been done, the aim is find a balance between the house style of the brand (very minimal harsh type) with detailed imagery to create a site that is also clear and easily usable for the user whilst portraying the brands style and benefits whilst appealing to the target audience. HARD TO GIVE VINTAGE FEEL DIGITAL WITHOUT TEXTURE.

research -

how to make a digital site appear vintage 

https://webdesignledger.com/50-retro-and-vintage-web-designs-to-inspire-you/

 

 As digital design and website are new medias website are automatic associated with modern design styles, this contrast the brands aesthetics as it is of this media limitation as it very hard to change this prospective. Over this design process it has become aware  it very difficult to get digital design to appear vintage to the point of the 1960 ect which is how the store brands itself as computers screen didn't exist then. Also the store aim to appear handmade as this style fits with the eco, personal ideoagys but as computers are very un-eco friendly and mass produced so creating a website that reflects is contradictory, trying to recreate this has been very difficult, mediums that have been tried -

 

this idea has had retro vintage 70's colour scheme applied to the site in attempt to reflect this time frame as many of the styles in the primary research showed it was use in the interior of the store to create the vintage feel. The colour scheme was added to balance out the harshness of the current design style/branding to give more retro touch to the high contrast back and white basic design currently used without distracting or adding any un-needed detail which would make it overly busy (crit said keep it simple for user ease)

-colour scheme works but overpowering why applied to all the site

-reduce the use of colour, colour only needs to be added to the buttons sections that need to stand out 

-darker colours make it hard to see the black text/imagery, don't use dark green

-paler browns work best for the buttons as it shows the outlines but the text is more legible

-orange stands out clearly, use for features that needs to be a focus

 

-paler colour scheme for the buttons give off a less busy, easier on the eyes layout

-the paler colour boxes match the imagery more, the orange clashed with some of the items

- neutral colour scheme for the button means any banner can be added to the page as it will not clash

-the greeny/blue for the Instagram scroll make the bar stand out against the rest of the paler website

- greeny/blue bar matches the colours used in the imagery therefore enhance the pictures

-is the site too plain/minimal for the brand?

- seems very modern due to text font and colours, how can this be balanced out

- doesn't portray any vintage themes/trends

-OVERLAPPING THE HANDDRAWN TEXT OVER THE LOGO BALANCES OUT THE HARSH MINIMAL MODERN NATURE OF THE LOGO WITH SOFTER MORE PERSONAL TOUCH

-not as busy as the stores interior

IDEA - apply a pattern taken from the wall decoration in physical stores, match the digital site via background design with the stores interior the fit with the aim of reflect the aesthetic.

-makes the site fit the theme
-the background is overpowerinly heavy for the user
-too much going on the page, user doesn't know where to focus
-background contrasts with the headers, headers are needed more on the site to express the different genre of styles/separte the pages
-with the header there are too many contrasting design styles and patterns on the page
-might work without header?
-colour scheme works well together
-does match the store interior
-OVERALL TO BUSY TO USE

How do they do it on Instagram?
Since the Instagram page for the site manages to sell the products as it reflect the sites aesthetic digitally more research into how this site manages to do achieve the aim need to be done. Whats does the Instagram page do that the site can apply to make it achieve the same? Difference in the Instagram and the site design?

   

Features

-uses little/no text on the page

-uses hoover over caption for infromation to reduce text

-visually heavy

-simile layout that give allows the picture to express the content.

After looking at the Instagram website for the site it was made clear that is site expresses the aesthetic via creating a very visually heavy website that reduces the amount of text seen at once as much as possible. This then allows the imagery to set the tone for the site, as the imagery reflect the stores interior as it shows the store and the items which has been analysed as a strong point for the brand social site.  The store is very visually heavy, there was not much text ect around the store as the focus was mostly on the items this is also seen on the social sites, therefore as the brief is reflect the store as well as link the soical sites more this should be done on the online store.

-REDUCE THE TEXT

-MAKE THE SITE VISUALLY HEAVY

-MAKE THE IMAGERY THE FOCUS

 

Here the refined search bar, and the item information has been removed to allow the site to be more image heavy rather than text heavy. Removing the block Helvetica text bar and product details from the main page gives allows the site to appear less serious as now the focus is the imagery content rather then the commercial text. Imagery is the main selling point of the site therefore this layout change creates a site that is more a visual shopping experience for the linking to the way that vintage shopping is done in real life. 

 MORE VISUALLY INTERESTING SHOPPING EXPERIENCE, LESS INFORMATION HEAVY

Information - 

But the information will need to be included for the user to navigate the site, this can be done via the same way instagram and other fashion sites seen in research do this via a hoover over pop up. When the user hoovers the mouse over the imagery the name, price, and size of the product will appear direct over the corresponding image. This feature can be applied to the site as it will show the needed information in smaller burst, as the user has to hoover over the image it means the user will only be able to see one product information at once which make sure the user is not overloaded with information at once keeping the experience as visually image heavy as possible.

USE HOOVER OVER CAPTIONS FOR THE PRODUCTS TO GIVE NEEDED INFORMATION. 

Filter / Sort By Search -

The filter search bar and sort by search has been removed from the main page to give more room for the imagery but this information still need to be included on the site, on other fashion website this is down via drop down menus. This allows the user to apply the features but doesn't need a filter search bar or sort by bar on the page. The bar will drop down when the user need its then remove when the have used it again this is reducing the amount of text on the pages as much as possible to make the site a more visual experience. The drop down menus make the features assailable but not constant or distracting from the imagery. 

DROP DOWN MENUS USED SO THE FEATURES ARE AVAILABLE WHEN THE USER NEEDS THEM BUT NOT CONSTANTLY ON THE PAGE SO THE IMAGERY IS MADE THE MAIN FOCUS. 

feedback - 

To see how people feel about using drop down menus rather than the still there option peoples personal opinions on which they felt looked better and which was more useful. mixed feedback was received as someone felt it would be useful to see what they defined their search by constantly  but overall out the people asked it was made clear that that the aesthetical value of not having these text take up the sapce on the page made it a lot more visually heavy therefore seem more like vintage shopping than before. The removable of the text feedback stated that it did make the site appear less serious and more friends s the text was a very bold block boring type style therefore without this the site fit the aim of the brief more. 

final style applied to the rest of the site pages - 

this is the final page top for all the site pages, this will be applied to the whole site design.  

outfit shop page with the style appiled 

 outfit shop item page with the style applied

Outfit Item Page Pop Ups
How will the pop up link and description look?

Final Outfit Page PopUps-

Leather Page design to reflect the style of the textured pages layout with the style applied  

FEEDBACK -

503 Responsive Studio brief 1 -, Live Briefs, Label Design

Label Design 

For this brief th client Orchard Pig aim to create a a new way to cause the target audience, generation z to interact with them on social media platforms. The outcome for this brief is to produce a bottle label design for the company main product cider which include a snapchat-able pig face, expressing the brand unique selling point whilst also connecting via social media, also this idea is a-lot cheaper and will last longer than producing a personalised snapchat lens.

The current bottle design have been digitally mocked up to allow full creative design assess to elements needed on the labels. Currently the bottle for the cider has 2 labels, a front, a back with some space in the middle, these are quick idea of how new element could be included on the current labels.

ideas -
smaller label between the other labels

issue with this design could be that the label would have to be very small to fit in the gap between the existing labels, this could make it hard to snapchat or apply the lens

move the other labels to fit it in

issue with the design could be that bottle of cider are sold in columns on shelves in stores, not having one label clearly at the front could make it hard to identify the cider in this content reducing sales. the front label needs to be seen clearly in the store.
fix - the front label could be kept i same place but the back label moved to fit another label in??




one big label involving all the data

this idea would be to redesign one full label for the bottle, to have a full label all the way around the bottle which included all the needed information and facts. One label band ar
stickers 

where could the stickers go?

504 - Design Production, Design For Screen, Web Limitation/Benefits

Web Limitation/Benefits 

Now the idea for the outcome of this brief has been decided on research into how this site can take advantage of the on screen media and how this medium can also be a downfall for the store. The company has a very popular physical store but the online site is less popular, this is due to the way it doesn't attract the audience in the same.

Doing this digital can have benefits and limitation, one of the limitation found when doing this brief is currently an issue, this is at the site cannot express textures. The in Store shop relay heavy on different textures, fabrics, patterns to express the vintage nature but applying this online to the site appear tacky as imagery had to be used over the texture its self. Imagery of a texture always looks like a cheaper version of the texture where as if this was a print or physical brief this would be done on the texture. To solve this textures will be experimented with more, to see if there is any way this can be done or if the site will have to apply this style ina different design technique.
DOWNSIDE - cannot express texture fabric

Also when designing the site late feedback has expressed that the site way too design heavy, the busy background made the site non - usable as it distracted from the buttons/needed feature to navigate the sites. Making a site very design busy like the stores are effect the usability of the site, this is not a issue for print or the physical store as the store can still be used not matter how much design or decoration there is were as onlin this can be distracting and too overly powerful.
DOWNSIDE - design online can be distracting

One of the benefits of creating online store for the site is that it allows the suer to view the soical media sites of the company, linking to these means the site will get more follower and view which will increase the popularity of the company. This can be down via address on print but including a direct link means the user is take straight to the site rather than having to search for the correct page.
BENEFIT - links to social media site directly

Also one of the benefits this site uses is that it allows users to add photos to the social media site via hashtags/tags then site can upload and use these on their site to show their positive customers.Show happy positive customer imagery will reflect the positive nature of the instagram page which is a aim for the site, this cannot be done via print as the user cannot send their images in this way or the brand cannot update the page as fast.
BENEFIT - can use customer imagery

Overall this media has benefits and downfalls but currently the downfall is that its very hard to portray vintage themes online as no vintage website exist or website like this, but more development of the site and work will be done to achieve this.

504 - Design Production, Design For Screen, Wire Framing Development

Wire Framing Development

After creating the first few mock up of the hand drawn wireframe from the site this then gave chance to experiment with layout, design and placement of these pages. This is as the elements squares/shapes had already been created with was easier to create and edit than by hand as the shapes could be moved, copied and edited without any change, also this worked better digital as the colour scheme expressed the element label visual without need for any small text or complicated lines. The same colour scheme was used for all the wire frame test so each element was recognisable. 

Main Page Development
needs to include all the main elements

-logo to show what shop it is and reinforce brand identity, also when ckiecked take the user back to the home page, serves as home button

-currency to express what currency the products will be prices in, also shows what countries the company deliver/are available in

-link to the 'join the cow community' idea to make the sign up for email link seem more friendly and express the brands community ideology's

-section buttons, shows the separate gender sections so the user can select the search the field quickly eliminating the products they don't need to search through, making it easier and faster to find products that suites them. buttons - female, male, unisex, vegan, outfit shop, blog. order take from research, female first due to the users will be mostly female (taken from primary research of people in the shop over a day), then male as this will a smaller amount of users, then unisex, then vegan as this will be a low percentage too, outfit shop and blog at the end as this is where other website place these options for the user will be fimilar with these button being in this area so will look for them there. Also having these button in the main section draws attention to important aspects of the shops site and the user will have to look at this area to select their search section.  

:includes vegan sections to make it easier to vegan users (the target audience maybe vegan) to see directly find the products that can purchase, also shows support for this ethical belief to fit with company's ideas, this is done in store therefore is mimicked online to link the stores online presence and the store experience in more dept to fit the aim of the brief.

: includes unisex option, this is as in store from primary research it was discovered that many of the rails with mixed gender items so it reflect the stores interior more. As well as also from research into how people vintage shop it was found people often mix different gendered clothes in vintage clothes shops and buy clothes from different gender sections therefor this is an element that differs from normal high street shopping which the website highlighted to reflect the experience of the user and to mimic the experience online as accurately as possible. Also many vintage items such as bag, scarfs, coats can be worn by both genders, this will allow the user to search thought all the bags rather than the once aim directly at their gender so they find the best fit for them, improves the user experience by fitting their preferences and giving wider range of items to pick from. We Are Cow as a company are very supportive of LGBT community, having a unisex section gives support to the users 

:blog page link - will take the user to the blog page of the site, this is placed here to draw attention to the fact the site has a blog as the user will have to look at the section bar to search site. The sections bar is headers of the site, having the blog page here shows the importance of the blog to the brand also shows clearly easy links to the social media page which is part of the aim of this brief. 

;outfit/instragram shop, this is page on the site that uses imagery submitted and taken on the brand social media pages, mostly instragram, this is after showing a group of the Target Audience the picture used to sell the products on the site in comparisons with the social cite imagery they felt the imagery on the social site made them more inclined to buy the products. It makes it so the user can see on outfit/item on the social site then fine a link to the item on the page so they can purchase it which currently cannot be done. Encourages the user to buy via more engaging imagery and via imagery seen on the social site, they don't have to search for what the saw they can find the image then there will be a link making the experience easier and fast to find the selected item. Also it allows the user too see how to style outfits, how to find things that go together and overall inspire them more, this is a benefit of the store shopping experience as they have outfit already made up all around the store and items pared together so this page does this digitally.

-search bar, this allowed the user to define the features of the products so they can find an item that fits their need more directly, they type in keywords relating the item they are looking for the the site will search is items for products that fit the criteria. Faster than searching via the refinded search bar on the items pages, give the user control of the product they view.

-save item link, this take the user to the page of items they have 'saved', items they've looked at and selected but not purchased yet, this then allows them to go back on the site and view the items again without having to research the site. Makes it easier and faster for the user to find previously interested items after they have left or closed the site. 

-cart, shows the user what is in their current online shopping bag, what they are currently buying, currently running cost of their bag and details of the items in their bag so they can change /alter it before checkout. 

-current offer links, this will be header or decorative banner of the current promotions the brand wants to push to the user, this is on the home page so its the first thing the user see so it can grab their attention. shows the user any current trend or sale or items they shop wants they to focus on before they get to redefine their search. usually bright and bold to grab attention. Click on the different banners will then take to user to the corresponding offer directly, speeds up the path way to offer for the user as they only have to make.  

-scroll-able instagram feed, this is situated on the left hand side all the pages on the site, this is so that the user can stroll thought this page as they are shopping, see updates or also scroll back along the bar to see the sites aesthetic. Feedback from a crit said this would be useful to included on the site as it give the setting for the brands, whilst also targeting the target audience of social media users. The Instagram page is strong aspect of the stores online presence this will use this as way to attract users to the site but also keep them interested whilst on the site, also from primary research ti was show that the page is more engaging for the audience that the product pictures, but the product pictures-are needed for informative reasons having this separate still engages the audience whilst having the functional imagery too. 

key for the main page wire frames

first wire frame - based off the common house style taken from research, the average layout seen throughout the research but with the specialised element ideas added to fit the aim of the brief. Logo on the left hand side as where the view will look firs due to the way the user reads from left to right.

second wire frame - logo centred to draw more attention to the branding, seen in research to be more common than the top corner 

third wire frame - forgot to include the search bar, first wire frame 

forth wire frame - second wire frame with search bar, added to the other side to give more spacaily balance to the page 

fifth wire frame - section bar edited to make genders the main focus 

mock ups -

The next stage in the design process was the minimalise the design of the site due to feeback from the other busy mock ups and to find way to reflect the aesthetic that are less overpowering so the user experience isn’t impaired by the design. The site has been stripped back  to a simple design elements where kept, like the use of small amount of colour to make sure the site didn’t go back to the original as this would be counterproductive as the site needed to be changed to appeal to the user but so the site was user friendly.  

 

logo changed to center to represent the same style as social media site, Instagram and Facebook both draw the user to the center of the page first therefore this site recreates this to mock a social site layout, the user will be associated with this design rather than the left corner which is used more in print. 

Also as the logo for the brand is quite harsh and blockly therefore attention grabbing when surrounded with white space moving it to the center of the page gives the site overall a more balanced layout, rather than being left side heavy the site now seem more equally laided out. The user is drawn to center now directly rather than to the left hand side of the page which will bring the centered offers (which shop aims to promote) more to their view attention. As the site is quite busy due to the nature of having many different features and imagery making the basic layout as balanced as possible allows the site to be easier on the viewer, the top design seem more packed due to the nature there is a very cramped corner where as this design give more space page which allows the page to flow easier.

full page mock ups -

all the needed features added so the design style could be compared the full site view.

 'Cow community' typeface has been changed to make it more readable, this is a the last typeface was slightly italic, has a lower x height and has smaller counters, which makes it harder to read has even at the same size the font appears smaller. This typeface has is a more legible yet still hand drawn typeface. The main site uses Helvetica as the typeface for the body text throughout the site as this is the typeface used in the branding for the site whilst also being websafe therefor will work on all computer and is recongised as one of the clearest, easiest to ready typeface available which means the audience will not have any issues with legibility or readability with the type on the site. The brief says the site need redesigned to be a easier to navigate user interface, the typeface used is suitable for this because of its clarity, Helvetica can also be used for the smaller filters and menus as it will still be readable at a smaller size. 

Eventought helevtia is used mainly over the site adding the embellished typeface is added in small amount to give a warmer touch to the sites design. One of the issues with the current site is due to the use of only Helvetica it appears very clinical to the user as there is no decorative features unlike in the stores where they are heavily cosmectic. Adding a more imperfect handcreated typeface like balances out the heavy use of Helvetica by applying the handmade, vintage aspect seen instore.

HELVETICA USED FOR CLARITY ONLINE

HANDTEXT USED TO REFLECT THE STORES INTERIOR AND STYLE

 

type face unreadable for the strap line, legibility impaired via the decorative flick on the letter forms. Not a websafe font, limitation of this media mean this might not work on some computers. TYPEFACE NOT LEGIBLE

the font is legible for small amount of text, adding a title to the instagram page balances out the use of the same typeface on the right hand side for the 'cow community' link, whilst also give an explanation of the tab. The decorative typeface can be used in a small amount but be legible for the user due to the larger letter forms. USE DECORATIVE TYPE ON BOTH SIDES OF THE LOGO TO BALANCE OUT THE LAYOUT OF THE SITE. 

In a crit with Only, the feedback was that the idea of designing the site with a background of cow print would engage the user due to the interest in prints/texture whilst also being a link to the name so would be relevant for the brand for years (other design trends could fade). Applied to the site design here it obstructs the view of some of the site text, whilst also distracting heavily from the features the brand wants the user to focus on, its too overpowering as a background due to the strong contrast in colors so the user will focus on this rather than the site information/elements. Also the heavy use of animal print is seen by many people as tacky and fake as usually this is associated with cheaper brands so this give this impression visually to the site.

CANT READ THE TEXT WITH THIS BACKGROUND

TACKY PRINT 

feedback - Feedback from this design style was that it was stripped back too far, there needed to be balance between the design styles. FIND A WAY TO MAKE THE PAGES DECORATIVE BUT NOT OVERPOWERING

Women/Men/Vegan/Outfit/Texture Page Development

needs to include all the main elements

-size buttons, in sizes extra small, medium and large, this is due to a current issues on the site, the items are not always available in different sizes due to the vintage, second hand nature of the clothes but this is not started at the start of the search. Unlike on most website where you can pick an item then select the size once you've looked at this the site only stock in certain sizes but this is very annoying as the user  expect the item to be available in a number, but this is only pointed out once the user has found an item they like which not might no be in there size. To stop disappointment as well as to make it easier to the user to eliminate options that won't suit them from the list the button at the top allow the user to select a size to shop via. In vintage shops many shops have rails separated into sizes therefore the user will be common with the method of searching whilst it allowing the site to reflect the experience even more. less disappointment, less options  hey cant have, easier to find something for the user size via these buttons. 

-filters, have filters that allow the user to select the colour, brand, size, price of the item allows the user more control over he items they view, this makes it easier for them to define their search and find the items they are looking for or venison of items they are looking for. This speeds up look through all the options as it removes the items that doesn't for the criteria and only shows what the user wants to see.  

-the live scrollable instagram feed is present on all the site pages, this is so that whilst the user is searching or visiting the site they can see the images being post on the instagram pages for the brand as the target audience will use this media site alot .This is aim to inspire them more to buy or look at the products, takes advantage of the well used social media site, aims to links the site together more as well as give the user a view of more of there offers/promotions/products/store whilst they are shopping. One of the benefits of the shopping experience in these store is the environment even thought this cannot be capture digital using a range of imagery from the site aims to achieve this slightly for the site. Also the feed will show all the past and new images uploaded to site to give the user a feel for brands aesthetic visually, shows the history of the brand, shows the positive imagery of the brand and will overall improve the experience of the user via setting the tone of the site and brand. 

; there will be a outfit shop page created for the site where the user can shop from outfits taken the instagram page which have links to products in the images or similar in the same asos do this, this tab will give a link to the outfit shop page more so the user can shop via the imagery they see whilst shopping without thinking about it. contant inspirtation currently missed on the site.

-page header, used to communicate the page the user is on but also give the site a sense of asethical value, gives a playful nature to the page to make it standout against the other serious minimal websites. A way to express the decrotive nature of the shop in a visual way that doesn't over complicate the website by adding any unneeded information. 

-sort by option, allows the user to sort the products in the way they want price way, useful for students on a budget which is the target audience as they can view the cheapest items first.

- item picture, shows the user the items so they can visualise the items, images taken from the social site for products with these images available, primary research pointed out these images are more engaging for the target audience 

-save item button, this allows the user to 'save' and item to the saved items page, this is they can look at it later or save it, items they've looked at and selected but not ready purchased yet, this then allows them to go back on the site and view the items again without having to research the site. Makes it easier and faster for the user to find previously interested items after they have left or closed the site. 

first wire frame - not not usable as set for the other style of page, logo ect need replacing to make the pages match and follow a house style for the audience is aware of where all the buttons are on all the different pages.

 

the overall wire frame has been slighted edited due to the development changes on the main page site whilst mocking up the layout

mock ups -

TRY APPLYING THE HEADER IDEAS TO ADD DECORATIVE FEATURE WITHOUT OVERPOWERING 

 The aim of this brief was to make the online store reflect the visual aesthetic of the physical store, even thought the use experience of the site has been improved here still the site feels very modern which doesn't achieve the aim set. It appears more welcoming to the user by the user of softer hand-created type as well as the basic Helvetica but the over all look is still very modern. Further development will need to be done into how to make a online store reflect a vintage theme.

Website are digital therefor modern so reflecting a vintage theme on these is hard as the natural association the user has contradicts the aim. 

More research and experimentation needs to be done to find out how to visual express the aesthetic to make the site fit the brief so the wire frames for the other pages will be created but not mock up till the final house style is formed/designed. 

Welcome Page 

orginal wire frame -

The first wire-frame of this page used the the typeface Lemon Milk, this was it seen a softer therefore more welcoming font than Helvetica so was used for the first page as it need to engage and welcome the user but this has been changed as the logo needs to be accurate represented rather than showing the user a range of different logos which may cause confusion. The aim of the brief is that the brand need to be portray online in the same way as it is in store, as the store uses this logo as there sign the online store should use the same logo on the site even if the typeface isn't as suitable. 

Here the textures have been added the the letter, each letter would have a link the corresponding texture search page on the site. This is from primary research the target audience may shop via textures over size/gender ect show it allows the user to apply this style of shopping online easily. Also from primary research into the interior design of the store it was seen that the store usually separate items via the textures, the rails were sorted into denim, checked ect therefore this apply this sorting style to the online store as well as physical store in aim to represents the same visual layout. PHYSICAL STORE SORTS VIA TEXTURES, THIS PAGE ALLOWS THE ONLINE STORE TO SORT THIS WAY ASWELL, APPLY THE SHOPPING STYLE TO THE ONLINE STORE. 

Outfit Page 

This is a page on the site where outfits from the instagram or their social media site or photography taken in the store have been laid out and styled fully but have link to all the different items used to make up the outfit. This will show the user firstly how to buy/wear a full outfits presented and what they are looking for but also allow they to see what they could wear with items they already own or how to style outfits differently. This makes it easier for the user to see how to wear their products as well as see how to style them but also buy item that work together on the same page.

This page is added to the site allow the user can shop via the social media sites, the images can be uploaded the the social site then found on the website with direct links to the item in  the imagery or simialr items of these are out of stock/in a different size. SHOW SIMILAR ITEMS AT THE BOTTOM OF THE PAGE IS THE ITEM IS OUT OF STOCK/DIFFERENT SIZE.

Once on the outfit shop page when the user hoovers over the item in the photo the description pops up, (the name, price and size pops up) this also is a link to the item page  for the user if they they want to see more/purchase the item.