Challenge Summary
Welcome back to the Hestia New Platform Mobile Application Storyboard Update Challenge
This challenge has a couple of different things going on. We need you make simple updates to some of the provided screens and then create the missing screens to help complete the new mobile experience. We have provided existing artwork and wireframes to help complete and build the new screen.
Challenge Focus:
- Update the existing screens
- Create and design the user experience and interactions for the missing screens
Round 1
For the checkpoint we would like to see the new screens - so we can provide feedback
6. Manage Shipping Addresses
7. Company Settings
8. Create New Employee
9. Edit Current Employee
10. Approval Limit Settings
Please number your files in the order they should be viewed.
Notes.jpg: Any comments about your design for the Client
Round 2
Final updates and design interactions
1. Registration
2. Thank You For Registering
3. Employee Settings
4. Employee Information
5. Edit Employee Information
6. Manage Shipping Addresses
7. Company Settings
8. Create New Employee
9. Edit Current Employee
10. Approval Limit Settings
00. Hestia Dashboard
Please number your files in the order they should be viewed.
Notes.jpg: Any comments about your design for the Client
Contest Details
The goal of this this challenge is to update the existing mobile storyboards and also create the missing mobile screens based on the provided wireframes! You need to follow the existing/provided mobile design them.
You are NOT creating a new design in this challenge! You are focused on fixing existing screens and creating new/missing screens to complete the Hestia Mobile experience!
Let us know if you have any questions in the forums!
NOTES:
- Ferguson-StyleGuide-v2.pdf = Style Guide
- Mobile Platform Phase 2 Screen Guide.pdf = This is a guide for the screen updates and missing screens.
- New Platform Wireframes = Wireframes grouped by missing screens (labeled below). This is showing desktop and mobile wireframes - design the user experience!
- New-Platform-Mobile-PSD.zip = Hestia New Platfrom current storyboard. You need use these storyboards as the base design for your updates
Design Challenge Requirements
1. Registration Flow
Wireframe: Mobile Platform Phase 2 Screen Guide.pdf > page 1
See folder in New Platform Wireframes
For this page - make these edits and updates to the existing design m_F6b-Edit-Personal-Information-Login-1.1.psd
- Add a checkbox below "What does this mean" area.
- Replace "Federal Tax ID" with "Account #"
- Add new "Where do I find my account #?" link.
- Add new "Zip Code" field below "Account # link"
- Add new checkbox for "Terms and Conditions"
New Screen: If the user click's on "Where do I find my account #" - it will show an image screenshot where the user can see their account number. Design this screen.
New Screen: What is the interaction/screen when the user clicks on "Terms and Conditions". Add button to print the "Terms & Conditions"
2. Thank You For Registering
Wireframe: Mobile Platform Phase 2 Screen Guide.pdf > page 2
- New Screen: See right side wireframe
- Capture the screen requirements from the wireframe and design the user experience!
- This is a thank you message after the user has completed and submitted Customer Registration
3. Employee Settings
Wireframe: Mobile Platform Phase 2 Screen Guide.pdf > page 3
Current Storyboard: m_F23a-My-Profile-Landing-1.2.psd
- Renamed "Profile Settings" into "Employee Settings"
- Remove "Federal TAX ID"
4. Employee Information
Wireframe: Mobile Platform Phase 2 Screen Guide.pdf > page 4
Current Storyboard: m_F6a-Edit-Personal-Information-View-1.1.psd
- Rename "Personal Information" as "Employee Information"
- Remove "Federal TAX ID"
5. Edit Employee Information
Wireframe: Mobile Platform Phase 2 Screen Guide.pdf > page 5
For this page - make these edits and updates to the existing design m_F6b-Edit-Personal-Information-Login-1.1.psd
- Rename "Edit Personal Information" as "Edit Employee Information"
- Disable "Company Name" input. Do not allow user to edit the Company Name.
- Remove "Federal TAX ID"
6. Manage Shipping Addresses
Wireframe: Mobile Platform Phase 2 Screen Guide.pdf > page 6
See folder in New Platform Wireframes
Current Storyboard: m_F7a-Address-Book-1.0.psd
- Add need dropdown to change "Shipping Address" and "Accounts"
- Add New Account dropdown that will allow user change the account
- Also you need add quick information area below Add New Account dropdown
- Add in the "shipping address from previous orders" icon and notes
- We need highlight primary address
- Update "Edit" into "Delete" button
7. Company Settings [new screen]
Wireframe: Mobile Platform Phase 2 Screen Guide.pdf > page 7
See folder in New Platform Wireframes
- Capture the screen requirements from the wireframe and design the user experience!
8. Create New Employee [new screen]
Wireframe: Mobile Platform Phase 2 Screen Guide.pdf > page 8
See folder in New Platform Wireframes
- Capture the screen requirements from the wireframe and design the user experience!
- This is where a company can add more users to their account
9. Edit Current Employee [new screen]
Wireframe: Mobile Platform Phase 2 Screen Guide.pdf > page 9
See folder in New Platform Wireframes
- Capture the screen requirements from the wireframe and design the user experience!
- This is where a company can edit an employee
10. Approval Limit Settings [new screen]
Wireframe: Mobile Platform Phase 2 Screen Guide.pdf > page 10
See folder in New Platform Wireframes
- Capture the screen requirements from the wireframe and design the user experience!
- This is where a company can set user approval spending limits
00. Hestia Dashboard [new screen]
See folder in New Platform Wireframes
- Capture the screen requirements from the wireframe and design the user experience!
- This is the user's main screen/dashboard
Target Audience
- Hestia Current Customer
Judging Criteria
- How well you update/create design screen for Mobile Application and keep things consistent with the existing site design.
- Cleanliness of your graphics and design.
- User Experience for Mobile 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.
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.