Brief

So...at uni was given a brief from a GDS2 class that is basically about creating  website (very similar to what i did last year at Bay of Plenty Polytechnic, apart from we had to develop it with code), so pheww i dont have to do that again! lol. So basically the goal of this web project is for me to understand and apply current web design practices to my own and others designs. I have to choose an existing website that i like, critically analyse its design decisions and once understood will improve upon them designing a better version for the sites users. I was quite excited with this assignment as its very similar to one i have already done last year so lets get stuck into it! 

Through a bit of research i found there was many different avenues i could have gone down such as retail etc. i wanted to find a website that wasnt creating the right feel and needed a lot of work doing to it. I found many retail websites especially ones that tried to cram as much information in as possible, but thats what lead the design to become messy and didnt follow the column structure of the page. 

After lots of decision making i chose smiggle as i felt it didnt have the same vipe as the shop but also the navigation was very confusing and became quite a messy website to the user. I believe especially for a retail website the navigation and direction from shopping to paying should be a very easy and direct route. 

Here is my little brain storm....

I explored many different avenues but still couldn't really decided on which one i preferred to redesign so i created rough wireframes of my clarified results to really see the base of what i wanted to create, and improve.

All of these wireframes are very different in all aspects, such as different target audiences and different styles and aspects. Looking at Smiggle's website i feel it could do with alot more development in the organisation of the website, as it has become quite a complicated website with the main target audience being children. However, Ebay could be very interesting as it is very square and "boxey" but on the flipside of that it is very organised and compact. 

So its Session 3 time!! everyone has to hold a short presentation to illustrate the concept of improving ones chosen site....argh!!! i am not a fan of standing up in the front of the class and presenting my ideas, however i know this is a vital important part of designing and presenting to clients so it has to be done, i just need a little faith in myself! Presentation slide (we were only allowed 1 min to present our idea in 1 slide)...

Here is an example of what the company is about and the vibe you get in the shop surroundings. i want to mainly protray that vibe throughout the new website design. i have made a simple wireframe that clarifies the website without it being too messy and confusing. 

Presentation went well, a few questions that i needed to answer in my presentation were:

What is the website you are working on? Smiggle

What is the website supposed to do? Its a retail website for promoting products such as stationary and special sales online for young users to look at for presents and goodies for themselves.

Define the websites target market? Who will be using the site? The main primary users to the site will be youth, secondary school children, and also parents.

How does it currently fail in providing the best user experience to the target market? It doesnt provide the same fun and energetic vibe as it presents in the shop. The navigation for sales is very confusing and not very straight forward for the user. 

How are you going to address the identified in your all emcompassing cross device concept strategy to make the website the best it can be at any given size? The main aim is to improve the navigation for sales and clarity of the structure of the website, i will also add in more colour and convenience for the targeted audience of kids.

Now time to get into the grittyness of the website, i wanted to create a navigation of the original website but also the new and improved version to show the connection and also the changes i have made to the navigation route of the site. (have put these in my workbook. I wanted to understand how the site will allow the user to move around the content, and how the user proceeds to move through the site, so i created a clear website map to illustrate the website sections already existing on the site. 

Through email updates Jannis sent out a reference for a video on website design development which helped alot as it had many tips and ideas for further designs.

(Nerdery, 2011)

Points from Vimeo Video:

- Name files appropiately

- Dont name files 'final'

- Work in photoshop - not firework/illustrator

- Consistency in type, layout and colour values

- Build on flexible grid

- Flexible content to adjust to different grids for different devices

- Think about designing server errors page.

- 960 px grid fits perfectally on a ipad screen size

- the more time you complicate the design the more time your using web designers time. 

I investigated into a few aspects of the process of creating a website design, such as core web design principles, typography, use of colour and layout. I wanted to make sure i had full understanding of what the site is required to do and that i had all access to all relevant content to build upon the site. As specified in the brief we have to create an iphone screen size and a normal website screen size, so i had to keep in mind that different viewers will visit your website using monitors with different screen resolutions. As Smiggle has become an internationally known company i had in mind to keep the file size to a minimum, as it will be accessed by a wide variety of people and not everyone has high-speed internet connection. Typography is a big concern as viewers will only be able to see your website in the typeface you have chosen if they have that particular font installed on their computer. So it is recommended by many to stick with familiar font families: serif, or sans-serif. The content and purpose of the website are the main factors of considering what typeface to choose. I wanted to give a modern effect for my website design so i originally started off with 'chalkduster' (a hand drawn font, very relative to smiggle) but after consideration not many people will have that font so changed it to a plain helvetica light font, it has become more readible but also can be viewed on the majority of computers. I also took into consideration the font size and the leading, after converstaion with Jannis the preferred font size was 12pt for the iphone device. 

Options....

Helvetica light 12pt was the only one readible for me at that font size as the letters are clear and crisp and can be read on any computer, as its a commonly used typeface.

I have learnt from experience of last year designing for the web is not the same as designing for print: pages not only have to look great, but must also work across a range of devices and browsers - which is quite a hard lesson to learn, so hence the reason Jannis has put in our brief to help us understand that the development of the site must also be quite straightforward to navigate.

Colours: I had to think long and hard about this because i wanted to change the colours of the actual website as they are mainly only 6 distinctive colours (blue, pink, purple, white, green and black) and commonly placed in that order, these colours are represented in this way throughout the shop. I orginally had in mind to change those to the primary colours and make it more rainbow like, however that would give it a complete different vibe from the shop and the assignment wasnt aimed at us to completely redesign a company, so i came to a conclusion of leaving those colours throughout the website for the products but weave more rainbow colours throughout the design. I believed as it was a stationary shop it shouldnt restrict certain colours, especially for the younger target audience. I experimented with inverting the colours of the logo however i felt wasnt as strong as the white.

Dealing with colour on a on-screen environment was a lot easier as it naturally was highlighted and appeared brighter from the white light. Contrast is the key to legiblility and this means going back to the colour circle and working out from knowledge which colours are the best to use for backgrounds, fonts etc.

So here it all starts...

Here is my first idea, my main aim for this design was to be fun but also it look similar to a map so very convienient and easy for younger audiences to browse the site.

I found this idea was successful, however it was too small for the iphone device, and wouldnt become very easy for younger children to use because there would be alot more pages than getting straight to the point, and that was my main aim and focus was to get straight to the point in the website. 

Idea 2)

