Challenge Objectives

• Target environment: iPhone

• Basic Requirements: Use Xamarin to develop a prototype app according to the given design

 

Technology Stack

Xamarin - The app must be developed by Xamarin

C# - The programming language of Xamarin.

Individual requirements

 

Follow the design to develop the app, here are the design resources:

• Marvel App: https://marvelapp.com/969i5j0

• Design assets (Adobe XD project): https://drive.google.com/file/d/18nVWx1AVzt9L7AR66xPH18cpJNHa2Alj/view?usp=sharing

 

Please open the Adobe XD project, all the screens are required. The user interactive workflow should follow the Marvel App.

 

1. Dashboard

1.1 01_Dashboard

• Carbon Footprint, Cost of Meeting and Travel Time are three properties of a meeting.

• Click each property item will navigate to 02_Dashboard

1.2 02_Dashboard

• “CO2 Footprint”, “Cost of Meeting”, “Travel Time” are three clickable items, select one item will deselect others.

• When “CO2 Footprint” is selected, the title of the chart should be “Amount saved each meeting”, the unit of the y-axis should be “KgCO2”.

• When “Cost of Meeting” is selected, the title of the chart should be “Cost of each meeting”, the unit of the y-axis should be “pounds”.

• When “Travel Time” is selected, the title of the chart should be “Travel time of each meeting”, the unit of the y-axis should be “Hours”.

• The chart data are mock, the data of different items should be different so that we can view the data change while switching between different items. You can mock the data, as long as the chart looks good.

• The AVG value should be calculated according to your mock data.

1.3 03_1_Dashboard, 03_2_Dashboard

• “Total Efficiency Rating” is a drop-down list, clicking it will yield the view of 03_2_Dashboard.

• The items shown below should be in a list view, which is vertically scrollable. You can mock the data yourself.

• By default, only 5 items are shown, after clicking “Show more”, more items are loaded and then items are vertically scrollable. Note the drop-down list should be fixed at its position while scrolling the items.

• The item data of different drop-down list options should be different so that we can view the data change while switching between different options.

 

Note:

• We can swipe screen left and right to switch among 01_Dashboard, 02_Dashboard, and 03_1_Dashboard

• When the app launches, it should navigate to 01_Dashboard.

 

2. Meeting

2.1 04_meeting

• By clicking the “My Meetings” in the bottom navigator, the app should navigate to this screen.

• “Upcoming”, “RSVP”, “Past” are three clickable items, select one item will deselect others.

• You can mock the data of the meeting items shown below, we should view the data change of meeting items while switching between different clickable items.

• The items should be vertically scrollable.

 

2.2 05_create_meeting, 06_create_meeting, 10_create_meeting, 12_create_meeting

• By clicking the “+” button in the bottom navigator, the app should navigate to this screen.

• The edit fields should follow the design.

• Click “Files”, the app should open the file picker.

• Click “Invitees”, the app should navigate to 07_who

• Click “Location”, the app should navigate to 11_location

• The items should be vertically scrollable.

• The “online” is turned off by default.

• If all fields in “What”, “When”, “Who”, “Where” are filled correctly, the “Analyze” button is enabled, otherwise, it’s disabled. Note the “online” is not required for enabling the “Analyze” button.

• Click “Analyze”, the app should navigate to 13_Analysis.

 

2.3 07_who, 08_who, 09_who

• “My Contact”, “Group”, “Invite by Email” are three clickable items, select one item will deselect others. By default, “My Contact” should be selected.

• Click “My Contact”, the screen switches to 07_who.

• Click “Group”, the screen switches to 08_who.

• Click “Invite by Email”, the screen switches to 09_who.

• The items shown below should be in a list view, which is vertically scrollable. You can mock the data yourself.

• The “search” bar should not scroll with the items.

• The “search” should be able to filter the items below, by matching the input text with the name of items.

• The speech to text functionality is in scope, you can use this plugin, you can also find another way to implement it.

• In 09_who, click “More Emails”, one “Email Address” field is added.

• You should validate the email address, if the email address is invalid, mark red of the text field.

