Challenge Overview
Challenge Introduction
This is a prototype challenge to develop a web portal for the Total Mama iOS app in partnership with the Bill & Melinda Gates Foundation to track maternal and fetal health and growth during pregnancy.
Total Mama is a new digital health company started and incubated at the University of Oxford whose goal is to provide women with personalized, evidence-based health information on pregnancy and fertility.
The Bill & Melinda Gates Foundation Healthy Birth, Growth, and Development knowledge integration (HBGDki) intitiative seeks to develop data-driven strategies to accelerate the foundation’s ability to promote healthy birth, growth, and development, in the communities that need it most, by delivering the right interventions to the right child, at the right time, and at the right price.
Challenge Requirements
The main task of this challenge is to create an HTML/CSS Web Portal Prototype based on the provided Sketch design comps (showing colors and layout) and InvisionApp Demo (showing basic interactions and page flow). This is a responsive design solution that include a desktop size and mobile phone size. No tablet size is required.
This challenge is to create a subset of the functionality of the current iOS mobile application. This challenge is focused on the display of captured data and not the collection of the data via the website; that functionality will be handled in a subsequent challenge.
We are looking forward to your participation in this challenge!
Notes:
- All pages of the UI Prototype must support a responsive design solution (Desktop and mobile 480).
- All font data, colors, and layout dimensions are included in the Sketch file.
- Transitions for menu and tab switching should be smooth yet fast.
- Drop down menu is activated on click, not on hover
- After log in,the default page is “Desktop - Home/Maternal Timeline”
- Top Navigation (Desktop):
- Total Mama logo links to Desktop - Home/Maternal Timeline.
- ”Pregnancies” opens a drop down menu.
- ”Log Out” ends session and returns user to Desktop - Login/Splash.
- Center Navigation Tabs (Desktop)
- The center navigation tabs switch the content area below to display timelines or the gallery. The transition should be a slide from left to right each time a tab is clicked.
- “Mother” displays Desktop - Home/Maternal Timeline
- “Fetus” displays fetal timeline Desktop - Fetal Timeline
- “My Gallery” displays Desktop - Gallery
- Mobile Menu (Mobile):
- ”My Gallery” opens Mobile - Gallery
- ”Pregnancies” opens Mobile - Pregnancies
- ”Log Out” ends session and returns user to Mobile - Login
- Pregnancy Overview (top area of Desktop and Mobile)
- No interactive elements
- Trimester progress bar should increment based on a supplied number rather than a percentage. A number will be supplied that will determine the length of the bar. The bar can be CSS - no need for JS since it will not change while being viewed.
UI Prototype Artboard List and Requirements:
--Desktop--
1). Desktop - Login/Splash
- Email address and password are validated on submit.
- ”Remember Me” should be unchecked by default.
- ”Forgot Password” opens a modal with a single field - email address, and a single button - “send reset instructions”.
- ”Terms of use” and “Data Sharing agreement” links open text docs in a modal.
2). Desktop - Home/Maternal Timeline
Content Area - No interactive elements
- Timeline
- Graphs
- Graphs will be built using Apple’s ResearchKit. Please use a standard graphing library that will provide similar results.
4). Desktop - Fetal Timeline
Content Area - No interactive elements
- Timeline
- Graphs
- Graphs will be built using Apple’s ResearchKit. Please use a standard graphing library that will provide similar results.
5). Desktop - Gallery
Content Area
- Images of Mother’s bellies and Fetuses should use a lightbox gallery function (JS).
- When an image is clicked, it should launch the lightbox modal. This should include scrolling arrows and a close icon. Please do not auto scroll the images.
- Images should be scaled to support retina displays.
6). Desktop - Pregnancies
- If there are archived pregnancies this menu item will be available.
- The menu transition should be a smooth, fast slide. Activated on click, not on hover.
- The current/active pregnancy is positioned at the top of the list.
- If a pregnancy is selected, its maternal timeline will be displayed (Desktop - Home/Maternal Timeline)
--Mobile--
7). Mobile - Login
- Email address and password are validated on submit.
- ”Remember Me” should be unchecked by default.
- ”Forgot Password” opens a modal with a single field - email address, and a single button - “send reset instructions”.
- ”Terms of use” and “Data Sharing agreement” links open text docs in a modal.
8). Mobile - Home/Maternal Timeline
Content Area - No interactive elements
- Timeline
- Graphs
- Graphs will be built using Apple’s ResearchKit. Please use a standard graphing library that will provide similar results.
9). Mobile - Fetal Timeline
Content Area - No interactive elements
- Timeline
- Graphs
- Graphs will be built using Apple’s ResearchKit. Please use a standard graphing library that will provide similar results.
10). Mobile - Gallery
Tabs
- Mother - displays mother images by default
- Fetus - displays fetal images when tab is selected. The transition should be a slide from left to right when tab is clicked.
- Images of Mother’s bellies and Fetuses should use a lightbox gallery function (JS).
- When an image is clicked, it should launch the lightbox modal. This should include scrolling arrows and a close icon. Please do not auto scroll the images.
- Images should be scaled to support retina displays.
11). Mobile - Pregnancies
- The current/active pregnancy is positioned at the top of the list.
- If a pregnancy is selected, its maternal timeline will be displayed (Mobile - Home/Maternal Timeline)
12). Mobile - Menu
- Hamburger menu that is present on all pages.
- Click to expand, click to close or swipe left to close.
- Menu items
- My Gallery (Mobile - Gallery )
- Pregnancies (Mobile - Pregnancies )
- If there are archived pregnancies the “pregnancies” menu item will be available.
- Log Out
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code that displays and functions correctly in all the requested browsers.
- All elements should be consistent: pay attention to padding, margin, line-height, etc. Refer to Sketch file.
- Matching the designs (as closely as possible) across the required browsers.
=============================================================================
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camelback naming to separate multiple-word classes (i.e. "main-content", or "MainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS3
- Use CSS3 Media Queries to load different styles for each responsive page. Please don't build different pages for different device layouts.
- Provide comments in the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts, especially with jQuery.
- Please use CSS3 styles when creating shapes.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Javascript
- All JavaScript must not have a copyright by a third party.
- You are encouraged to use your own scripts, or scripts that are free and publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Images
- Images should be properly compressed while still having good visual quality.
- Please use sprites when submitting icons as images, and common icon fonts like Font-Awesome when possible.
- Make sure your submissions are compatible for both Retina and Standard devices
Browsers Requirements
- IE11 (desktop)
- Chrome Latest Browser (desktop & mobile)
- Safari Latest Browser (desktop & mobile)
- Firefox Latest Browser (desktop & mobile)
Design Resources
-- Web portal design comps - Sketch
-- Flow demo - InvisionApp
SETUP
-- See the challenge forums for details on adding yourself to the Total-Mama GitLab group
-- Fork the Web repository and use the tc_1 branch for the basis of development
-- Add harrywynn as a member of your forked repository with Reporter access
-- All necessary designs and source files can be found in the Resources repository
Final Submission Guidelines
- All pages of the UI prototype developed according to the provided design as described above
- Any standard Topcoder documentation for a web UI prototype challenge
- All source code from your project uploaded as a zip