Web Design Workshop #13: multiplayer.com
tuts workshop

Web Design Workshop #13: multiplayer.com

on Jun 22nd 2012 with 13 comments

Web Design Workshop is our regular community project where we ask readers to submit their work for your friendly, constructive criticism. It’s the perfect way to learn, offer opinions and have your own work critiqued! This week, an Italian Home Entertainment eCommerce project (with quite an enviable domain..)

Rules of Engagement

Play nice! We deliberately select work which will benefit from advice and pointers. If you can’t be constructive in your comments, don’t. Other than that, offer any advice you can give. Feel free to link to examples and images which back up your points.

The Design

Web Design Workshop #13
View Large Version

I’d like you to speak not only about beautiful pieces of art designed in total freedom, but even about projects that are built upon strict rules, about displaying products where you don’t know which image will be chosen, allowing different people to change the homepages without destroying everything but still remain graceful. I put so much effort in the checkout session and the support services. Actually I had to face so many compromises with all people involved in the project. – Alessio Pianesani

Additionally, you can login with these details in order to experience the checkout process. This account will be active for a week or so, please feel free to place an order – obviously nothing will be shipped and all the orders will be cancelled..

  • USER webtuts@multiplayer.com
  • PSWD envato

Be so kind as to order this product so as not to create problems for our logistics.

