AppXpress - QOIPR New Reseller Wizard Design Challenge

Welcome to "AppXpress - QOIPR New Reseller Wizard Design Challenge". We are excited to involve our talented community to help us design a desktop screens for our new reseller wizards which will be added to QOIPR apps that can be utilised by a new user/reseller to create/add all necessary information so it can be easily recorded to QOIPR application.

We are looking for creative, clean, professional and the best UI/UX possibility for this apps. Looking forward to see your participation in this challenge.

Round 1

01. Step 1 - Create Reseller Details Screens 
02. Step 2 - Corporate Identity
03. Step 3 - Manage Terms & Conditions
04. Step 4 - Manage Shipping Cost Schedule
05. Step 5 - Manage Client Segments
06. Step 6 - Configure Incoming Mail Server (POP3)

Round 2

01. Step 1 - Create Reseller Details Screens 
02. Step 2 - Corporate Identity
03. Step 3 - Manage Terms & Conditions
04. Step 4 - Manage Shipping Cost Schedule
05. Step 5 - Manage Client Segments
06. Step 6 - Configure Incoming Mail Server (POP3)
07.Step 7 - Configure Outgoing Mail Server (SMTP)
08. Step 8 - Administration and System Users
09. Step 9 - Manage Supplier Pricing Data Feeds
10. Step 10 - Import Clients
11. Step 11 - Import Suppliers
12. Step 12 - Reseller Finance System Integration
13. Step 13 - Upload Warehouse Inventor

 

Background Overview 
QOIPR is an IT-procurement-as-a-service application. Various entities interact with QOIPR in order to satisfy IT procurement requirements, for example IT departments, sales staff, wholesalers, manufacturers, service providers and more. QOIPR implements a standard and generally accepted methodology of procurement. The process involves:

1. Creating quotes
2. Placing orders
3. Producing invoices
4. Making payments and/or submitting purchase orders
5. Generating receipts

Service providers, i.e. resellers, can use QOIPR as a generic, unbranded solution tailored to the needs of their clients, whereas internal IT departments may utilise QOIPR to interact directly with a portfolio of suppliers and/or manufacturers to make their IT purchases. These providers and resellers are the primary users of QOIPR.

Challenge Goals 
Configuring QOIPR requires data describing the reseller, its clients and suppliers to be stored in the QOIPR database. Therefore, there is a need to develop a user-friendly, fast, and easy-to-use New QOIPR Reseller Wizard (NQRW) process providing systematic guidance to QOIPR resellers.  

This new wizards screen will become a tool that can be utilised by a new reseller to create all necessary information records in QOIPR application. A reseller may discover QOIPR.com by searching for an IT procurement solution to replace their existing procurement processes (then they may consider signing up for a free trial of QOIPR at which point the reseller would run the wizard to set up a new QOIPR account in a step-by-step format).

Main Features
- Add new information about Reseller. 
- Upload Corporate Identity
- CRUD Client Segments
- Manage Administrative Documents
- Configure Mailing System
- Import Supplier/Clients
- Inventory and Finance Integration

Design Consideration
- Create it for Desktop : 1280px width with height adjusting accordingly 
- Simple, Professional, Easy to Use, and Clean responsive design.
- Please make sure your UI elements are created in vectors/shape, so it can be easily edited later for some smaller/bigger devices.
- Fast and intuitive Layout

Branding Guidelines
- Font, Color, Style : Up to designers.
- Design Orientation : Up to designers.
- We use the term "Wizard" to mean a software artefact that assists a user to achieve a single goal by presenting easier to achieve sub-goals.
- For more reference, see: http://ui-patterns.com/patterns/Wizard 

Screen Requirements
- Each steps below defines the wizard steps in sequence, pleasa read documents "QOIPR-NewResellerSetup2.2.docx" to get full details of each steps content. 
- Each step will display a pane for the purpose of capturing and validating the required data. Please create the following screens in your design :

01. Step 1 - Create Reseller Details Screens 
- Create & Edit Reseller Details
- New user can enter their personal information in the wizards.
- There should be a validation from the wizards to check whether the user already exist in the apps database or not (show error confirmation if data exist)
- User can delete the information (not really deleted, only flagged, delete features available only in admin)
- Next button to continue to 2nd step.
- Think the best UI/UX for this screen

02. Step 2 - Corporate Identity
- Upload Logos & Letterhead imagery
- In this step, user will be able to incorporate their corporation branding to the apps
- User will be able to upload their logos and setting all administrative headers for the system and outbound correspondence
- System needs to validated the image size and weight before user start uploading 
- User MUST at least provide one logo (no empty content)
- User will be able to resize/cropping uploaded logo.
- Think the best UI/UX for this screen

