Challenge Summary
Welcome to the SFDC - White Wizard Digital Sales AID Responsive UI Design Concepts Challenge! This is another challenge in our ongoing Salesforce1 challenge series. It's a great opportunity for our community to demonstrate it's SF1 design chops.
In this challenge, we would like to design a sales kit application by following salesforce1 design guidelines that can be used by businesses to help their sales teams sell better to the customers. With this sales kit application, the sales team could easily search and find relevant content to share with their customers.
We are providing design direction document to help you get started on planning your design concepts.
Round 1
Submit your initial screen for Checkpoint feedback
0. Navigation (Mobile)
1. Dashboard (Mobile + Tablet)
2. All Categories View (Mobile + Tablet)
2.1 Category Detailed View (Mobile)
5. Details Screen (any one of details screen) (Mobile + Tablet)
Feel free to add any other additional screens which are necessary to explain your design.
Notes.jpg: Any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required page with all checkpoint feedback implemented.
0. Navigation (Mobile + Tablet)
1. Dashboard (Mobile + Tablet)
2. All Categories View (Mobile + Tablet)
2.1 Category Detailed View (Mobile + Tablet)
3. All Products View (Mobile + Tablet)
3.1 Products Detailed View (Mobile + Tablet)
4.All Media View (Mobile + Tablet)
5. Details Screen (Mobile + Tablet)
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The main focus of this design challenge is the end user interfaces, which need to be built with a responsive UI framework and be supported for use with the Salesforce1 application. This UI needs to be intuitive enough to easily get to the desired information, by navigating through the pre-defined categories, products, and product buttons as defined by the Admin. The intent is to have this be the goto place for Sales teams to easily search and seek relevant content (pdf/ppt/docx/xls/links, etc.) which would exist as configured buttons within Categories and Products.
Design Considerations:
- Follow the design guidelines from http://sfdc-styleguide.herokuapp.com/
- You can utilize all the elements from this style guide in your design (Colors, Icon styles, feeds, buttons, etc).
- Please find screen examples of salesforce1 here: http://sfdc-styleguide.herokuapp.com/?id=examples (Click on various componenets to see how their usage)
- We have provided a design direction documents both MOBILE and TABLETS to get help you get started with your concepts, please DO NOT COPY the screens as shown in the wireframes....feel free to add/improve any screens that could leverage salesforce1 design guidelines..
- Required Screen Sizes: Mobile (640 x 1136px) and Tablet (1024 x 768px)
- Please make sure to have the UI elements which you design as scalable vectors, so the final designs/any elements can be resized to required resolutions.
Scenario:
The White Wizard Sales Application customer:
Matt is an owner of a successful bakery. He’s looking for an application that can help his sales teams sell his services to potential customers. Matt is utilizes Sales Force for his business and is looking for a sales application that ties in with his Sales Force application. He browses the APP exchange in search of a solution to his problem and comes across the White Wizard Sales APP. Looking at the APP description he feels confident that this is the solution to his problem. The White Wizard sales APP is well designed and easy to use and they even have a template that fits his needs.
Right after purchasing the APP, Matt is diving in and customizing one of the templates provided in the application. He uploads his logo, applies his branding colors and fonts to the application, and uploads his sales materials in a snap and in no time he has created his own custom sales application that ties into his Sales Force. Matt is ready to hit the pavement and start sharing his sales materials with potential clients.
Matt validates the materials he needs using the S1 app on his iphone and heads over to a client meeting. This content could include video, PPT presentations, PDFs, Application Demo’s, and HTML 5 Websites. At the client site...Matt is able to pull these materials up and walk his client through the documents. After the meeting is finished...as a follow up...Matt is able to collect and email the files that he’s gone over to his client.
Required Screens:
We need below screens to be designed in both mobile and tablet view.
0. Navigation:
- Please use the default style of salesforce1 style for header..
- We need your help to the items within the navigation, a user will be able to view the navigation by either tapping on the nav icon or by swiping left from any screen..
- You can have a look at the default style of navigation here: http://sfdc-styleguide.herokuapp.com/?id=examples (click on "stage left").
1. Dashboard:
- This is main dashboard view of this sales kit AID application..
- We need these main items within this screen: Categories, Products, Media (please find more information on these screens below)
- Tapping on these main items will need to take the user to their respective details screen.
- Expand your concepts and feel free to show anything else you think would be helpful for this sales kit application..
- Consider showing a dashboard navigation scheme that can expand to more than 4 navigation items
2. All Categories View:
- This shows organization of sales materials by categories and products, so that can be they can be quickly shared with any of the customers.
- Single Tap on an categories reveals the product folders, files etc.. and double tap reveals the files within a category in a separate page (see "2.1 Category Detailed View" below)
- We need a way for the user to upload materials (documents, media - images, videos, etc..)...please show in your design, how a upload view will look like?
- Need a way for the user to search, please include a screen to show how a user searches for categories?
- In your designs please use images instead of the folder, category, and file icons (You can use stock photography as a place holder)
2.1 Category Detailed View:
- When a user double taps on any of the categories folder from the above view, shows this view.
- This is main category view which lists product folders (list of sales materials specific to a product) and other required sales materials for this category.
- Show us how a user can add a folder and also files within the folder? feel free to add any additional screens if required..
- Hows should we allow the user to edit an existing item? please show this in your designs..
- How does a user initiaties the search and how do we need to show the filters for the serach?
3. All Products View:
- User reaches this view, when they tap on "Products" in dashboard screen..
- This shows organization of sales materials within a product folder..
- Like all other views, we need a way for the user to "add a folder, edit existing, upload items to a folder, search for files (category/product/file)" please consider this while designing.
3.1. Product Detailed View:
- When a user double taps on any of the Products folder from the 3. Products (or) taps on the arrow icon in any file in 4. Media view, then we show this view..
- This is main products view which lists product folders (list of sales materials specific to a product) and other required sales materials for this category.
- Show us how a user can add a folder and also files within the folder? feel free to add any additional screens if required..
- Hows should we allow the user to edit an existing item? please show this in your designs..
- How does a user initiaties the search and how do we need to show the filters for the serach?
4. All Media View:
- User reaches this view, when they tap on "Media" in dashboard screen..
- This is the main media page, where all media (documents, images, videos etc..)
- Tapping on any of the file should take the user to their respective details page..
5. Details screens:
- These are the detail screens for Document, Videos, Presentation..etc..
- A user reaches the detail screens by tapping on any of specific files within category/product folder (or) in media screen..
Document Detail:
- Wireframe just shows a sample template for word docs, PDFs, and other articles.
- Think on how we need to handle these?
Video Detail:
- This shows a video thumbnail and social sharing options as well as comments.
- We need a way to show the information about the video beign viewed
- Please show a comments view..
Presentation detail:
- This could be a PPT document or Keynote..
- How does the user move between slides and what are the options that need to be shown in this view?
Target Audience:
- All business users who is looking sales application that ties with salesforce application.
Judging Criteria
- How well you design the provided design challenge
- Cleanliness of your graphics and design.
- Design and User Experience.
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Please upload PNG images in a zip file with all requested contest requirements stated above. Number your files (01, 02, 03, etc) this will help review them in order.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics, images (sizes or colors) or modify overall colors. Winner of this challenge might be asked to create the retina designs as a part of final fixes.
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.