Challenge Summary
For this challenge we need you to create concepts design for DigitalEveryWhere Mobile Application by following Material Design style. You need design all required pages based on requirements explained below for Mobile screen sizes.
Read more details information on challenge specification. Let’s discuss any questions you have!
Round 1
Initial DigitalEveryWhere Conference Room Booking Mobile Application for these following screens on Mobile screen size1). Login
2). Map View
3). Conference Room Details
4). Timeslots
5). Book Conference
Note: Feel free to add more screens for early feedback
Round 2
Final DigitalEveryWhere Conference Room Booking Mobile Application for these following features combined with Checkpoint Feedback on Mobile screen sizes1). Login
2). Map View
3). Conference Room Details
4). Timeslots
5). Book Conference
6). Cancel Booking
7). Room availability Room duration
8). My Booking
Submission Requirements General
- Winning design will be developed as Native App on IOS and Android
- Before you start designing, get familiar with Material Design
- You can use some Google Material Design UI for Sketch, refer to this url: https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bzhp5Z4wHba3U1JmRzdsNlo5NTQ/stickersheet-components-20170314.sketch
- Grab template for Mobile here: https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bzhp5Z4wHba3M2k1T0hEY1ZDVWs/whiteframes.sketch
- Let us know if need more clarification about this!
Mobile App Flow
Our Client wants to develop iOS and Android mobile app to enable DigitalEveryWhere employees to book a meeting room. Please check the flow below:
- Start
- Employee launches Meeting-Room mobile App (Native)
- Can see the booked room
- Can cancel the booked room
- Can see the information regarding a conference room
- Enters the time and duration or select predefined slots for 30/60/90 minutes
- Display available meeting rooms nearby the user location
- Employee selects the available room and book it
- Post booking the room, s/he gets notification for the confirmation
- If not available, change the time/duration and retry
- End
Functional Requirements
1). Login
- This is login page need display Username, password fields
2). Map View
- You need create map view for the nearby or favorite location
- Need able to display favorite location / building details
- Create some sample dummy data for Location / building details
- Maybe create the List view of nearby or favorite location?
- The conference rooms availability should be sorted in the order of the nearest favorite location or user selected location proximities
3). Conference Room Details
- Display of the conference room details within the selected location
- Create some sample dummy data for Conference Room
- Think about how if there are more than 1 conference room on a single location / building
- Display these detail information: location, seating capacity, resources available - white board, projector, printer, board number of the conference room etc
- Also the physical image if available
4). Timeslots
- Display of the timeslots details of the selected Conference room
- Create some dummy data for Timeslots
- The time zone for booking should be considered local to the use of the mobile app
5). Book Conference
- Book the conference provide the necessary details and confirm the booking request
- Required fields area: time, date, duration, booked by, location of the Meeting Room
6). Cancel Booking
- Option to view the booked conference room by the user along with the option to Cancel the booked Meeting Room
7). Room availability Room duration
- We need display this Room Availability when user view the Conference Room
- 30 minutes, 60 minutes, 90 minutes filters for the meeting room availability option should be there beside the option to enter the time, date and duration by user to see the available rooms for booking
8) My Booking
- Option to see the booked rooms with date, time, duration and location
- Need set Start and End time
- Ability to Extend
- Ability to Cancel Booking
- Need notification 10 minutes ahead of meeting
Design Submission Formats:
a). Screen Sizes: - Mobile Screen Size(Retina): 750px(w) × 1533px(h) up to your design
b). Design theme, colors, typography.
- Design Theme: Up to Designer
- Color palette: Up to Designer
- Fonts: Consistent with Material Design
c). Submission Design Presentation
- As part of your submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- If you need an MarvelApp Project, send email OR via challenge forum to this following email address: lunarkid@copilots.topcoder.com
- Important! Make sure to include a URL/Link to your MarvelApp within your submission notes
d). Winner Task
- 1st Place winner will be responsible to create MarvelApp Handoff to provide all design assets to our designer: https://help.marvelapp.com/hc/en-us/articles/115004519369-Get-started-with-Handoff
Target User
- Internal Employee
Judging Criteria
- How well you create DigitalEveryWhere Conference Room Booking Application !
- Consistency with Material Design styling - Cleanliness of your graphics and design.
- User Experience.
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. - MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in Adobe Photoshop or 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 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.