03. Step 3 - Manage Terms & Conditions
- Create & Edit Terms and Conditions
- User will be able to create and manage terms & Conditions from ths screen
- Documents can be uploaded file like docx, pdf, etc or create the documents via HTML
- All content of the terms and conditions should be editable
- Simple File browse, upload and view  
- Think the best UI/UX for this screen

04. Step 4 - Manage Shipping Cost Schedule
- Create & Edit Shipping Costs Schedule
- User will be able to see all shipping cost schedule via this screen
- User can edit or create new shipping cost schedule via this screen
- At least one shipping cost needs to be created in this screen and active (no empty content)
- Think the best UI/UX for this screen

05. Step 5 - Manage Client Segments
- Create & Edit Client Segments (the rationale for this placement is that a category / segment could be a column in the client import file in step # 4, and all the clients would then be categorised when a reseller first accesses their QOIPR instance)
- Provide the capability to setup client segments.
- User can split their clients into different segments/category
- One client means one category, client cannot be added to multiple category
- Show the client list based on category in the screen
- Think the best UI/UX for this screen

06. Step 6 - Configure Incoming Mail Server (POP3)
- Configure the email POP3 protocol; send and receive emails
- Sets up the retrieval of data feeds with suppliers' prices from a reseller's email account 
- Areseller must have the capability to edit the suppliers' prices automatically retrieved from supplier-generated emails.
- A new reseller can specify their username, password, server address, etc. 
- To enable QOIPR to automatically log on to, and then retrieve new emails from the reseller's email account; as well as send new emails
- For example, orders to suppliers, order confirmations to clients. These emailed data feeds can include the latest prices from a range of suppliers (usually retrieved on a daily basis).  
- Think the best UI/UX for this screen

07. Step 7 - Configure Outgoing Mail Server (SMTP)
- Similar function like Step 6 with different data fields needed
- Check our "QOIPR-NewResellerSetup2.2.docx" for the complete content needed in this step.
- Think the best UI/UX for this screen

08. Step 8 - Administration and System Users
- Provide placeholder content for now
- Just provide the step layout, no content needed, this area is out of scope for the current challenge.
- Create System Administration Users

09. Step 9 - Manage Supplier Pricing Data Feeds
- Manage Supplier Product Data Feeds
- Provide the capability to manage supplier-pricing data feed /import, including configuration of field mapping, validation and scheduling
- Full editing of the feeds schedule must provide client-side validation in order to ensure that the schedule dates and times make sense
- Duplications must be avoided (Provide validation and error confirmation)
- Data feed source files must be compliant with system-specified file formats
- Think the best UI/UX for this screen

10. Step 10 - Import Clients
- Import Clients
- User can imports client data from external file like CSV, XLS, XML, etc
- All imported data needs to follow specific data structures define in the apps
- If the data not match with the data structure or have duplicate entries (already exist in the database), provide an error confirmation to notify user about the issues.
- User can see file preview once the data uploaded successfully
- Think the best UI/UX for this screen

11. Step 11 - Import Suppliers
- Import Suppliers
- Same function like Step 10;
- Think the best UI/UX for this screen

12. Step 12 - Reseller Finance System Integration
- Finance System Integration
- Simple set of field form to allow user to integrate their data in QOIPR with other applications like MYOB, etc. 
- User can dismiss this step if they don't want to integrate their data.
- Think the best UI/UX for this screen

13. Step 13 - Upload Warehouse Inventory
- Upload Warehouse Inventory
- Provide the capability for Warehouse inventory to be imported into QOIPR
- Similar to Supplier import UI Concept, only different field content.
- Think the best UI/UX for this screen

Important:
- Keep things consistent. This means all graphic styles should work together and follow responsive best practice.
- All of the graphics should have a similar feel and general aesthetic appearance.
- Feel free to add new screen to explain your design interactions for the apps.

Target User
- IT resellers, a user with system administration rights who has a range of their own clients and uses QOIPR to manager their CRM workflows. The reseller is the primary QOIPR user; this New QOIPR Reseller Wizard (NQRW) is for this actor.
- End buyers of IT products, a reseller's own client buying from the reseller (the clients details in the QOIPR database). Note that both a reseller and their own clients can be QOIPR users.

Judging Criteria
- How well you plan the user experience and capture your ideas visually
- How well you design the application concept!
- Cleanliness of your graphics and design
- Creativity and ease-of-use is key to the success as it must be engaging to users.

Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
Submit JPG/PNG for your submission files.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.