I felt this design had more significance to the retail shop, but also was clearer, and was able to work with the touch target sizes that Jannis set up for us, to give us a good idea how big items should be throughout the web design process. After clarifying the idea more i came up with the idea of a pop up for the login menu, so that the customer had to log in, making it easier to lead to a purchase. 

I explored some ideas on the same concept..

developments....

more developmental concepts following on through the purchase process...

I felt this idea failed as the text became way too small and complicated for the reader. It didnt have any development from the original website so i decided to start again with the original wireframes and create something different.


This allowed the user to click straight into their wishlist, previous shopping bag etc. I looked into it in further detail and decided to have the pop up menu in front of a lighter transparency homepage. eg....

and then without the pop up menu...

more developmental ideas following on in the process of purchasing a product.

Overall i feel more positive about the design with the pop up, its a lot more stronger and supports the aims of making the structure and navigation easier and the functionality more communicative to the target audience. Allowing the users to have a easier 'journey' towards a purchase.

Now that im happy with my iphone design it is time to design the website... dah dah durrr! I have decided i want to keep it along the same lines of the design for the iphone so they look like the same website.
Home page wireframes:

I got a little bored with creating the wireframes so i jumped straight into designing the website from various wireframes.

Through my concepts of my wireframes i found that many of them i didnt like how they interacted as a website so i fiddled around with bits of each to make a development concept. I wanted to relate this website to the iphone style so i added in the login pop up menu to give it a bit of similarity but to also reinforce the easier steps to purchasing an item.

However as the base structure of the layout is hidden behind the pop up menu i have made another wireframe to show the structure underlying the pop up menu. 

This wireframe demonstrates the underlying structure but also the slide show that changes every 3 seconds to new promotions and images that smiggle provide throughout their website, such as games, promotions, smiggle art, smiggle scale etc.
Concepts....

Wireframe step 2: allowing you to view the range of products from the menu. I wanted to create these pop down options so you didnt have to get linked to several pages. Making it easy and convenient for the younger targeted audience to understand.Wireframe step 3: This wireframe is mainly the product selection page, where you get to choose your products to purchase.

Wireframe step 4: this style of wireframe on the right is slightly the same as the iphone basket page as i felt it needed to relate, i clear its clear and clean not making it too confusing for the viewer when when make there last steps of the purchase. The next pages linked to finalising the payment is all in this wireframe 4 layout as it easier to communicate with the clean and crisp background.

Developments... now the exciting time to design.... 
this is the flow the audience will go in to purchase a product :)

login time....

home page...

select what you want in this case ..gifts... $19.95... now i had trouble deciding between the two different wireframe designs... i think im heading towards the bottom one as its clearer and has more information involved in the site.

or...

then once selected product you are led onto the product information page...

purchasing of the product page... this is the same wireframe as above but i wanted to put it into context how you would use different designs for the same wireframe.

Overall i think my website re design flows well as i have thoroughly considered the main elements and principles of design, i have also considered the use of typography, colour and the layout. The main aim through my design process was to create a unique website with my organised process to purchasing the product, mainnly aiming it at the younger target audience, and i believe i have achieved that through the use of grids to make it clearer and bolder to the eye, but still be a youthful website with the use of colourful bubbles.