Challenge Summary
Welcome to "GUARD - Employee Central Hub App Design Concepts Challenge". In this challenge, we are looking to create an employee app to act as a central hub for us to engage with them, give them the information they need and provide collaborative social tools.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
2) Dashboard Screen
4) Mini App Screens
4.1) Car Share Mini App
4.2) Lunch Menu Mini App
4.3) Meeting Rooms Mini App
4.4) Locations (aka. Locations and Parking) Mini App
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
1) Login Screen
2) Dashboard Screen
3) Feedback Screen
4) Mini App Screens
4.1) Car Share Mini App
4.2) Lunch Menu Mini App
4.3) Meeting Rooms Mini App
4.4) Locations (aka. Locations and Parking) Mini App
5) Setting Screen
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
We are one of the biggest insurance companies in the world. Digital transformation is not only changing expectations from our customers but also our employees. We are looking to create an employee app to act as a central hub for us to engage with them, give them the information they need and provide collaborative social tools.
The main focus of the app is to iteratively develop new features in 'mini-apps' within the landing page. These mini-apps resemble the normal apps found on any smartphone.
Challenge Goals
Create an intuitive app that able to serve as a central hub for many mini apps that will help us to engage with our employees and provide them with services and support that makes their lives easier and more enjoyable.
User Flow
1) User opens the app
2) User enters the login page
- Unregistered user can register and create new account
- Registered user can log in
- Registered user can reset the password if forgotten.
3) User enters dashboard page
- User can provide feedback
- Users can swipe left and right to display more apps
- User can select an app that they wish to open
- The feedback button is displayed in the header and is visible on all pages.
4) User optionally accesses settings area
- Users can view profile and upload a photo (which will be used to visually identify user in other mini-apps as needed)
- Users can view their notification messages
- Users can log out
Design Consideration
- We want the design to be vibrant and use as many different colours from the corporate pallet as is allowed. However, there must not be a deviation from the allowed colours.
- It must follow the designs shown in the dashboard examples, keeping the same header on all pages.
- Easy to understand flow from page to page, users can go back and exit throughout.
- Simple, clean, modern.
Design Compatibility
- This is ultimately designed to be downloaded from an app store and is pencilled in to be a hybrid-app. Therefore the designs need to be designed as a mobile app (see target devices)
- Intuitive for the user, i.e. should never be left asking "what do I do next?"
- Simple, clean, modern.
- Each page is not overcrowded with information, (but it is obvious where to access more info)
Design Usability
- Simple; not too many steps involved in any part
- Easy; to understand the navigation from section to section
- Fast; and efficient experience
Target Devices
- iPhone: 750px x 1334px
Branding Guidelines
- Ask in Forum for Access to Branding Guidelines
- Modern Crisp look and feel adhering to our standards.
- Follow our Branding Guidelines Document for design style, font, and colours.
- While we have provided SDK components, we encourage you to design your own as much as possible.
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=621747���
Screen Requirements
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
1) Login Screen
- This screen should serve two functions:
- Directly show app branding
- User login
- User will need to enter their credentials to be able to log into the app (username/password)
- Provide error scenario if user enter the wrong credential
- Provide register screen so unregister user can register to the app
- Provide a 'forgot password' screen
2) Dashboard Screen
- Show list of all mini-apps that are available on the platform
- Main navigation where user can go to other section in the app (for ex, profile, setting, logout, etc)
- Swipe left/right to navigate pages and see more ‘mini app icons’
- Ability to view mini apps icon and title (Car share, lunch menu, meeting rooms, locations and 20 blank placeholder app icons which have the title "app5", "app6" etc,.. "app 24")
- [design consideration] There may be more or fewer apps created over time, the main app should look visually appealing if more apps were added or some were taken away.
- Needs to have feedback button, it should be displayed in the header and is visible on all pages.
3) Feedback Screen
- The user can provide feedback about the app. The user can give general feedback, features they would like to see or any of the mini apps. A drop-down selection allows a user which of those options they are feeding back on.
4) Mini App Screens
- In the real app, there will be a lot of mini apps available in the app.
- For this challenge, we just need to simulate 4 mini apps within the app, with 20 placeholder app icons/titles on the dashboard screen:
4.1) Car Share Mini App
- A user is taken to the car share landing page where they can register their interest in car sharing. They can select the following:
-- From location (postcode, street, town)
-- From office (select from list of offices)
-- To location (postcode, street, town)
-- To office (select from list of offices)
-- Person type (Driver, passenger)
-- Journey type (Regular, One-off)
-- Outward Date & time
-- Return Date & time
- User can choose to post an intended journey as a driver
- User can choose to post an intended journey as a passenger
- User can choose to search for matching posted journeys as a passenger
- [Design Consideration] There must be a visual differentiator between one-off and regular journeys
4.2) Lunch Menu Mini App
- A user is taken to the current day's lunch menu for the office their profile is set to
- A user can view the following lunch menu sections:
-- Soup
-- Baked Jacket Potato Bar
-- Main & Wrap Bar
-- Snack
-- Sides
- When in the menu screen the user can choose to change the day (suggested by swiping or something similar).
- When in the menu screen the user can choose to change the office location (suggested by selecting from a list of lists from a drop-down). (List of office locations is Fareham, Farnborough, Swindon, London)
- [Design Considerations] being able to quickly flick through the menu is the main priority
4.3) Meeting Rooms Mini App
- A user can search by location and the name of a meeting room (e.g B1.2) on the landing page
- A user searching by location only can see the floorplan of the relevant building, if there are multiple floors they are able to select any of the floors to view
- The system provides a list of possible rooms that match the search criteria
- The user can select a room and that room is highlighted on a building floor plan
- The user can enter their current location and be provided with a route to the final location.
4.4) Locations (aka. Locations and Parking) Mini App
- User can view A landing page showing all of the UK and office locations
- The user can click on an office location to select, the address and basic information is displayed.
- If on-site parking is available user is given the option to book a guest space
- If on-site parking is not available user is given a map with nearby parking
-- User can choose a parking or office location and is taken to default navigation guidance
5) Setting Screen
- User can view profile and upload a photo (which will be used to visually identify user in other mini-apps as needed)
- Users can view their notification messages
- Users can log out
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it within your notes/comment this link while you upload).
Documentation
- Please ask in forum for access to documentation
- Branding Guidelines Document, The design must be aligned with our guideline.
- SDK Kit, The design must be aligned with the SDK in terms of Style (font, icons, colours) & Layout.
- IMPORTANT!! We are looking for creativity here, use Branding and SDK as references about colours, font, but don’t let them limit your creativity. So, Creativity First, Branding and SDK Second!
Target Audience
- All UK employees across all departments (Internal Employees)
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- Overall design and user experience
- Cleanliness of screen design and user flow
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB colour 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.
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop/Illustrator/Sketch and saved as editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colours) or modify overall colours
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Round 1
Submit your initial design for a Checkpoint Feedback2) Dashboard Screen
4) Mini App Screens
4.1) Car Share Mini App
4.2) Lunch Menu Mini App
4.3) Meeting Rooms Mini App
4.4) Locations (aka. Locations and Parking) Mini App
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates1) Login Screen
2) Dashboard Screen
3) Feedback Screen
4) Mini App Screens
4.1) Car Share Mini App
4.2) Lunch Menu Mini App
4.3) Meeting Rooms Mini App
4.4) Locations (aka. Locations and Parking) Mini App
5) Setting Screen
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
We are one of the biggest insurance companies in the world. Digital transformation is not only changing expectations from our customers but also our employees. We are looking to create an employee app to act as a central hub for us to engage with them, give them the information they need and provide collaborative social tools.
The main focus of the app is to iteratively develop new features in 'mini-apps' within the landing page. These mini-apps resemble the normal apps found on any smartphone.
Challenge Goals
Create an intuitive app that able to serve as a central hub for many mini apps that will help us to engage with our employees and provide them with services and support that makes their lives easier and more enjoyable.
User Flow
1) User opens the app
2) User enters the login page
- Unregistered user can register and create new account
- Registered user can log in
- Registered user can reset the password if forgotten.
3) User enters dashboard page
- User can provide feedback
- Users can swipe left and right to display more apps
- User can select an app that they wish to open
- The feedback button is displayed in the header and is visible on all pages.
4) User optionally accesses settings area
- Users can view profile and upload a photo (which will be used to visually identify user in other mini-apps as needed)
- Users can view their notification messages
- Users can log out
Design Consideration
- We want the design to be vibrant and use as many different colours from the corporate pallet as is allowed. However, there must not be a deviation from the allowed colours.
- It must follow the designs shown in the dashboard examples, keeping the same header on all pages.
- Easy to understand flow from page to page, users can go back and exit throughout.
- Simple, clean, modern.
Design Compatibility
- This is ultimately designed to be downloaded from an app store and is pencilled in to be a hybrid-app. Therefore the designs need to be designed as a mobile app (see target devices)
- Intuitive for the user, i.e. should never be left asking "what do I do next?"
- Simple, clean, modern.
- Each page is not overcrowded with information, (but it is obvious where to access more info)
Design Usability
- Simple; not too many steps involved in any part
- Easy; to understand the navigation from section to section
- Fast; and efficient experience
Target Devices
- iPhone: 750px x 1334px
Branding Guidelines
- Ask in Forum for Access to Branding Guidelines
- Modern Crisp look and feel adhering to our standards.
- Follow our Branding Guidelines Document for design style, font, and colours.
- While we have provided SDK components, we encourage you to design your own as much as possible.
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=621747���
Screen Requirements
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
1) Login Screen
- This screen should serve two functions:
- Directly show app branding
- User login
- User will need to enter their credentials to be able to log into the app (username/password)
- Provide error scenario if user enter the wrong credential
- Provide register screen so unregister user can register to the app
- Provide a 'forgot password' screen
2) Dashboard Screen
- Show list of all mini-apps that are available on the platform
- Main navigation where user can go to other section in the app (for ex, profile, setting, logout, etc)
- Swipe left/right to navigate pages and see more ‘mini app icons’
- Ability to view mini apps icon and title (Car share, lunch menu, meeting rooms, locations and 20 blank placeholder app icons which have the title "app5", "app6" etc,.. "app 24")
- [design consideration] There may be more or fewer apps created over time, the main app should look visually appealing if more apps were added or some were taken away.
- Needs to have feedback button, it should be displayed in the header and is visible on all pages.
3) Feedback Screen
- The user can provide feedback about the app. The user can give general feedback, features they would like to see or any of the mini apps. A drop-down selection allows a user which of those options they are feeding back on.
4) Mini App Screens
- In the real app, there will be a lot of mini apps available in the app.
- For this challenge, we just need to simulate 4 mini apps within the app, with 20 placeholder app icons/titles on the dashboard screen:
4.1) Car Share Mini App
- A user is taken to the car share landing page where they can register their interest in car sharing. They can select the following:
-- From location (postcode, street, town)
-- From office (select from list of offices)
-- To location (postcode, street, town)
-- To office (select from list of offices)
-- Person type (Driver, passenger)
-- Journey type (Regular, One-off)
-- Outward Date & time
-- Return Date & time
- User can choose to post an intended journey as a driver
- User can choose to post an intended journey as a passenger
- User can choose to search for matching posted journeys as a passenger
- [Design Consideration] There must be a visual differentiator between one-off and regular journeys
4.2) Lunch Menu Mini App
- A user is taken to the current day's lunch menu for the office their profile is set to
- A user can view the following lunch menu sections:
-- Soup
-- Baked Jacket Potato Bar
-- Main & Wrap Bar
-- Snack
-- Sides
- When in the menu screen the user can choose to change the day (suggested by swiping or something similar).
- When in the menu screen the user can choose to change the office location (suggested by selecting from a list of lists from a drop-down). (List of office locations is Fareham, Farnborough, Swindon, London)
- [Design Considerations] being able to quickly flick through the menu is the main priority
4.3) Meeting Rooms Mini App
- A user can search by location and the name of a meeting room (e.g B1.2) on the landing page
- A user searching by location only can see the floorplan of the relevant building, if there are multiple floors they are able to select any of the floors to view
- The system provides a list of possible rooms that match the search criteria
- The user can select a room and that room is highlighted on a building floor plan
- The user can enter their current location and be provided with a route to the final location.
4.4) Locations (aka. Locations and Parking) Mini App
- User can view A landing page showing all of the UK and office locations
- The user can click on an office location to select, the address and basic information is displayed.
- If on-site parking is available user is given the option to book a guest space
- If on-site parking is not available user is given a map with nearby parking
-- User can choose a parking or office location and is taken to default navigation guidance
5) Setting Screen
- User can view profile and upload a photo (which will be used to visually identify user in other mini-apps as needed)
- Users can view their notification messages
- Users can log out
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it within your notes/comment this link while you upload).
Documentation
- Please ask in forum for access to documentation
- Branding Guidelines Document, The design must be aligned with our guideline.
- SDK Kit, The design must be aligned with the SDK in terms of Style (font, icons, colours) & Layout.
- IMPORTANT!! We are looking for creativity here, use Branding and SDK as references about colours, font, but don’t let them limit your creativity. So, Creativity First, Branding and SDK Second!
Target Audience
- All UK employees across all departments (Internal Employees)
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- Overall design and user experience
- Cleanliness of screen design and user flow
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB colour 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.
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop/Illustrator/Sketch and saved as editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colours) or modify overall colours
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.