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  
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.
Outfit 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.
   |
No comments:
Post a Comment