Challenge Summary
Welcome to "Asset Viewer Iconography and Mobile App Design Concepts Challenge". We are looking for Topcoder Community creativity to create the best mobile UI/UX for an application that able to quickly view an asset and it's details on a mobile device as a result of an event notification or ad-hoc query.
We are providing wireframes - do not copy the wireframes directly. The wireframes are meant as simple guidelines around the content and features for this apps. We are open to your creative and innovative ideas!
00. Icon Set
01. Login Screen (iPhone)
02. Search and Search Result Screens (iPhone)
03. Asset Details (iPhone & Android)
04. Asset Graph (iPhone & Android)
05. Events Screen (iPhone)
- Provide a MarvelApp presentation of your design to help us understand your design concept.
- Request a MarvelApp prototype/project from copilot fajar.mln or adroc or tgerring (via forum or email)
- Make sure all pages have correct flow. Use correct file numbering. (00, 01, 02, 03)
00. Icon Set
01. Login Screen (iPhone)
02. Search and Search Result Screens (iPhone)
03. Asset Details (iPhone & Android)
04. Asset Graph (iPhone & Android)
05. Events Screen (iPhone)
06. Events Details Screen (iPhone & Android)
07. Event Graph Screen (iPhone & Android)
08. Event Notes Screen (iPhone)
09. User Profile (iPhone & Android)
- Provide a MarvelApp presentation of your design to help us understand your design concepts (replace your checkpoint images).
- Make sure all pages have correct flow. Use correct file numbering. (00, 01, 02, 03)
Background Overview
This challenge purpose is to create the best practice UI/UX for our Asset Viewer mobile application. Please take our existing screen mocks and design all required screens and also create an icon set for the application. Please be creative in this challenge, and critique the screen mocks if the design conflicts with best practices for mobile development targeting the iPhone and Android platforms.
Challenge Goal
Create an application that able to quickly view an asset and it's details on a mobile device as a result of an event notification or ad-hoc query.
Design Considerations
- Review the provided wireframes
- What should the priority features be?
- UI/UX Best Practice for Mobile Design!
- How quickly could you find information?
- The interface will be easy and intuitive to navigate
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
Design Requirements
- Native Mobile Design!
- iPhone5 Resolution: 640px x 1136px
- Android Samsung Galaxy 5 Resolution: 1080px x 1920px
- Upload your screens to MarvelApp for review and to showcase the experience (ask for MarvelApp prototype/project from copilot or PM in challenge forum)
Branding Guidelines
- Color: Follow the provided logo
- Font: Open to Designer
- Follow best practice for mobile design!
Inspirational Mobile Applications
- Facebook
- Vimeo
- iPhone Music App
- iPhone Network App
- iPhone Stock App
- iPhone Mail App
- iPhone Phone App
- iPhone App store
- Linkedin
Required Pages
For this challenge, we are looking for the below pages to be designed/considered in your concepts.
00. Icon Set
- We need to create template set for all icons that being used in the application in vector shape format on Photoshop or Illustrator:
-- Event Counter Icon
-- User Profile Icon
-- Events Notification Icons
-- Level
-- Totalizer - Multiple Tanks
-- Pressure
-- Temperature
-- Horizontal Tank
-- Battery
-- Compressor Status
- Please create all icons as flat icon
- Please create App Store icons for Apple and Android Playstore
- Please create example of notifications at bottom of screen
01. Login Screen (iPhone)
Reference WF Page 1
- Orientation: Portrait
- User will need to login first to the apps.
- Ordinary login screen fields needed (username, password, login button).
- Use the provided logo for the apps or re-create it (as we don’’t have the high resolution file)
- Provide error login scenario.
02. Search and Search Result Screens (iPhone)
Reference WF Page 2 & 3
- Orientation: Portrait
- User will be able to search asset or view previous searched items from this screen
- Once user logins to the application, by default show this screen unless the user is notified of an event then direct user to the Event Details screen.
- Think of easy interaction like provided by Music app – iPhone magnifying glass icon, upper left corner always visible.
- Previous searches and search results – custom
- Reference: Options at bottom of screen concept taken from Facebook, Vimeo, Pinterest
03. Asset Details (iPhone & Android)
Reference WF Page 4 & 5
- Orientation: Portrait
- View current reading values for items being monitored and view event details if present
- User can get to screen from Search or Event details screens
- Reference: Navigation to go back – Gmail app
04. Asset Graph (iPhone & Android)
Reference WF Page 6, 7, 8
- Orientation: Landscape
- View current and historical reading values for items being monitored using a graph.
- User can view multiple views if multiple items are being monitored at the location
- Expecting 3 designs for this screen (check wireframes)
- User can get to screen from Search or Event details screens
- Reference, Stock app on iPhone
05. Events Screen (iPhone)
Reference WF Page 9
- Orientation: Portrait
- View active events for a domain.
- Shows a list of all events with a visual indicator if the event has not been acknowledged.
- Also, shows a count of all unacknowledged events
- User can get to screen from Search screen
- Reference: Same as mail items listed in Gmail inbox. All Events and My Acknowledged from iPhone Phone app/recent calls option
06. Events Details Screen (iPhone & Android)
Reference WF Page 10
- Orientation: Portrait
- View event details.
- On this screen the user can acknowledge the event also click edit to update the notes for the event
- User can get to this screen from Events or Asset Details Screen
- Reference: Custom and "Edit" option from Facebook profile edit option
07. Event Graph Screen (iPhone & Android)
Reference WF Page 11
- Orientation: Landscape
- View current and historical readings for the item which has the active event
- Screen accessed from Event Details.
- Same screen is viewable if the user were to search for the asset and viewed the asset details in landscape mode
- Reference: Stock app on iPhone
08. Event Notes Screen (iPhone)
Reference WF Page 12
- Orientation: Portrait and Landscape
- Give the user the ability, if they have permission to edit the notes for an event
- Screen accessed from Event Details.
09. User Profile (iPhone & Android)
Reference WF Page 13
- Orientation: Portrait
- Give users the ability to change domains, language and logout
- Screen accessed via the User Profile icon
- Reference: Wifi App on iPhone
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Documentation
- Documentation.zip: contains wireframes and sitemap as references for content and workflow
Target Audience
- Corporate Users will be using this app. Male and Female, professionals, over 25yrs of age.
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- How well you interpret the requirements and show us new ideas and concepts.
- Cleanliness of your graphics and design.
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 will be asked to update the style tile to reflect any new elements that you have added to the design. You may also 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.
We are providing wireframes - do not copy the wireframes directly. The wireframes are meant as simple guidelines around the content and features for this apps. We are open to your creative and innovative ideas!
Round 1
Submit your initial design for a checkpoint feedback00. Icon Set
01. Login Screen (iPhone)
02. Search and Search Result Screens (iPhone)
03. Asset Details (iPhone & Android)
04. Asset Graph (iPhone & Android)
05. Events Screen (iPhone)
- Provide a MarvelApp presentation of your design to help us understand your design concept.
- Request a MarvelApp prototype/project from copilot fajar.mln or adroc or tgerring (via forum or email)
- Make sure all pages have correct flow. Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final design plus checkpoint feedback00. Icon Set
01. Login Screen (iPhone)
02. Search and Search Result Screens (iPhone)
03. Asset Details (iPhone & Android)
04. Asset Graph (iPhone & Android)
05. Events Screen (iPhone)
06. Events Details Screen (iPhone & Android)
07. Event Graph Screen (iPhone & Android)
08. Event Notes Screen (iPhone)
09. User Profile (iPhone & Android)
- Provide a MarvelApp presentation of your design to help us understand your design concepts (replace your checkpoint images).
- Make sure all pages have correct flow. Use correct file numbering. (00, 01, 02, 03)
Background Overview
This challenge purpose is to create the best practice UI/UX for our Asset Viewer mobile application. Please take our existing screen mocks and design all required screens and also create an icon set for the application. Please be creative in this challenge, and critique the screen mocks if the design conflicts with best practices for mobile development targeting the iPhone and Android platforms.
Challenge Goal
Create an application that able to quickly view an asset and it's details on a mobile device as a result of an event notification or ad-hoc query.
Design Considerations
- Review the provided wireframes
- What should the priority features be?
- UI/UX Best Practice for Mobile Design!
- How quickly could you find information?
- The interface will be easy and intuitive to navigate
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
Design Requirements
- Native Mobile Design!
- iPhone5 Resolution: 640px x 1136px
- Android Samsung Galaxy 5 Resolution: 1080px x 1920px
- Upload your screens to MarvelApp for review and to showcase the experience (ask for MarvelApp prototype/project from copilot or PM in challenge forum)
Branding Guidelines
- Color: Follow the provided logo
- Font: Open to Designer
- Follow best practice for mobile design!
Inspirational Mobile Applications
- Vimeo
- iPhone Music App
- iPhone Network App
- iPhone Stock App
- iPhone Mail App
- iPhone Phone App
- iPhone App store
Required Pages
For this challenge, we are looking for the below pages to be designed/considered in your concepts.
00. Icon Set
- We need to create template set for all icons that being used in the application in vector shape format on Photoshop or Illustrator:
-- Event Counter Icon
-- User Profile Icon
-- Events Notification Icons
-- Level
-- Totalizer - Multiple Tanks
-- Pressure
-- Temperature
-- Horizontal Tank
-- Battery
-- Compressor Status
- Please create all icons as flat icon
- Please create App Store icons for Apple and Android Playstore
- Please create example of notifications at bottom of screen
01. Login Screen (iPhone)
Reference WF Page 1
- Orientation: Portrait
- User will need to login first to the apps.
- Ordinary login screen fields needed (username, password, login button).
- Use the provided logo for the apps or re-create it (as we don’’t have the high resolution file)
- Provide error login scenario.
02. Search and Search Result Screens (iPhone)
Reference WF Page 2 & 3
- Orientation: Portrait
- User will be able to search asset or view previous searched items from this screen
- Once user logins to the application, by default show this screen unless the user is notified of an event then direct user to the Event Details screen.
- Think of easy interaction like provided by Music app – iPhone magnifying glass icon, upper left corner always visible.
- Previous searches and search results – custom
- Reference: Options at bottom of screen concept taken from Facebook, Vimeo, Pinterest
03. Asset Details (iPhone & Android)
Reference WF Page 4 & 5
- Orientation: Portrait
- View current reading values for items being monitored and view event details if present
- User can get to screen from Search or Event details screens
- Reference: Navigation to go back – Gmail app
04. Asset Graph (iPhone & Android)
Reference WF Page 6, 7, 8
- Orientation: Landscape
- View current and historical reading values for items being monitored using a graph.
- User can view multiple views if multiple items are being monitored at the location
- Expecting 3 designs for this screen (check wireframes)
- User can get to screen from Search or Event details screens
- Reference, Stock app on iPhone
05. Events Screen (iPhone)
Reference WF Page 9
- Orientation: Portrait
- View active events for a domain.
- Shows a list of all events with a visual indicator if the event has not been acknowledged.
- Also, shows a count of all unacknowledged events
- User can get to screen from Search screen
- Reference: Same as mail items listed in Gmail inbox. All Events and My Acknowledged from iPhone Phone app/recent calls option
06. Events Details Screen (iPhone & Android)
Reference WF Page 10
- Orientation: Portrait
- View event details.
- On this screen the user can acknowledge the event also click edit to update the notes for the event
- User can get to this screen from Events or Asset Details Screen
- Reference: Custom and "Edit" option from Facebook profile edit option
07. Event Graph Screen (iPhone & Android)
Reference WF Page 11
- Orientation: Landscape
- View current and historical readings for the item which has the active event
- Screen accessed from Event Details.
- Same screen is viewable if the user were to search for the asset and viewed the asset details in landscape mode
- Reference: Stock app on iPhone
08. Event Notes Screen (iPhone)
Reference WF Page 12
- Orientation: Portrait and Landscape
- Give the user the ability, if they have permission to edit the notes for an event
- Screen accessed from Event Details.
09. User Profile (iPhone & Android)
Reference WF Page 13
- Orientation: Portrait
- Give users the ability to change domains, language and logout
- Screen accessed via the User Profile icon
- Reference: Wifi App on iPhone
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Documentation
- Documentation.zip: contains wireframes and sitemap as references for content and workflow
Target Audience
- Corporate Users will be using this app. Male and Female, professionals, over 25yrs of age.
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- How well you interpret the requirements and show us new ideas and concepts.
- Cleanliness of your graphics and design.
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 will be asked to update the style tile to reflect any new elements that you have added to the design. You may also 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.
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.