Challenge Summary
Welcome to Living Progress - MoBy Maternal Health - Mobile App Design Challenge!
This project aims at creating a mobile application that helps improve the maternal and neonatal health service delivery and health outcomes.
We have provided wireframes for content references, please do not copy them!
Also please don’t just color the wireframes, we are looking for you to improve the overall layout, interaction and user experience of the this application.
Good luck and we look forward to your design!
Round 1
Submit your initial designs for Checkpoint Feedback- Please submit all screens for the portrait view
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required designs with all Checkpoint Feedback implemented.- Please submit all screens for the portrait and landscape view
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The Purpose of this challenge is to come up with the the look & feel and flow for this web application. We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).
This mobile application will consists of private chat groups and group educational messaging anchored to health facilities and systems providing antenatal, delivery, and postnatal care.
About this Application:
“Social networks in maternal health” app is designed to improve outcomes, quality of care, and satisfaction through linking the power of social networking to maternal health systems. Similar to the concept of group antenatal care, we aim for this application to enable women to build social support in pregnancy and postpartum. Upon initiation of ANC, women will have the option to join private mobile chat-groups of up to 10 women with a similar gestational age of pregnancy. The groups will not be time-bound, so group interaction can continue through postpartum and early parenting, when social support could be critical for breastfeeding, newborn care, and postpartum mood changes. The chat groups will be integrated with an automated messaging platform that sends key informational messages and general reminders to the group. This app will have a more powerful impact on patient education and behavior. We hope to add and test an innovative feature to educational text messaging to make it more patient-centered: using behavioral targeting tools (normally used for consumer advertising) to send targeted educational health messaging to groups. For example, if a virtual chat group mentions “folic acid” for the first time in their conversation, a standard message on use of folic acid in pregnancy is sent to the group.
Design Ideas:
- Looking for modern, intuitive user interface
- Focus on the design being a great user experience, think simple but effective solutions!
- Come up with designs that shows out-of-the-box solutions.
- 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
- Please make sure your capture every details in the wireframe.
- Feel free to use the logo that was supplied.
- Branding: You may follow the colors used in logo but we are open to your ideas.
Design Size:
- We are focussing on android mobiles, have your designs of size 1080 x 1920px (portrait) and 1920 x 1080px (Landscape)
Required Screens:
We need below screens to be designed..
00 Navigation:
- Looking for your thoughts on how the navigation need to be laid out.
- A user will be able to see the navigation once they complete the registration (note: registration is a one time process).
Primary Navigation will include:
- My Group
- Health Center
- Group Members
- Chalkboard
- Settings
- Anything else?
01 Registration:
- Once a woman establishes care at a maternal health clinic, they receive a message to download the app along with a validation code.
- First thing after downloading the app, they enter the validation code in app.
- Once validation code is confirmed, we display the terms of privacy agreement for them to accept (NOTE: Until they accept the terms, they won’t be able to move to next step).
- Show us how the error message will look like if the user enters wrong validation code
- On accepting terms, show a welcome message and they will see a form to select their due date and select their health facility (this is automatically chosen based on the verification code that was entered), show us how the users chooses the date.
- After completing above steps, they will automatically join view the virtual support groups!
- They will have the ability to change the Health Center by clicking on the “change Healthcenter link”, this will again show the screen that will allow them to enter verification code and followed by acceptance of terms and options to select due date / health center.
02 Virtual Support Groups:
Landing Screen
- This screen should have a permanent place for the virtual support group and chat with Admin.
- It should also show the list of recent chat’s with the member in their virtual support group
- These Virtual Support groups are limited to only 10 per group and a user can be part of only one virtual group as shown in the wireframe.
- We need the whatsapp icon in some place on the screen.
- How can we indicate that they have unread or new messages in the conversation?
Chat with Admin / Group Chat / Individual Chat with Member:
- Looking forward to you design thoughts on how these screen’s need to be designed
- Think about how the user will navigate between all these chat’s
- To initiate a member search, users will go to “Group Members” and select the user they want to chat with...looking for your thoughts on how to make this page intuitive, in the wireframe it looks messy!
- It’s good to show an icon for a member chat that indicates their conversation is secured and private.
- We have attached the list of the messages that will be sent during their prenatal and postnatal period (There is a tab for messages to be sent by the “health center” (admin) to the individual based on EDD and a tab with messages to be sent by the “health center” to the group chats) Feel free to use these messages as required in your designs).
03 Health Center:
We would like to split information into 3 parts “My Given Support, My Questions and Calendar”, looking for your thoughts on best to organize these parts - currently in the wireframes these are displayed as tabs but do you have a better approach?
My Given Support:
- This shows some automated messages that were received from the health center
- How do we indicate or show the level of importance on a particular message (icons?)
My Questions:
- This should allow the user to ask questions and get answers from the health center admin.
- Do you think this should be different UI from that of the virtual group chats/member chat?
My Calendar:
- Include a basic “calendar” where women can enter/track their appointments and get notification of these events.
04 Group Members:
- This screen should show the list of members available in the group.
- Note: The group will have only 10 members, plan on how it can be shown intuitively.
- How will the user initiate a chat conversation with another member?
- How can we indicate that they have unread or new messages in the conversation?
05 Chalkboard:
This screen will allow them to access health information that is specific to the facility, like
- - - Facility information (i.e. emergency contact numbers)
- - - Links to brochures relating to patient educational material (i.e. family planning options, Care after Caesarean Section, etc)
- - - FAQ’s (Frequently asked questions) and
- - - Feedback (this will have links to satisfaction surveys about the health center and other health surveys)
- Provide an option to search..this will be really help when a user tries to search for information on a particular health issue!
- Looking forward to your thoughts on how the information in wireframe can be better displayed!
NOTE:
- Clicking on an item under FAQ takes the user to specific FAQ, think on how this can be shown?
06 Settings:
- Currently in the wireframes settings is accessible from clicking on "Group Members (navigation) > Settings icon in top left"...do you think this is the right way to show settings (its kind of hiddent)
- This screen should allow the user to edit the group name!
- Should have the ability to edit username and user photo!
- Please change the text "newborn settings" to "settings" and add a new section below that with title "newborn settings" and it should just include/allow them to choose the newborn "date of birth, also remove the icon that shown in the top-right to add this newborn information (which is not required as we have added it in this main settings page itself!)
- They should be able to manage the notifications (allow or disallow).
- There should be a settings that includes options for show group notifications, show health center notifications, as well as data usage options (high data usage may not be feasible for Kenyans so there should be options for images, audio, videos, documents to be accessed through Wi-Fi or cellular, looking for your UI thoughts!
- Should be able to leave the group, clicking on this will show ask for a confirmation whether they really want to leave the app...how do you think this confirmation need to be shown?
07 Style Tile:
- We would like you to create a style tile that will help developers.
- This Style Tile need to have the below at a minimum but feel free to add anything that would help developers
- Explore these references to learn more about style tiles: Reference 1, Reference 2
Links / Buttons Colors:
- Button colors (normal / hover states)
- Link colors (normal / hover states)
Typography:
We would like you to identify and define the list of fonts and the specific color, font size used:
- Headers
- Sub-headers.
- Paragraphs.
- etc.
Target Audience:
- Women undergoing ANC (antenatal care) at maternal health care facility!
Judging Criteria:
- Is the design styled to be appealing and desirable?
- Is the design visually resolved and does it evoke an emotional connection with the user?
- Does the design convey the function and use unambiguously and intuitively
- Does it clearly convey what the app is supposed to let you achieve / what problem it is designed to solve.
- Is the design easy to use and understand?
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 may 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.