1 Common Aspects
1.1.1 Common Elements
- Logged In
- Logged Out
+ Not in City?
+ Sign Up
List of cities served - Links to right geo page
List of cities served - Links to Deal lists
1.2.2 Navigation links
Women friendly, bright.
Lots of white space
1.5 Unifying elements
Some color, pattern, image or other visual element that is repeated throughout.
2 Page 1 - Homepage, Not Logged in
The goal of this page is to get people to sign up for Crazy Deal News. This is the second most important page.
- Common Header
- Common Footer
- Large benefit statement
Initially: Get all the latest deals in your city and more
- Secondary benefit statement
Initially: Great deal on restaurants, spas, and more at 50% to 90% off
- Email subscription
+ Email Address entry
+ City pull down
+ Subscribe button
+ Deal sources: A grid showing 4-9 logos swapping in and out.
+ Personalized: A visual indication that the deals are filtered by preferences. Yipit has a good one, but please don't copy it directly.
+ Facebook like, Google +1, etc ...
+ As seen on: With sample news logos
3 Page 2 - Main Page, Logged in
Show deals of interest to the user. The core idea here is a facebook style news feed. This is the most important page.
3.2 Design Ideas
The deals will be grouped by type (restaurants, bar, yoga, hair cut, spa, etc.). The core idea is to show a lot of deals in a way that 1) is easy to scan and 2) shows a lot of deal in relatively little space.
Images are the easiest for people to look at, and allow them to make an easy Yah/Meh decision. Look at the way groupon shows you all deals. The price, quantity told, or even the title aren't show. It is simply the picture and the time left.
For this design showing three images per row with deal title, time left, and price for each fit nicely on the page. The image should be the most visible part. The title, time, and price can/should be muted so that they are still obvious when looking at that deal but don't interfear with scanning.
The user has to have a way of removing or minimizing the groups so that only the stuff they are interested in shows up at the top. This can be a filter on the side, or that clicking Meh will move the group to the bottom of the page. In either case, show at least one open or active group and one or more closed/hidden groups.
The deals will be split into two groups. Those that the user has seen before and the new ones. The new ones are on top and old on the bottom, just like a Facebook news feed. There should also be a visual marker between new and old. A line across the results or a slightly different background color for example.
Finally each deal type has a expanded or detail view. For the design show the Restaurants group expanded to show a map of the restaurant locations.
With this in mind below are the suggested elements.
- Common Header
- Common Footer
- City name dropdown box
3.3.1 Deal groups
- Header: Deal type, Show/Hide Map, All(13), New(6), Meh/Hide/Close
- Deal: Picture, Title, Time left.
A way of selecting the type of deals to show.
4 Page 3 - SEO page
- Common header
- Common footer
- City name header
- Deals, Categories sub header
- List of deals. No images.
5 Page 4 - Item Detail
City Name Daily Deals, City pick list?
My Deals, All Deals, Preferences
5.2 Body elements
- Display title
- Picture with attribution
- Company Info
- Bit size map
- Deal Info
+ Buy button
+ Retail price
+ Number bought
+ Time left
- Nearby category deals
- Popular city deals
6 Page 5 - Landing page
The goal is to get people to sign up. The difference from the home page is that they will be sent here with a specific deal in mind. So this page needs to highlight a deal but also drive sign-ups.
Page 1 (Home page) plus Page 4 (Item Detail).