Challenge Summary
Welcome to the FAST!! Hestia B2B Mobile Scenario Design Updates. The goal of this contest is to edit and update the provided Hestia mobile screens so they follow the new user scenarios. We are beginning to focus on how users will use this application and need to finalize the different cliick-paths and capture any functionality that might be missing.
At the end of this contest we are looking for a clear and clean user click-path for the Hestia mobile application.
Round 1
Your initial scenario flows for client review
1). Scenario #1
2). Scenario #2
Please number your files in the order they should be viewed.
Notes.jpg: Any comments about your design for the Client
Round 2
Final Scenario Design
1). Entire Scenario 1&2
2) Any design or scenario updates requested at the Milestone
Please number your files in the order they should be viewed.
Notes.jpg: Any comments about your design for the Client
Contest Details
We need to update the Hestia Mobile screens to capture the provided User Scenarios.
Note: FOL = Hestia and Hestia = FOL
Design Requierements
- Download the provided PSD files - we are keeping the design the same as the provided screens.
- Update and edit items so they meet the new scencarios click-path requirements
- Remember when you create new graphics for mobile site, all UI elements must have fluid width, so it will support any layout.
- 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.
- Please research the Safari on the iPhone or in Android browsers guidelines for size and best practices, here's some web to help you begin design the application for mobile site:
Best Practices To Develop Perfect Websites for iPhone and Mobile Devices
Mobile Web Design: Tips and Best Practices
Submission Requirements
- Use FOL-Mobile-PSD-Source-Files as base of your design.
- These following scenarios are required in your submission, you're encourage to show us any extra screens to explain the flow of your solutions.
- You also need to optimized/update screens based on any design requirement updates.
- In the scenarios below, you should refer to FOL-Mobile-Screenshots.
Scenario #1
Reference: Scenario1.pdf
Step 1 (Access Login)
- User access FOL Mobile Site and land on login page (01_1_login.png)
- Keep login form on top of screen.
- Add new features/link on login page:
1. Add NEW Way to Register (Not registered? Call for access. Takes 24 hours. )
2. Add NEW way to do Voice Auth (Voice authorization goes to setup for voice – 1st time access)
3. Add NEW way to Save Settings
- After Login:
-- There will be Auto Detect Location confirmation (01_2_login.png)
-- Create New option Remember the Auto Detect Location setting
-- Need Register button
Step 2 (Account Widget)
- After logged in user landed on Account Widget
- Current design is like this (Grid/01 Grid Icon 1.png)
- You need to update this page/design to fit the scenario description/titles
- Update the page to show "Product Catalog", "Location Finder" and "Preferences".
- You need create new button for "Preferences". Create consistent icon style. We need high quality icons
Step 3 (Product Catalog)
- Use drill down Product Catalog (04_1_product_listing.png)
- Keep the search at the top "open" at the top and remove the logo (no need to keep the logo within the app function screens)
- Update the navigation icons to fit with the Account Widget (Step 2) buttons.
Step 4 (Drill Down Product Category)
- User drill down on Product Category (04_3_product_listing.png)
- In this page it will show Product image, Brand and description
- Scroll down to see more results
- Touch product to see details
- Keep the search at the top "open" at the top and remove the logo (no need to keep the logo within the app function screens)
- Update the navigation icons to fit with the Account Widget (Step 2) buttons.
Step 5 (Product Details)
- This Product Details page (04_4_product_listing.png)
- This page will displayed larger product image (make the image larger), Brand name and description and price
-- Tab 1 has additional info like existing content
-- Tab 2 contains specs/pdfs
- Scroll for more informations of Product Details.
- Create a hyperlink for "where is it"
- Keep the search at the top "open" at the top and remove the logo (no need to keep the logo within the app function screens)
- Update the navigation icons to fit with the Account Widget (Step 2) buttons.
END SCENARIO #1
Scenario #2 (Pick up where Scenario 1 leaves off)
Reference: Scenario2.pdf
Step 5 (Product Details)
- From the product detail page (04_4_product_listing.png), add product availability
- Scroll down page for more info
- From the product image and tabs, scroll down to see the details
- Product Details info may be a bulleted list
- Product Details info may have a table of data
- Scroll down page for more info
- Keep scrolling
Step 6 (Product Details)
- Continue scrolling to see what branches have the product in stock
- Customer sees a big "BUY NOW" button
Step 7 (Buy Product)
- Need create new screen displaying this scenario
- User buys one product, pick it up at the branch, put on account
- Display product image, brand and description
- Show pickup branch info
- When it will be ready "Confirm" button
- Show contact preferences
- Email goes to the branch
- Customer recieves confirmation via his "contact me" choices
END SCENARIO #2
Target User
- Potential Customer
- Current Customer
- Remodeler
- Vendors
- Associates
Judging Criteria
- How well you update the provided screens and "complate" the listed scenarios
- Cleanliness of your graphics and design.
- User Experience for Safari Mobile / Android Mobile Web application.
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 for your submission file. 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. As part of final fixes you may be asked to fix or update your screens to meet any missed requirements, forum requirements or milestone requirements.
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.