Challenge Summary
Welcome to AppXpress 4714 Rehrig Responsive Application Design Challenge
For this challenge, we need your help design responsive version for Mobile and Desktop layout.
You need research and plan how best practice responsive application look on required mobile and desktop
In this challenge we are looking your improved design on what the user should see and experience when engaging with the Client application on Mobile and Desktop. We also want to focus on what items should have priority to the user. Read the required screens carefully and let us know what you think via your design ideas.
Round 1
Submit these following screens on Mobile Retina (2x Size) Portrait (750px x 1024px)
1). Dashboards
2). Container Look Up
3). Report - Movement Transactions
4). Activities - Inventory Move
5). Activities - Container Profile
6). Activities - Maintenance Overview
- It will be great if you can also submit some Desktop version for review
- Provide us with a click map for your design, with annotations for all interactions.
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
- Readme.jpg: If needed, provide notes about your submission
Round 2
Submit these following screens on Mobile Retina (2x Size) Portrait (750px x 1024px) & Desktop Retina (2x Size) Wide (2560px x Height up to your design)
1). Dashboards
2). Container Look Up
3). Report - Movement Transactions
4). Activities - Inventory Move
5). Activities - Container Profile
6). Activities - Maintenance Overview
- Provide us with a click map for your design, with annotations for all interactions.
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
- Readme.jpg: If needed, provide notes about your submission
Rehrig has grown to become a world leading plastic pallet manufacturer and container manufacturer serving the agriculture, bakery, beverage, dairy and materials handling industries and, since the ‘80s, a roll-out cart, recycling bin and commercial container manufacturer serving the waste and recycling collection industry as well.
For this challenge, we need build Rehrig Waste Management application that allow customers to track location and verify service of large industrial waste containers. Initiate work orders for maintenance of containers, or relocation. Report on summary and individual containers.
We are looking your design idea solution to is to create brand new look and feel for responsive mobile and laptop screens based on the existing desktop sized web application.
We are open to your ideas that could improve the UX but please include all the same fundamental functions of the current application.
Design Consideration
- We provide you with client existing style guide (StyleGuide.jpg). This is flat image, in your submission you need recreate the design by following style guide
- Use Proxima Nova for design base font
- Think about how design arrange on Mobile and Desktop screens. Research and plan how you can best design the required elements to fit into a responsive friendly design.
- DO NOT just change existing application screenshots. You need come up with better interface and user experience!
- Suggest up to date function element and interaction when using the application on wider screen than mobile.
- Click around on provided screenshots to get familiar with page flow
- Feel free suggest any things that can improve the User Experience of current application.
- Study the competition! We strongly encourage you to reference and study competing responsive products when planning your design.
- Required screen sizes:
1). Mobile Retina (2x Size) Portrait (750px x 1334px)
2). Desktop Retina (2x Size) Wide (2560px x Height up to your design)
Main Application Features:
- Tracking current and historical location of containers
- Reporting on any pertinent information in the system
- Service verification for customer support
- Tracking of container conditions and required maintenance
User Flow
- Internal support does configuration and deployment as well as fielding customer support request
- Customer truck drivers use their tablets to enter applicable information for any container relocations or maintenance requests
- Customer dispatchers use the web app to help make informed routing decisions
- Customer operations employees use the web app to verify driver compliance and customer satisfaction
- Customer sales and HR employees use the reporting to make purchasing, selling, transfer of asset decisions based on inventory levels and locations
Prototype Demo Site
http://12.145.183.45:9292/sensornet/html5/iapp/login/html/login.html#1
Username: dcarroll
Password: dcarroll1
Design Challenge Requirements
- For this Design challenge you need submit these following screens on Mobile and Desktop layout.
- For each task below, please refer to the provided screenshots.
1). Dashboards - Total Container Float
Screenshot: 02-a-Dashboard-Total-Container-Float-Grid.png
- This is how Dashboard page look
- Existing page layout divided by these following sections
Header
- User provided logo (RVision Logo.jpg)
- Main navigation for this application are: Dashboard, Reports, Activities and Configuration
- Design active and inactive state
- Welcome user placed on the right side of header bar
- And there’s Logout button
Sub Navigation
- Sub-navigation will change based on selected main navigation
- You might need redesign existing icon sets for sub-menu
- Make sure all icons appear as single set of icon, they need use consistent theme and styling
- Design active and inactive state for sub menu
Filter Area
- Match filter content like screenshot
- Think about how you can improve Filter functions
- Notice there’s required mark for Customer Location
- How the error message look when user not select the dropdown
- Create 1 sample screen to show us how dropdown menu look (Screenshot: 02-c-Dashboard-Total-Container-Float-Dropdown.png, 02-d-Dashboard-Total-Container-Float-Dropdown.png, 02-e-Dashboard-Total-Container-Float-Dropdown.png, 02-f-Dashboard-Total-Container-Float-Dropdown.png)
Body Area
- Body area displaying these following tables:
a). Table Site List
- User can search table by typing keyword on the input
- There’s action button set that will display number of rows, Sort, Print, Save, Columns, Delete button
- Create 1 separate screen to show us how Sort Modal Window look (Screenshot: 02-g-Dashboard-Total-Container-Float-Modal.png, Screenshot: 02-h-Dashboard-Total-Container-Float-Modal.png, Screenshot: 02-i-Dashboard-Total-Container-Float-Modal.png)
- Match content for each row
- Show us how selected row look like
- Also, there’s a Show Chart button that will convert existing table into Bar Chart Mode (Screenshot: 02-b-Dashboard-Total-Container-Float-Chart.png)
b). Table Container List
- User can search table by typing keyword on the input
- There’s action button set that will display number of rows, Sort, Print, Save, Columns, Delete button
- Match content for each row
- Also, there’s a Show Chart button that will convert existing table into Pie Chart Mode (Screenshot: 02-b-Dashboard-Total-Container-Float-Chart.png)
c). Table Container Detail
- Table in the bottom will change dynamically when user select different sites
- User can search table by typing keyword on the input
- There’s action button set that will display number of rows, Sort, Print, Save, Columns, Delete button
- Match content for each row
- Think about how pagination designed
Footer Area
- Footer area need displayed Last Login Time
- Think about better placement and how footer should designed
2). Container Look Up
Screenshot: 03-Dashboard-Container-Look-Up.png
- For this screen, you need display table on the left side
- Detail table need remain display on the right side
- But for the right table, user need able to see where’s the location on Map
- Match table content for both Site and Container Detail page
3). Report - Movement Transactions
Screenshot: 08-Reports-Movement-Transactions.png
- User navigate to this page from menu Reports then Movement Transactions
- Filter area placed on top of page
- Show us how datepicker design look when select From and To field
- Match table content look
- Notice there’s sort and filter button for each table
4). Activities - Inventory Move
Screenshot: 12-a-Activities-Inventory-Move.png
- User navigate to this page from menu Activities then go to Inventory Move
- This page will display form to let user move the inventory
- Yard selection selection by default, then user need pick the option from dropdown menu (Screenshot: 12-c-Activities-Inventory-Move.png)
- If select Other Location option, user need able to select on map. And then get the coordinate (Screenshot: 12-d-Activities-Inventory-Move.png)
- After save the option, user get back to Inventory Move page
- For Condition button, click the button need load the modal window (Screenshot: 12-e-Activities-Inventory-Move.png)
- Display Successfully modal window after user submit the form (Screenshot: 12-f-Activities-Inventory-Move.png)
5). Activities - Container Profile
Screenshot: 13-a-Activities-Container-Profile.png
- User navigate to this page from menu Activities then go to Container Profile
- There’s big Add and Edit Container button placed below sub navigation. Make sure the button prominent in your submissions
- Click Add button need load the modal window (Screenshot: 13-b-Activities-Container-Profile-Add.png)
- There’s toggle options for Details and Condition.
- Match other form field element
- Place filter on top of table
- Match table column content like provided screenshot
6). Activities - Maintenance Overview
Screenshot: 14-a-Activities-Maintenance-Overview.png
- User navigate to this page from menu Activities then go to Inventory Move
- User need pick Maintenance Yard to see the ticket of related Yard
- Maintenance Overview of selected yard placed on the right
- There’s Show Hot Tickets Only option with toggle button
- Refresh and Search button placed on the right
- Click the row need show up the detail (Screenshot: 14-b-Activities-Maintenance-Overview-Ticket-Details.png)
- Red colored circle shape indicated the Hot Tickets
- Match table row content
Target Audience
- Internal Support Users
- Customer Truck Drivers (tablet application)
- Customer Dispatchers and Operations (web app)
- Customer Sales and HR employees (web app)
Judging Criteria
- How well you create for Mo/Desktop version and keep things consistent with the existing design brand.
- Cleanliness of your graphics and design.
- User Experience for Tablet/Desktop application.
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 image files based on Challenge submission requirements stated above.
Source Files
All source files of all graphics created in either Adobe Photoshop or Illustrator and saved as editable.
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.