This website is created by a 17 year old school student. He learned website desigining on his own. The website is to promote the business of his mother, who sells jewelleries in a small shop (pushcart) in Singapore.
I provide online tuitions to him and his brother for free. I want to help him improve the website by giving it professional look. Please give your suggestions on how to improve the website. Be as specific and detailed as you can. Then I will try to implement those suggestions.
Okay, I'll tell you what I like first, from a user's perspective obviously.
The component layout: The whole website is just three equal width rectangles. Simple, easy to navigate the content within. This is the kinda layout and positioning that facilities really fast navigation. With just one partial glance I knew where everything would be.
It has appropriate information
General overall contrast is good (eg black text on light backgrounds)
Good clean hq pictures, one of an actual person. Good job there.
And using the usual Facebook widget
So, that's what I like.
Its pretty good considering this is from someone who is very young and just learned how to write html. That's a lot more technical competence then most people posses. So, good for him. But unfortunately, it kind of shows that this website was was designed by someone who doesn't yet have a strong body of experience that a developer really needs to have.
But now, time for the bad parts. I'll tell you why I don't like it, why it doesn't work, why other people besides me won't like it, why its too large a variation from the commonplace webpage practices so that its unusual in a bad way, and finally a little bit of advice on what to improve on.
Okay, I feel bad, and I don't want to insult, but I'm going to be 100% honest and try to help you and not just criticize unfairly. Overall, the website broke a lot of good design conventions, and I can only explain so much here without writing a book.
There is a particle effect, snow or something? I can see it on the banner and on some other pages. I get the feeling that this was put in there as a learning experiment on the part of the coder (the 17 year old or whoever who just learned how to code html) just to kinda figure out how to get cool particle effects onto a webpage. So that the particle effects were not a design choice. And it doesn't look good, it really has kind of amateurish vibe to it. My advice is to remove all particle effects period. There are other methods you can employ to create a visually interesting webpage. Nobody really uses particle effects on webpages. It's unusual and not creative. Also, stick to using a consistent color scheme. I think there are an overwhelming number of different colors being used here. I know the theme of the business/product is "rainbow", which is really cool, but that should imply that your website has a rainbow theme too. I should be able to look at your website, and immediately associate the site to your business, just by visuals alone. But, to give my opinion on using a rainbow palate, its going to hard simple because how easy it is to overdo it with a color scheme that has so many vibrant colors. If you want to use a lot of colors, desaturate some of them and consider having multiple colors with the same saturation.
The background should be fixed eg position=noscroll. That might lead to better performance. And, although this website is simple and small, it is suffering performance issues already. I'll get to that soon. You might want to consider redoing the background to. I mean, its not bad, but you could probably google image search and find a better background to use. I could go into more detail why the background should be changed, or just edited, but its more art then design, so ultimately its your call.
Its a little too tall, it looks disproportioned. Banners on the internet kinda come in fixed sizes, and the reason for this is because it looks good in those fixed sizes. So, first change the banner size. As for the banner itself, I don't like it. Maybe that's just me though, this is more of an artistic preference, but I think it needs to be redesigned urgently. Like, put this at the top of the TODO list. Its very hard to read, and the color usage is a little too much. You're trying to display your production catalog in the banner by listing all the things you have right there in the banner. You should instead reserve that banner for graphics, advertisements and brand logos, etc. This part of the page should be treated like the front page of a fashion magazine. Maybe a little bit of text, but mostly logos and a pretty image. But the fashion products being sold in the magazine aren't listed on the front cover. I say just redo the whole thing. But a word of opinion here, rainbow color schemes are hard color palates to utilize in making an attractive graphic. So, your graphic designer has a difficult task here, make sure its done well. Don't make it look like a rainbow threw up onto a jpeg.
Use css rollovers so that when I hover my mouse, the button changes. Also for each page, change the button that corresponds to that page. That way the user knows which page he/she is on, when they need to do successive navigation.
Main Content Pane:
Again the color scheme is a little incosistent. There are two colors being used, I'm assuming to visually define the sidebar element (the pink area with the clock and the Facebook widget).
Either merge the two together by having the same background colors
Separate the two visually by at least puting a space gap (like a left-margin or a right margin)
That side bar just looks a little strange. Also whats that clock doing there? I don't see the purpose behind that. It looks like it was put there for all the reasons that the particle effects were put in the banner: it was a programmers first experimental project and he didnt want to take it out later. But there's really no reason for the clock to be there. It has nothing to do with the shop, with your branding, or with type of information customers want to extract from the webpage. Take it out, and put in something that makes sense (and not a Flash object).
Typology, font, and text style:
To many things are bold and underlined, and the use is inconsistent. For example you use b&u for headers, and also for emphasizing keywords. That's subconsciously confusing. I understand why those things are bold & underlined, but its excessive and therefore it has lost its meaning. For example:
Please handle our products with care and refrain from dropping it on the floor.
Why is 'handle' b&u? Is the programmer a native speaker of English? Rather, in the General Notice section, you want to emphasize that whole section in itself is important, so you should do that. Give it a different background, give it a different font then the rest of the page, whatever. Most viewers won't even read that, so don't over-style it in an attempt to force them to read it.
Proprietor: Doris Ho
Why is 'Doris ho' underlined? It looks weird, and there's no point to that. Look at webpages on the internet. How do people use underlines?
CREATE YOUR STYLE
That is in all caps, but this is what should be bold or italicized (not underlined) to catch the viewers eye. But, think of this, your trying to catch the viewers eye in the middle of a large paragraph? If the info is that important, copy it, and put this copy of it somewhere else on the page. Like how you see in magazines articles. In fact, this would be a good line of text to place in your banner.
WORTH-BUYING ITEM !!!
This is really bad, don't do this. It's too desperate. I know your desperate, okay, I know these people need support and help, but you will drive potential customers away with this obnoxious distasteful attempt to persuade people to buy the products. You need to be more creative and subtle in your attempt to persuade customers to buy the products. You need to persuade people to buy your product, not just explicitly tell them. This text here, is actually probably more dissuasive then persuasive. Get rid of this immediately.
Name: Doris Ho
Contact Number: 90698003
Don't b&u any part of this text. There's absolutely no point. Remember the fewer the bold and underline elements used, the more emphasis each instance has.
For the contact page, you have a numbered list 1-3. Take out those numbers, you don't have list-worthy information there, let alone a numbered list. Only use a numbered list for information that needs to be, firstly in a list, and secondly must be ordered. A numbered list should be such that, if you change the order of the list items, it has a different meaning. Well, in theory at least. However, in practice, I would admit that there are at least two other commonplace usages of numbered lists that are totally acceptable: merely as a superficial formatting device (makes it easier to recall approximately how many items there were, and might make the list easier to navigate and recall specific items especially if it is a long list) and, secondly, because you have already used other list types, and you don't want 10 bulleted lists on one page.
This is horrid. Don't do this, its too much. Its not elegant, creative, attractive, or informative. Its just random and hard to read. Just italicize this. That's all, nothing more.
The following I think is the biggest flaw in the entire website, it needs to be changed right away. Like stop reading this and go change this right now:
In your products category, you list the products, but not their prices. I am quite sure then almost every single user will come to your webpage and expect to find the prices in products page. But you have the prices listed all over the website instead, mostly on the notice board. You have broken a very important eCommerce convention, and you have broken a very dominant user expectation. The prices are extremely hard to find, and only a few products actually have prices. Why? Either have everything with a price listed, or have no prices listed on the website period. Anything in between is confusing and strange. But the reason this is such a disastrous flaw is as follows:
Go to the website of a car dealership. Browse the cars. Mostly likely they won't have the prices listed in the product catalog, but you have to download a PDF to view the prices or even send an email to the seller to requesting a pricing chart. Is this done only on websites that sell cars? No, this is a marketing convention. Look at websites of insurance companies, medical equipment, enterprise software bundles, enterprise computers, etc. This convention used when the products are very expensive, and the seller is trying to entice the potential customer with the products for as long as possible before the customer sees the large price tag and decides not to buy anything. And customers are familiar with the way businesses do this. So when they look at a product page, and don't see any prices they think "oh this stuff must be expensive". You are doing this by not having the prices listed in the product page. Your message to the viewer is "the products are expensive, so by convention we have not listed them here". Your scaring away customers right now. If this isn't the type of business you have, then put those prices on the product page, and only put specials on the notice board. Also make sure everything is priced, and make sure that the specials on the notice board are also listed on the product page.
I'm guessing the price listings are one of the primary pieces of information the average viewer wants/expects to see on your webpage. But you have done a poor job at this. And this flaw is big, and the website, is unfortunately, largely a marketing failure because of this. It will take 5 minutes to fix, so go do that now, before you scare off more customers.
Use google maps. Its extremely easy, its free, its professional looking, and its the norm for embedding maps onto webpages. There is no excuse not to use google maps (unless of course for legal reasons, or you think you can do better ).
The "CREATE YOUR STYLE with SWAROVSKI ELEMENTS" image on the products page. This one:
<p><a href="images/CREATE YOUR STYLE with SWAROVSKI ELEMENTS.jpg"><img src="images/CREATE YOUR STYLE with SWAROVSKI ELEMENTS.jpg" width="768" height="110"></a>,/p>
This is obviously an advertisement banner from a 3rd party company, why is it sitting in the middle of the page? It looks very out of place. Resize it or move it somewhere else. You could even make it part of your own banner. You could also center it at the bottom or top of the products list area. This image also is a link that leads to nothing but the image itself, but again is an advertisement from a different company. It should really link to the Swarovski Elements homepage or not be a link period.
What!? More particle effects!?
The banner jpeg is 1.5mB. That's a little too large for a banner, it doesn't immediately load on my computer. Most banners are within the kB range. To try to reduce the file size, save the banner image in different formats with different levels of quality compression, then pick the file size that is simultaneously the smallest and best looking.
The website performs nicely up until the product page. Then my computer lags. The reason this is happening is because my computer is trying to load 50 high quality images all at once. But I can only look at maybe 1-10 images at a time. So why render everything all at once? It's too much for the CPU. The image gallery needs to be redone entirely. I think you have two options:
Only use thumbnails on the gallery page and then when the user clicks on the thumbnail, either a lightbox, just like this http://upload.wikimedia.org/wikipedi.../Lightbox2.png, will appear or they will be taken to the resource itself e.g. a new page IN A NEW TAB e.g. use
If the user clicks a thumbnail and the current tab just changes to the whatever the link is pointing to, then they have to manually backtrack to the thumbnail gallery, and render all over again those thumbnails. The reason you wouldn't want to do this is because your expecting your customer to look at a lot of images, and compare those images. Having to click back and forth within the same tab is mind-blowingly inefficient. Modern browsers support tabbed pages, so take advantage of that.
Also make sure that you have the right amount of compression in those jpegs. Its possible to compress jpegs without visibly loosing quality. And resize them too, they are a little bit to big. When you plan to start selling online, then you want larger HQ images so customers can scrutinize your products before buying. You really don't need ultraHQ images if your not planing on selling online.
Also, as a general rule to improve rendering performance when it comes to images, you are going to need to save the image itself in the size that you plan to use on the height and width properties of the image tag. So, if your banner is width="998" height="298", make sure the image is 998x298. Otherwise, the browser has to re-size the image itself (which takes along time), and I'm guessing this is what is happening in that image gallery. Its normal for a website to have 2-4 copies of every image, but in different sizes. If you make 512x268 sized thumbnails of images that are actually 1280x960 then you need to make duplicate images that are 512x268.
Your product is the type that where the only appeal to the customer is visual. Jewelry won't sell if it looks bad. Your jewelry looks amazing, but the way you present it is ugly. The gallery is poorly designed. Use a modern image gallery to optimally display your product in the most visually appealing way possible. You need to use JS to do this. Give that good looking jewelry the respect it deserves!
Also this is in Singapore with several official languages, would you not be reaching more people if your website was multilingual?
Overall the website does not look good. There is a poor and superfluous use of style elements. The whole website should be abandoned and redesigned from scratch.
I am not sure what kind of overall theme the jewelry has nor this business has. Is this supposed to be elegant jewelry? Opulent? Fun? Ostentatious and silly? Reflect this consideration in the design of the website. Use the visuals of the website to tell the viewer something about the jewelry and your business.
It doesn't display the information that your average customer wants or expects (the prices mainly).
Has totally pointless things like the clock.
Despite its apparent easy navigation the information needs to be more tightly organized and less dispersed.
Image gallery is a complete failure despite having beautiful images.
Why is the telephone number required in the contact form? That's totally unnecessary and kind of invasive. Nobody is going to give you their telephone number, and they shouldn't have to. Fix this right away.
I'm sorry to say that if changes are not made, then this website will be failure, and was a waste of the programmers time.
You may or may not want to reconsider having that cancer stuff on the webpage. All respect to you, and I feel really bad about your situation, but having this on your website isn't going to conduce the customer into a buying mood. Is the goal of the website to promote products, or a personal blog? Those two things are kind of mutually exclusive.
General Future Improvements:
Write your own contact form. Learn a server side scripting language, like PHP or JavaServerPages, and write your own. Its very easy and quick once you know how. It looks amateurish to have "Form provided by Free Contact Form" on it. Looks kinda cheap. People will appreciate the hard work you put into a website if they can see it.
Turn your website into an eCommerce website, and sell online. Technically, all this requires is some extra server side programming, in addition to the commerce qualifications of whatever is the Singaporean institution that is in charge of commerce. Its very easy to program though.
Last edited by gakushya; April 23rd, 2012 at 11:04 AM.
Reason: for the lulz