Challenge Summary
Welcome to the Hestia B2B Tablet Web Application Design Contest. This contest is focused on modifying, enhancing and optimizing the existing Hestia B2B Application to make it compatible for tablet devices. We are looking for storyboard designs on how the application should look/work on the iPad, Galaxy Tab, Android, and Blackberry PlayBook. Note tablet device features and navigation/swiping.
Round 1
Your submitted design solutions for a review.
- Homepage and tablet navigation solution (important!!) - this is important to your milestone success!
- Product Search
- Product Categories
- Product Search Results
- Product Detail
- Cart
Please number your files in the order they should be viewed. (ex. 01, 02, 03, 04, 05)
Notes.jpg: Any comments about your design for the Client
Round 2
Final Login Screens = Final All requested items
- Homepage and tablet navigation solution (important!!) - this is important to the success of your submission!
- Product Search
- Product Categories
- Product Search Results
- Product Detail
- Cart
- Sign in
- Locations
- Anything new from the Milestone phase
Please number your files in the order they should be viewed. (ex. 01, 02, 03, 04, 05)
Notes.jpg: Any comments about your design for the Client
Contest Details
Hestia B2B is jumping at the chance to optimize their site for tablet devices (we just ran a contest for smartphone devices). This contest is not to redesign the Hestia B2B website but to simplify the site for tablet devices and extend the Hestia B2B services via the iPad, Galaxy Tab, Android or Blackberry PlayBook.
Resources & Requirements
IMPORTANT
- Group/package your graphics in its own folder layer with appropriate names/titles
- Keep things consistent. This means all graphics styles should work together.
- Reference the fol-prototype-3.2(preloader).zip and GUI PSD Kit to help make your user interface elements consistent.
- Your submission design should have general tablet layout that mimics the look and feel of the application.
- Make your design simple and clean.
- Check your spelling before submitting.
Design Consideration
- DO NOT just make a larger version of the Smartphone design for the tablet!!.
- Tablet device supports larger screens. Your design should work within the larger screen and be engaging!
- Remember when creating graphics for a tablet device, all UI elements must have fluid width, so it will support any orientation layout.
- Research related "cool" web based tablet applications and how they work/interact/navigate.
- There should be a clear way to navigate through the application from screen to screen and the screens themselves should flow together in a logical manner.
- Buttons and links should be large enough and spaced out enough to ensure that the correct item is selected each time.
- Please research the tablet devices browsers guidelines for size and best practices, here is some web links to help you begin design the application:
http://webdesign.tutsplus.com/articles/how-the-ipad-and-tablets-are-driving-new-web-design-trends/
http://www.smashingmagazine.com/2010/05/28/web-development-for-the-iphone-and-ipad-getting-started/
http://www.smashingmagazine.com/2011/08/09/designing-for-android-tablets/
http://www.ipadapplicationsdeveloper.com/web-development-for-ipad-tablet.html
Application Details
Please click around provided fol-prototype-3.2(preloader) & html5 mobile HTML/CSS/JS to become familiar with the Hestia B2B Application.
Note:
Here are the potential features and navigation items for the tablet version of Hestia B2B. We are not looking for all of these pages in this contest but it will help you design the navigation and home page.
- Home page
- Sign in/Register
- Product Catalog
- Product Search
- Locations
- Shopping Cart
- Order Inquiry
- My List
- Quick Order
- My Profile/Preferences
- Proof of Delivery
- Payment on Account
Screens/click-paths we would like designed for this contest
Homepage
- We want to have a DIFFERENT home page for the tablets then we do for the Smartphones
- Something more graphic/colorful and visually interesting.
- Whatever the new navigation design it needs to scalable
- NO merchandishing for the first version of the tablet site
- On the homepage we are looking for a navigation centered design. We are looking for a graphic/tablet navigation solution. Refer to how www.ted.com and how they use large blocks/squares for navigation (and how it loads) and how the usatoday iPad application uses large color buttons for navigation.
- www.usatoday.com is an example of a site that has iPad and iPhone Application designed very well (utilizing the space properly and making them feel like they are designed for each device). Because of the screen real estate, the tablet design can be a much more image/graphic user experience. WE ARE NOT looking for just a larger version of the smartphone site. We are looking for navigation that makes sense on a tablet device.
Sign In
- For the Tablet design the user will first land on the Hestia homepage where they can navigate to different areas and search/view products. When they are ready to purchase a product they will log in.
- The user should also be able to login/create an account from the home screen.
Locations
- Once user has arrived the application will ask them if they want to share their current location. This will allow the application to locate the nearest Hestia store.
- What does the list of stores look like?
- A user can also Search or input their address/zip code to find a location.
- Show us what Store details should be displayed (store photo, hours, specialties etc)
Product Search
(User will want to find Hestia B2B Products when they are out on a job site or need a quick product number/description etc)
- Show how a user will find products
- Have a large "Search Bar"
- You can find product images on the Hestia website
- Search results will need to show the product image and details (refer to the prototype)
- We will need an "Add to Cart" button
Product Details
- How does the product details page look in the tablet design?
- Product details will need to how the product image and information
- We will need an "Add to Cart" button
- This page will also include description, write-up, safety features/hazards, related products.
Cart
- Show us how the Shopping Cart will look and interact with the user.
Any other features?
- Research tablet (HTML5) applications and bring your ideas/animations to the project - remember to keep things simple and optimized
- Remember this is for a tablet!
Target User
- Potential Customer
- Current Customer
- Remodeler
- Vendors
- Associates
Judging Criteria
- How well you design the Hestia B2B application and navigation for the tablet experience
- Cleanliness of your graphics and design.
Submission & Source Files
Preview Image
Please create your preview image as one (1) 800x800 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Submission File
Submit JPG/PNG image files based on contest submission requirements stated above.
Source Files
All original source files of the submitted design.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.