• The number of selected items should be either the number of selected “My Contact” items, or the number of selected “Group” items, or the number of filled “Email Address” fields.

• Click “Done”, the app navigates back to the create meeting screen (10_create_meeting), the value of “Invitees” is the number of selected items.

• Click “Cancel”, the app navigates back to the create meeting screen, the value of “Invitees” is not changed.

 

2.4 11_location

• The items shown below should be in a list view, which is vertically scrollable. You can mock the data yourself.

• The “search” bar should not scroll with the items.

• The “search” should be able to filter the items below, by matching the input text with the name of items.

• The speech to text functionality is in scope, you can use this plugin, you can also find another way to implement it.

• Click each item, the app navigates back to the create meeting screen (12_create_meeting), the value of “Location” is the number of selected items.

• Click “Cancel”, the app navigates back to the create meeting screen, the value of “Invitees” is not changed.

 

3. Analysis

3.1 13_Analysis, 15_Analysis, 16_Analysis, 17_Analysis

• The “Carbon Footprint”, “Cost”, “Travel Time” items

  • they should be clickable, click each one, the app should navigate to 14_info.

  • You can mock the data of these items.

  • The threshold of these items are

    • VERY POOR:  value <= 20%

    • POOR: 20% <= value < 40%

    • OKAY: 40% <= value < 60%

    • GOOD: 60% < value <= 80%

    • VERY GOOD: 80% < value

  • The color should match the design

  • The threshold should be configurable.

• Summary section

  • You can mock the data.

  • Click this item, the app should navigate to 15_Analysis, the value of “Carbon Footprint”, “Cost”, “Travel Time” items should be changed, this section should be changed to “Suggestion”. The “Submit” button should be changed to “Apply Suggestion & Submit”.

  • The “Suggestion” sections contain 3 portions, by clicking it, the app navigates to 16_Analysis, 17_Analysis respectively. The value of Carbon Footprint”, “Cost”, “Travel Time” items are changed accordingly.

• “Submit” or “Apply Suggestion & Submit”, click it then the app navigates back to 04_meeting.

• Click “Back”, the app navigates back to the previous screen.

3.2 14_Info

• You can mock the value and the text.

• The threshold should be the same as mentioned in 3.1.

• Click “Close”, the app navigates back to the previous screen.

 

4. Reports

 

4.1 18_reports

• The items should be vertically scrollable.

• You can mock the data of this screen.

• There are three charts, in each chart, “Week”, “Month” are two clickable items, select one item will deselect others. By default, “Week” should be selected.

• The data for “Week” and “Month” should be different, so we can view the data change while switching between different items.

• There are several report items followed by charts, the number of these items are not fixed. Click each report item, the app should navigate to 19_reports.

 

4.2 19_reports

• The items should be vertically scrollable.

• The title should be matched with the name of the reported item that is navigated from.

• The number of report items is not fixed. You can mock the data.

• Click “Back”, the app should navigate back to the previous screen.

• The “Download” button is a dummy.

 

5. Settings

5.1 20_Settings

• You can mock the data of this screen.

• Click “Notifications”, the app should navigate to 21_Notifications

• Other buttons are the dummy.

 

6. Notifications

6.1 21_Notifications

• You can mock the data of this screen.

• The items should be vertically scrollable.

• Click “Back”, the app should navigate back to the previous screen.

 

In other screens, by clicking the ring bell icon on the top-right side, the app should navigate to 21_Notifications.

 

Important Notes

The app is only required to target on iOS (iPhone). Android is not in scope.

All the mock data should be put in separate files, you shouldn’t hardcode these data in the UI code. You should reuse data among different screens as much as possible.

The screen transition animation should follow the given marvel app.

For screens with vertical scrollable features, you should follow the design of the Marvel app.

There are too many details in this challenge, feel free to ask any questions in the forum early if you feel anything is unclear.

The review phase is extend to 4 days as per the client’s request.

Final Submission Guidelines

What To Submit

- Your Xamarin source code of this prototype app.

- The README.md that includes the steps of how to deploy and run your Xamarin project, how to build an iOS app.

- A video to demonstrate your app.