Completed contest

College E-Commerce Website Redesign to Web 2.0

mgalbus needed a new web page design and created a contest on 99designs.

A winner was selected from 29 designs submitted by 6 freelance designers.

29
entries
6
designers
1
winner

How mgalbus started their web page design journey

Summary

Looking for a redesign of two main pages of existing e-commerce website. I need a bold, crisp, non-cluttered home page, product detail page, and one small item for a category page.

Company name

GreekForMe.com

What inspires you and how do you envision the design for your business?

OVERALL FEEL and LOOK:

Our existing site is GreekForMe.com.  This site sells merchandise to college kidsthat are in fraternity and sorority organizations.  Based upon feedback received to date, the homepage is too overwhelming with choices. We want to simplify the design greatly.

Looking for a Web 2.0 design.  Clean and crisp.  I like the rounded corners with bold call toactions.  But I am open to otherconsiderations of ‘Web 2.0’.  The maincustomers for this site are college kids and their parents.  It should be slightly more feminine in itsdesign than masculine since the majority of the shoppers are female.  Do not go over board so that the maleshoppers are sent away (no pinks please).

Wants

GENERAL REQUIREMENTS:Use white or off-white color for background.  It is your choice for the colors of the site.

Assume a 1024 x 768 Screen Size.  I like how this site: http://www.xango.com/makes everything fit on the 1024 x 768 screen size.  In addition, the tape sort of leads you tothe bottom part of the page.  There issome blank space on the fold to separate the content above and below.  Trying to target a home page load time of 7seconds or less (I realize that a lot of this depends upon other file calls,etc. But the point that I am trying to emphasize is that I need a clean designthat loads quickly.  We are trying to getthem to click on one of the menu items (Sorority, Fraternity, Divine Nine,etc.)

---------- Home Page Header Content ----------------

LOGO & NAME:

The preference is to keep the existing logo and the Curlz MTfont. 

But I am open to other logo ideas.

Logo of Head is in this zip file: http://lib.store.yahoo.net/lib/gree…m-head.zip

An EXAMPLE of the font for the GreekForMe text is in thiszip file:http://lib.store.yahoo.net/lib/greekforme/gfm-title-example.zip

Place this Tag Line below Logo/Name: 'Shop for Your Sororityand Fraternity Merchandise'

 

VIEW SHOPPING CART:

Text:  View Cart

Shopping cart should be placed on the right-hand side at thetop of the page.

Show:  Cart Image -Cart Text - Items - Dollars

Here is an example of how the elements should fittogether:  http://ww21.1800flowers.com/

PHONE NUMBER:

Need to integrate the phone number:  877-245-9960 into the top header with 'CallUs'

SEARCH:

Search box should be placed above horizontal navbar

Make the search box 27 characters wide.

Don't use a heading to label the search area; instead use a"Search" button to the right of the box

The search button is a button, which means it should bedesigned like one. In particular, the search button should look different thanthe input field.  Make sure you give thebutton a “button look” (i.e. another color, a different shape, a search icon,etc.)  Do not make the search button'more powerful' than the Add to Cart button. On the product detail pages, the Add to Cart should be the mostprominent call to action.

HORIZONTAL NAVBAR

No Need for a HOME tab on the home page.  On Interior page, a HOME tab should beutilized.  If you like, you can useWELCOME as the selected tab for the HOME page tab.  Then on the interior pages, the WELCOME tabwould change to HOME.

Tabs should visually connect with the content of a web page.Meaning the color of the selected tab should match the color of thewebpage.  The active tab needs to be adifferent color or contrasting shade, and it has to physically connect with thespace below it.  For example try the tabsat: http://www.trackmypeople.com/

The shading of the tab should create the visual illusionthat the active tab is in front of the other tabs.  Need to show a mega drop down box like:http://www.whitehouse.gov/. (for review purposes - you can make this a separateimage so that it does not distort the view of your home page - for example justshow one tab and then the mega drop down) your choice of format - but I reallylike the whitehouse.gov example.  Nicespacing and contrast on the mega drop down.

NAV BAR TITLES FOR HOME PAGE:

WELCOME (as stated above, this is not required but you caninclude it if it makes your design flow)