Looking for constructive criticism on your own work? Submit it for a workshop – most but not all submissions are published. Be patient though, there could be a queue..

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hi there! My name's Ian Yates. Welcome to Webdesigntuts+ :)  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • David

    I’m sorry. I don’t get it. Notice I just looked at the provided image (I assume that’s the landing page). That’s what a potential customer would do anyways.

    This is what confuses me:
    1. There is no statement about what’s the purpose of the site (do you sell and deliver games by mail? can I play online?). The name of the site doesn’t help because by “multiplayer” I assume “online games” but I’m not sure that’s it. Am I wrong? Well, I’m the potential customer so really, am I wrong to assume that?
    2. The purpose of the banners isn’t clear. Are they promoting your products or are they 3rd party advertisement?
    3. Too many special offers and deals, there’s no direction or hierarchy.

    • http://multiplayer.com Alessio Pianesani

      Hi,
      The purpose of the home page is to simulate a mall-flyer full of offers.
      We’ve tried to focus only on menu and search area, because our previous statisctic say thoose tools are what actually customers look for.

      Then, in the home page, we decide to put nothing else but offers that could light up customers interest.

      But, please, check for products page and try to place an order,
      because this is what i really want you to analyze.

      As you can find above, we’ve provided user login parameters to place a fake order so that you can full experience all the critical phases of a shopping session on our site.

      Thanks a lot for what you’ve already said,
      it’s precious for us! ;)

  • http://handwerkneu.de Lennard Timm

    Ciao Alessio,

    mi piace il tuo sito web, ma ci sono cose che faccia on pó diverso. Adesso devo parlare in inghlese:

    The design looks game-ish with the italic multiplayer.com name which fits quite well for me. However some icons don’t fit because they remind me too much of a comic. The footer for example is a bit crowded and the icons for contact information seem to me to be more appropriate for a pre-school audience.

    I didn’t finish the checkout because I didn’t want risk creating trouble using a credit card number for testing purposes. It looks smooth though.

    I find it a bit unusual to see an online shop that uses large typography but it’s nice! Maybe you can use a bit more white space on the articles pages and maybe on the front page as well. The page for an article has a lot of information and I’m missing a connection between the content elements. The top is okay, but I think the recommendations should be below the description with the video (if available) embedded within the description.

    All in all a nice shop and I’m sure I’d buy there if I was more into gaming. I think I’d even pay the shipping from Italy because I like your country a lot!

    • http://multiplayer.com Alessio Pianesani

      Hi Lennard!

      Thank you very much for your more-than-useful analisys!

      Actually we knew it would be an hazard using large typos against the mainstream behaviour, but I like it and just tried without much study upon it! :)

      About icons, I agree and maybe I will prepare a more super-cool set when i find some spare-time, but if you could read some of our customers request you’ll realize that pre-school standard is even too upscaled… XD

      Fell free to place a complete order.
      Use the “Pagamento in Contanti alla Consegna” option in the shopping cart page (it means “pay cash to the deliver guy”) so you will not bother with credit card issues.

      About recommendation we choose this placing-solution following amazon standards who places description far bottom in the page – it seems they don’t give so much importance to that. But, actually, it’s just a test for us… let’s see if it works or just distract.

      At last,
      you can check Diablo III product page – more or less full of all the possible infos we can provide.
      http://multiplayer.com/videogiochi/pc-windows/diablo-3-battle-net-authenticator-omaggio.html
      I’d like to know from you, since you’ve been so kind,
      what you think is better to place left of the description?

      Now:
      Other customers have buyed…
      Possibilites:
      Other reccomendation
      Most useful reviews
      Do you have any idea?

      Thanx again!
      :)

      PS
      When you wonna come to Italy, you’ll be welcome here in Terni!

      • http://handwerkneu.de Lennard Timm

        Sorry, I didn’t put that much effort in translating the payment options. I placed an order and the checkout went smooth. Make sure paying with credit cards works smooth as well as I had a tough time myself in a recent project thanks to a crappy API documentation.

        Maybe you could make the typography just a tiny bit smaller. That the order was placed successfully was a bit hard to get within the blink of an eye but that might be because I’m far from fluent in Italian.

        I don’t mind the recommendations in the content area to the right but I think they would be more useful for me if the were below the description. At first I didn’t see the recommendations regarding what others have bought to the left. I think I’d try to group similar content: Move the “similar games” recommendation to the sidebar below the product images, and tease both other games bought and the overall customer rating below the description. Someone who is interested in buying this game but hasn’t decided yet might find a short description, a video demoing the gameplay and some reviews helpful. But keep in mind that too many recommendations for similar games might confuse those that are just browsing and leave them less wanting to buy anything because of too many games to choose from. I don’t have any ideas how to avoid this except for removing this kind of clutter.

        You could also use A/B testing if you have enough visitors providing a significant sample. Make sure to make the right conclusions from your results. Maybe you can narrow down your testing if you know your target audience: serious gamers that are looking for one specific title, casual gamers that are looking for any racing sim or parents looking for gifts and might like supplemental items and so on.

        Hope my feedback helps a bit.

        I’d love to go to Italy but haven’t anything planned yet. Will keep your offer in mind, thanks!

  • Antony

    Similar concerns as above but also the logo buttons, particularly social media ones are massive and screaming for attention, in fact you have a lot of aspects fighting for attention.

    The landing page doesn’t appear to have any meaningful content, just a load of big images.

    The most import things on the page is the header and nav and the contact info in the footer, the rest is just fluff to fill the page. Additionally as the page is long you may want a ‘back to top’ or sticky nav allow for easy navigation without getting RSI.

    • http://multiplayer.com Alessio Pianesani

      Hi,

      The purpose of the home page is to simulate a mall-flyer full of offers.
      We’ve tried to focus only on menu and search area, because our previous statisctic say thoose tools are what actually customers look for.

      Then, in the home page, we decide to put nothing else but offers that could light up customers interest.

      But,
      please, check for products page and try to place an order,
      because this is what i really want you to analyze.
      As you can find above, we’ve provided user login parameters to place a fake order so that you can full experience all the critical phases of a shopping session on our site.

      Thanks a lot for what you’ve already said,
      it’s precious for us! ;)

    • http://multiplayer.com Alessio Pianesani

      PS

      Sticky Nav is already in the next release of multiplayer.com :)

  • Techeese

    First off, it be nice if the person who submitted this could have at least point out, if this is a site is online store for games or what not, especially if the site is in another language. the only clue is the domain name of the site, images, screenshot and intro Ian provided.

    the color scheme is one of the major problems for this, define them properly and used 3-5 colors as primary,secondary and shadow, so on and try to establish which colors will be used for your main links, generic links and buttons. try using color scheming tools like adobe kuler to help with that because it seems like it wasn’t picked properly.

    the text logo, the smashing magazine text & logo nor webdesign tuts text logo aren’t that big, you might want to redesign that logo to match the over all design.

    I like the use of Icons at the right though you might want to pick wherein your icons whether they are colored or monochromatic to match the color theme.

    Search catalog bar there is no indication of whether to click it to show the list, search button for me needs more radius, as a whole it’s big height wise.

    no proper Main navigation links, catalog sub navigation why is it more that 960px+ compaired to slider to the footer are 960px.

    two column to 4column which will you use, you should properly place which goes at the top of the fold, the slider is okay since it can show featured items and on sale special though you might want to place that search catagory bar next to the main navigation links and add columns or tabs on to which is their top 10′s like best selling items, most wished items by users and a list of added products.

    there are too much wide sized images, why not add a mini slider?

    best site example I can find to this type
    http://store.steampowered.com/ :)
    http://www.gamestop.com/

  • Andre

    I can’t seem to login with the provided login information :(
    Also, can the site be viewed in english?

  • http://Digiartes.net Juan

    I would say 2 things:

    1. divide and conquer. Divide the logo and add a slogan that refers to what the website does. Separate the login button from the wish list and the rest of the store related buttons. Think of it as separating the store from the login and registration forms, since they should be separate.

    2. Try using an F style disign. Use the left column to align the different Store categories, etc.

    In short use some ideas from the best web store in the world, amazon.com, definitely not copying but they do, divide and conquer and an F style disign.

    Good luck.

  • http://www.creativethien.com John Tran

    There are a few interesting elements in this design. Seems like searching for games would be one of the most used featured in this site, so I like the placement and the size of the search box. Looks like you didn’t put a cursor change on the hover state for the search button though.

    While I’m talking about hover states, I noticed you didn’t use them all too often. I am a big fan of giving users more then one indication of interaction. Maybe for example when you rollover a game, the whole background could change from white to a slightly darker color, or maybe you could change the border color. Do something else, besides the standard mouse pointer would be a good idea.