Challenge Summary
Welcome to the Hestia B2B Mobile Web Storyboard Contest. This contest is focused on designing a simple mobile version of the existing Hestia B2B application. The focus will be on how it displays on the iPhone and Android web browsers.
Round 1
Your submitted design solution for a review.
Hestia B2B Mobile Web Storyboard Contest
- Login Screen
- Location Detection
- Home/Landing Page
- Product Search
- Product Listing
- Product details
- Anything else you would like feedback on
Please number your files in the order they should be viewed.
Notes.jpg: Any comments about your design for the Client
Round 2
Final Login Screens = Final All requested items
Hestia B2B Mobile Web Storyboard Contest
- All final files
Also include:
- Location Finder
- Text Messaging/Alerts (Order is ready etc)
- Any Alert/Modal window designs
Please number your files in the order they should be viewed.
Notes.jpg: Any comments about your design for the Client
Hestia B2B is ready to optimize their site for mobile web browsing. This contest is not to redesign the Hestia B2B website or features but to simplify them and extend the Hestia B2B services via the iPhone and Android web browsers.
Resources & Requirements
IMPORTANT
- Keep things consistent. This means all graphics styles should work together.
- Please reference the provided prototype and GUI PSD Kit(You can download from Hestia Contest Resource page) to help make the user experience in Mobile Web applications consistent.
- Your submission design must have general web layout that mimics the look and feel of the application
- Make your design simple and clean - think "mobile web browser" and the limitiations of size/space
- Check your spelling before submitting.
Design Consideration
- Remember when creating graphics for mobile site, all UI elements would have fluid width, so it will support any layout.
- Graphics should be limited and simplifed on the mobile version - the site should still look good but use appropriate design conventions to replace "heavy graphics"
- No multimedia is present.
- Theme branding/style is consistent with the existing Application.
- Research related "cool" web based Safari Mobile and Android browsers applications and how they work/interact/navigate.
- There must 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.
- Amazon, Walmart, eBay are samples of best practice site that have Web Mobile Application designed well. (notice how they simplify all the steps - Amazon's mobile site is almost better UX then their full site)
- Please research the Safari on the iPhone or in Android browsers guidelines for size and best practices, here's some links to help you begin designing the application for mobile:
Best Practices To Develop Perfect Websites for iPhone and Mobile Devices
http://woorkup.com/2010/01/10/best-practices-to-develop-perfect-websites-for-iphone-and-mobile-devices/
Mobile Web Design: Tips and Best Practices
http://www.noupe.com/how-tos/mobile-web-design-tips-and-best-practices.html
Mobile Web Design: Tips & Techniques
http://www.cameronmoll.com/archives/000577.html
Application Details
Please click around provided fol-prototype HTML/CSS/JS to become more familiar with the Hestia B2B Application.
These requirements need convert into storyboard design for Mobile Device Website Application. Show us the page flow between them.
1). FOL Optimization
- Mobile site, in most cases, should be simpler than standard site.
- Eliminating graphic elements from the site is usually an effective way to optimize its display on a mobile device. (remember - it should still keeps its branding)
- Look for ways to simplify both the design and functionality of the site.
2). Login
Reference: login-alt.html, login.html
- How the login page looks for mobile web layout? (It can be a new design! - within the the Hestia branding)
- Show us how the validation error when user do some mistakes when input login data.
3). Detect where you are
- When the user logs in - they will be prompted about their current location
4). 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)
5). Nearest Location
- Once user logs in, it will show the nearest Hestia store/branch
- What does the store/branch list look like?
- What items should be listed for each store/branch?
6). Products in location
- This is products available at the selected store/branch
- It will need showing images, and product information.
- It will need an "Add to Cart" button/features
7). Product Details Information
Prototype Reference: product_details.html
- Show product image and information
- It will need an "Add to Cart" button/features
- This page also need include description, write-up, safety features/hazards, related products.
8). Place order for pickup
- Show us and Order page
- The user will want to pick-up the order
9). Text when order is ready
- This feature will alert user when their order is ready, show us how the page flow will be?
10) Any other features we should be thinking about?
- Research other iPhone/Android Browser Mobile applications and help bring ideas to this project - but lets keep it clean and simple.
Target User
- Potential Customer
- Current Customer
- Remodeler
- Vendors
- Associates
Judging Criteria
- How well you create designs for Safari Mobile / Android Mobile and keep things consistent with the current site design.
- Cleanliness of your graphics and design.
- User Experience!!!
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
All Requested Contest Submission Requirements stated above.
IMPORTANT - If you are submitting "small updates or changes" with multiple submissions please include in your notes file what is different or changed - this can be confusing to the client sometimes when they can't tell what is different.
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.