Shop Your SORORITY (show a small down arrow to indicate itis a mega drop down versus a click)

Shop Your FRATERNITY (show a small down arrow to indicate itis a mega drop down versus a click)

Shop DIVINE NINE (show a small down arrow to indicate it isa mega drop down versus a click)

Shop Custom GREEK GEAR

Learn More ABOUT US

Feel Free to CONTACT US

See this example: http://www.evaneckard.com/

The part in caps is the main text (like 'Portfolio' in theevaneckard.com example) and the lower case text is the additional text (like'work samples' in the above example). Feel free to utilize any text case and font that fits with your design -the capitalization was for clarification purposes only.

---------- Home Page Body Content ----------------

As previously mentioned this content should all be above thefold on a 1024 x 768 Screen Size.

Here is where you can show some of your design talents. Iwould like a big image on the left and maybe some text on the right.  Remember the main goal is for the customersto click on the Shop For... (your sorority, your fraternity, etc.) in thenavbar  So try not overwhelm the customerwith too many other things for the customer to think about.  This image can be a picture of college co-eds(with some Greek Letters on their apparel) and the text to the left be FindYour Sorority Merchandise, etc...

Below the fold you can include additional images for specialdeals.  You can choose any of the imageson any of the pages of http://www.greekforme.com for examples.  Another idea could be three to fourcategories such as Greek Clothing; Greek Glassware; Greek Gear; and GreekLicense Plates.  Also, include somegeneric text below the fold. 

---------- Home Page Footer Content ----------------

Four Columns with a Title and then 5 Links per Column fromLeft to Right

Here is an example: http://www.xango.com/

Title:  Quick Links

Find Your Sorority

Find Your Fraternity

Shop Divine Nine

Custom Greek Merchandise

GreekForMe's Blog

Title:  ShoppingCategories

Clothing & Apparel

Hoodies & Sweatshirts

Jewelry

License Plates

Glassware

Title:  Store Info

Sign Up for Deals

Privacy & Security

Payment Methods

Shipping Information

Returns Policy

Title:  Resources

Sorority Sitemap

Fraternity Sitemap

Greek Sitemap

Find Fundraising Ideas

View Useful Articles

COPYRIGHT:

Center the following across the page below the four columns:

Copyright 2003 - 2009 GreekForMe.com

Leave some vertical space from the bottom of the fourcolumns above and the text.

=========== PRODUCT / CATEGORY PAGE ============

Same as Home Page described above - except for thefollowing:

+ Include HOME button in the horizontal navigation bar.

+ Include Trust Symbols - Better Business Bureau &McAfee (several image types to choose from). It is your choice of location but prefer to be above the fold and in theheader.

+ Include Live Support button.  If you change the look please include asecond OFFLINE version with the design. You can make it smaller if that helps. It is your choice of the location.

+ Include a special offers section.  It needs to be above the fold - either in aright column or below the product description. Show either 3 or 4 items for best sellers (only the title and one itemneeds to be above the fold - the other couple items can fall below the fold ifneeded.)

------ BODY CONTENT & PRODUCT AREA -------

BREADCRUMBS:

Breadcrumbs should be as close to the very top of the pageas possible, out of the way. below the primary navigation menu.

The font should be small in size.

They should begin with “You are here:” in bold.

Each link that follows should be underlined in the standardblue text link color and followed by a “ > ”.

At the very end, the current page title should come unlinkedand bold.

PRODUCT DETAIL AREA:

The layout of the body part of the Product Detail page needsto be relatively the same as shown in this example:  http://www.greekforme.com/999-hoody-01.html

Specifically:

Name of Product - across the top

Image on Left

Price on Right

Product Choice drops on Right

Then the following Information below

ADD TO CART BUTTON:

Text:  Add to Cart

Image:  Small ShoppingCart graphic to left of text

The Add to Cart button should be the most noticeable imageon the item page.  I like the Amazonlook/feel but I am open to other ideas.

ADDITIONAL PRODUCT INFO:

Color Table Link

Sizing Table Link

Shipping Estimator Link

SOCIAL BOOKMARKS:

Give your customer the ability to add your website orproduct detail pages to websites such as Delicious, StumpleUpon, Digg, Twitter,Facebook, Tell a Friend.

DESCRIPTION OF PRODUCT:

As shown - your choice of font and color

QUANTITY PRICING TABLES:

All elements, including pricing tables, should be consistentwith the overall design of your website.

Use background colors to visually separate differentoptions.

CATEGORY SECTION SEPARATOR

The category page is basically the same for the Categorypage (see http://www.greekforme.com/alpha-kap…lpha.html) as detailed for theProduct Page - except I need a section divider (see the name and two lines withthe following text:  Alpha Kappa AlphaFlip Flops )

Basically, I need something that fits with the rest of thesite design and an indicator like a down arrow that by clicking the sectionseparator, the section will expand. Currently the site shows with all sections being completelyexpanded.  The new website will have anaccordion like product display.  I needyou to create the separator so that when all sections are in the closed stateit looks ok.  You can either create athird page for the category page or just show me the section separator graphicin a separate image.

---------- Product Page Footer Content ----------------

Title:  Quick Links

Home

Find Your Sorority

Find Your Fraternity

Shop Divine Nine

Custom Greek Merchandise

Title:  ShoppingCategories

Clothing & Apparel

Hoodies & Sweatshirts

Jewelry

License Plates

Glassware

Title:  Store Info

Contact Us

Privacy & Security

Payment Methods

Shipping Information

Returns Policy

Title:  Resources

Sign Up for Deals

Sorority Sitemap

Fraternity Sitemap

Greek Sitemap

Find Fundraising Ideas

COPYRIGHT:

Center the following across the page below the four columns:

Copyright 2003 - 2009 GreekForMe.com - Greek Merchandise (showas a link)

Leave some vertical space from the bottom of the fourcolumns above and the text.

Don't want

A copied design.

Loud colors - no bright pinks or bright greens.  Try to remember that it should have a slight feminine feel but should not be too overt to scare away male customers.

Something that can not be coded with css.  Remember I am going to need to code this thing  :)

Custom package

$809

Free features

  • Open contest
  • Fast-tracked

Deliverables

PSD
PDF
PNG
JPG

We've found some similar contests you might like

$3,099
We are a wealth management company that focuses on retired and pre-retirement individuals and their families, with an...
design by 1NS@NE Media design by Bluesjay design by TheExpert
226
entries
25
designers
$1,599
Based on https://app.moqups.com/videdeo@gmai…/a4acc3360
design by eyon^^ design by Leila1605 design by Jasmin_VA
232
entries
56
designers
$899
We manufacture dog beds. We sell to large retailers like Petco, Walmart, etc. We are not selling directly to the cons...
design by x_wong_x design by x_wong_x design by x_wong_x
213
entries
46
designers
$1,100
An online magazine for entertainment news, celeb gossip, and politics...
design by UI Planet design by Avi H. design by UI Planet
53
entries
14
designers
$1,100
Guaranteed contest with lots of 1-1 future work for top designers.
design by simplest™ design by B O S S ™ design by B O S S ™
173
entries
50
designers

We saved a spot for your web page design contest.

Get started now
$889
DreamPak produces and sells liquid concentrate supplements to consumers. This page will be for our Sports Nutrition l...
design by create4life design by Jasmin_VA design by posspoint
67
entries
23
designers
$1,749
design by joanasm design by andy.g design by joanasm
122
entries
36
designers
$1,400
QckShot is targeting anyone that wants to create highlights for a youtube video but primarily gamers....
design by JVM design by JVM design by MercClass
103
entries
15
designers
CA$2,019
Quebex is an online Bitcoin exchange that makes it easy to buy and sell bitcoins....
design by TheLionKing design by TheLionKing design by TheLionKing
218
entries
40
designers
$1,049
TNY is an app publishing company. Our target is apps and app developers for the mobile market....
design by simplest™ design by simplest™ design by simplest™
192
entries
12
designers
SGD1,514
We provide background environmental music for commercial areas i.e. Hotels, F&B, Retail, Shopping Malls Users are ...
design by FIIL design by FIIL design by Danny Dekkers
38
entries
9
designers