Challenge Summary
Welcome to "MyDiary - Personal Insight App Design Concepts Challenge". In this challenge, we are looking for Topcoder community help to create design concept ideas for our MyDiary application. The idea is to create an application that addresses the market of people with electronic diaries that are interested in knowing themselves better.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Looking forward to your design solution!
01) Landing Page Screen
03) Relationship Status Screen/Analysis Example Screen
04) Dashboard Screen
05) First insight screen: mood of entries
- Provide a Marvel App presentation of your design to help us understand your design concept.
- Request a Marvel App prototype/project from copilot fajar.mln (via forum or email)
- Make sure all pages have correct flow. Use correct file numbering. (00, 01, 02, 03)
01) Landing Page Screen
02) Login Screen
03) Relationship status Screen/Analysis Example Screen
04) Dashboard Screen
05) First insight screen: mood of entries
06) Personalised mood insights: Mood analysis on their own diary data
- Provide a Marvel App presentation of your design to help us understand your design concepts (replace your checkpoint images).
- Make sure all pages have correct flow. Use correct file numbering. (00, 01, 02, 03)
Background Overview
"MyDiary" application will run on all Desktop (all OS). This App addresses the market of people with electronic diaries. People will use the app to access personalized insights based on their diary entries. Using this app, our users will understand more about themselves - for example, the way their mood fluctuates in relation to the topics they write about - based on what they write in their diaries. Our language analytics will process their entries, generate data points that will yield insights about them, and our app will help them navigate through and understand these insights.
Challenge Goals
Create an app that provides analytic tools for the user so they can understand about themselves.
The key features of this app include:
- User login with Google/Facebook/Twitter
- Take a simple set of numbers that summarize insights from diary entries - Actual analysis of diary entries will be done by a separate piece of code
- Animated/dynamic explanations of how the insights were formed
- Dynamic insight displays (visualizations)
- Ability to customize the way insights are grouped (e.g. different time periods, different groups of entries) - access via a user profile and at certain points on insight pages
- Ability to compare how statistics for insights have changed over time (i.e. next time they log in, they can compare to previous pull)
Description of the application's features
- Each diary entry has some metadata: the title picks up a geo-location and timestamp. Users assign at least one tag to each entry (up to 30 possible tags) - this is a user-defined label, e.g. #school, #professional, #friends.
- We have language software that has looked at all the diary entries. The software has produced telling personal insights about each entry, such as the "mood" of each entry.
- The self-insights come in several flavors, for example:
-- Comparing between tags or groups of tags: The X (e.g. mood) of your entries tagged #A, #B and #C compared to the mood of entries tagged #D, #E, and #F.
-- Comparing over time: Between these periods entries are of this X (mood...)
- We will display simple statistics (such as length or mood of entry) by groups.
- We will also have pages that walk people through what the different X statistics mean
User Flow
- User opens the landing page
- User logs into the app
- User experiences the "Relationship status" insight
- User opens dashboard (where user can choose amongst the insights to view and can grouping the diary entries that they want to use to aggregate insights (customize the tag, tag group, timeline, etc))
- Insight screen 1 (mood of entries - explanation)
- Insight screen 2 (mood analysis)
- User returns to Dashboard
Target Devices
- Desktop, Minimum 1280px width with height adjusted accordingly
Branding Guidelines
- Follow our MoodBoard Doc for design style, font, and colors.
- Professional, clean, easy to read and look at
- https://projects.invisionapp.com/boards/P53EEN8ZY4T93/
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=616959
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.
01) Landing Page Screen
- Provide basic information page about what MyDiary is and the services that we provide, while also giving a link to the Login Page
- Consider this screen as marketing agent/material for our potential users
- It needs to be attractive, clear, informative, and raise potential user curiosity about our services
- Use "MarketingcopyforMyDiary.pdf" as content for this page
02) Login Screen
- User needs to log in first before they can use the app.
- Two ways to log in: standard form login and social media login.
- Encourage the user to register or login via social media.
- Provide simple steps for the user to log in via social media account.
03) Relationship Status Screen/Analysis Example Screen
- The goal of this screen is to show users that our language software is correctly analyzing their data entries by showing them that we can identify the user's relationship status based on their entries.
- Show some text "Your diary entries have a lot of interesting data! Our software can analyze your entries and find out all kinds of interesting things. Let's start with your relationship status. You haven't told us if you're in a relationship or not, but let's take a look at your entries and see if we can work it out."
- Show visualization, something like y-axis: relationship-related words; x-axis: dates; emphasize the likely relationship status, then show text "Based on our analytics, it looks like you might be in a relationship - is that right?"
- The user selects either "Spot on!" or "Close but not quite" or "Way off":
-- "Spot on!" - show text: "See, your entries can tell us a lot! Let's see what else we can learn", click and go to "04) Dashboard Screen"
-- "Close but not quite" - show text: "Oh, not quite right? Wonder where we slipped up - can you tell us your relationship status so we can learn and improve?" Ask to select relationship status, include an option "I'd rather not say", then show text: "Thanks for that! We'll check what's happening behind the scenes. In the meantime, let's see what else we can learn", click and go to "04) Dashboard Screen"
-- "Way off" - show text: "Hmm, we'll check what’s happening behind the scenes. In the meantime, let's see what else we can learn", click and go to "04) Dashboard Screen"
04) Dashboard Screen
- The user can choose amongst the insights to view and can grouping the diary entries in order to generate aggregated insights (customize the tag, tag group, timeline, etc)
- This screen should show (using icons and super short descriptions) the insights available in the app. These will include simple statistics, such as:
-- Average text length of diary entry
-- Average number of diary entries in a month
-- Diary entry distribution by day of week (i.e., Mon vs Tues vs ..)
- This screen will also show (using icons and super short descriptions) insights such as:
-- Mood of entries, this option should be highlighted for first-time users, with a message saying "start here"
-- Birthday Insight - Making a prediction of the user's birthday date
-- Closest Friend - Making a prediction about who your closest friend is
-- Relationship Status - Making a prediction about whether the user is in a relationship
- When users hover over an insight, the screen should show an explanation of the insight. Several examples of insights would be:
- Sample of diary content can be found in "Samplediaryentries.pdf" docs
- FYI, the app will create insights using the following methods:
-- The diary entries created by the users (prior to signing up to this app) are text
-- When users sign up to our app and grant us access to read their diary entries, our code analyses the text in the diary
-- Then there is a bunch of data sitting there ready to show to the user. There are some ways in which the user can modify how this data is grouped
-- That is the way that the user can "generate" insights. E.g. if they choose to group certain tags together, the mood score for that group of entries will be aggregated
---- For example, if users group together all entries tagged "work" versus all entries tagged "friends" and then viewed mood statistics, they could see whether their mood is, on average, more positive or less positive when they're writing about their friends versus when they're writing about work. This kind of comparison will help give users insight into themselves and their emotions.
- There should be a user profile button where users can modify/change the way diary entries are grouped for the analysis. There should be two ways to group data, users can pick between either:
-- Grouping by tags:
---- Default will be top 5 most used tags (tags 1-5) vs next 5 most used tags (tags 6-10)
---- Users should be able to choose their own tag groupings, from the (max 30) tags they have previously generated
-- Time periods: give users the option to compare diary entries from certain periods. Offer suggestions:
---- This month vs last month; or
---- This year vs last year; or
---- User picks a point in time and say compare all before vs. all after; or
---- User selects a date range for Time Period 1 (TP1) and a date range for Time Period 2 (TP2). TP1 and TP2 should not overlap.
05) First insight screen: mood of entries
- This screen will introduce the concept of mood (before showing personalized insights relating to mood).
- Intro to mood:
-- Show a sample diary entry
-- Simulate code analyzing the entry by highlighting/circling/emphasizing certain words that are predictive of mood
-- Make the mood score for that entry appear
-- Slot that score into a distribution over time of mood
- Essentially mood will be a score on a sentiment scale from 100% positive/happy on one end to 100% negative/sad on the other end. We have written code that completes sentiment analysis: that is, it analyses the text for entry and gives the entry a score on that sentiment scale.
- The mood of an entry - that's a score on the scale. The insight aggregates various combinations of those scores to show insights about how the user’s mood differs, for example, if the user groups all the #work entries and compares the mood against all the #personal entries, the scores we would want to show in some kind of visualisation would be the aggregate mood score for all the #work entries versus the aggregate mood score for the #personal entries.
06) Personalised mood insights: Mood analysis on their own diary data
- Once the users have been shown the explanation of the mood score concept, they will be able to navigate to this screen.
- Briefly, run some kind of animation to simulate their data being analyzed by code (a kind of "work in progress" visual)
- Show a visualization of their mood over time as a distribution
-- Allow users to click on a data point to expand the info available: exact score, date of entry, title
- Visualisation should now change to show distribution sorted by:
-- Tag group 1 vs Tag group 2
-- TP1 vs TP2
- The mood insight - the user will be shown whether their mood is different (more positive or more negative) when they write entries about, for example, #work compared to when they write entries about #personal topics.
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 (Copilot email)
- 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
- Moodboard for Design References
- Sample for Diary Content (Samplediaryentries.pdf) and Marketing material for landing page (MarketingcopyforMyDiary.pdf)
Target Audience
- General Society
- Interested in learning about themselves, they're introspective, curious.
- They're probably early 20's to 50's, professionals, educated.
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 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 colors) or modify overall colors.a
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Looking forward to your design solution!
Round 1
Submit your initial design for a checkpoint feedback01) Landing Page Screen
03) Relationship Status Screen/Analysis Example Screen
04) Dashboard Screen
05) First insight screen: mood of entries
- Provide a Marvel App presentation of your design to help us understand your design concept.
- Request a Marvel App prototype/project from copilot fajar.mln (via forum or email)
- Make sure all pages have correct flow. Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final design plus checkpoint feedback01) Landing Page Screen
02) Login Screen
03) Relationship status Screen/Analysis Example Screen
04) Dashboard Screen
05) First insight screen: mood of entries
06) Personalised mood insights: Mood analysis on their own diary data
- Provide a Marvel App presentation of your design to help us understand your design concepts (replace your checkpoint images).
- Make sure all pages have correct flow. Use correct file numbering. (00, 01, 02, 03)
Background Overview
"MyDiary" application will run on all Desktop (all OS). This App addresses the market of people with electronic diaries. People will use the app to access personalized insights based on their diary entries. Using this app, our users will understand more about themselves - for example, the way their mood fluctuates in relation to the topics they write about - based on what they write in their diaries. Our language analytics will process their entries, generate data points that will yield insights about them, and our app will help them navigate through and understand these insights.
Challenge Goals
Create an app that provides analytic tools for the user so they can understand about themselves.
The key features of this app include:
- User login with Google/Facebook/Twitter
- Take a simple set of numbers that summarize insights from diary entries - Actual analysis of diary entries will be done by a separate piece of code
- Animated/dynamic explanations of how the insights were formed
- Dynamic insight displays (visualizations)
- Ability to customize the way insights are grouped (e.g. different time periods, different groups of entries) - access via a user profile and at certain points on insight pages
- Ability to compare how statistics for insights have changed over time (i.e. next time they log in, they can compare to previous pull)
Description of the application's features
- Each diary entry has some metadata: the title picks up a geo-location and timestamp. Users assign at least one tag to each entry (up to 30 possible tags) - this is a user-defined label, e.g. #school, #professional, #friends.
- We have language software that has looked at all the diary entries. The software has produced telling personal insights about each entry, such as the "mood" of each entry.
- The self-insights come in several flavors, for example:
-- Comparing between tags or groups of tags: The X (e.g. mood) of your entries tagged #A, #B and #C compared to the mood of entries tagged #D, #E, and #F.
-- Comparing over time: Between these periods entries are of this X (mood...)
- We will display simple statistics (such as length or mood of entry) by groups.
- We will also have pages that walk people through what the different X statistics mean
User Flow
- User opens the landing page
- User logs into the app
- User experiences the "Relationship status" insight
- User opens dashboard (where user can choose amongst the insights to view and can grouping the diary entries that they want to use to aggregate insights (customize the tag, tag group, timeline, etc))
- Insight screen 1 (mood of entries - explanation)
- Insight screen 2 (mood analysis)
- User returns to Dashboard
Target Devices
- Desktop, Minimum 1280px width with height adjusted accordingly
Branding Guidelines
- Follow our MoodBoard Doc for design style, font, and colors.
- Professional, clean, easy to read and look at
- https://projects.invisionapp.com/boards/P53EEN8ZY4T93/
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=616959
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.
01) Landing Page Screen
- Provide basic information page about what MyDiary is and the services that we provide, while also giving a link to the Login Page
- Consider this screen as marketing agent/material for our potential users
- It needs to be attractive, clear, informative, and raise potential user curiosity about our services
- Use "MarketingcopyforMyDiary.pdf" as content for this page
02) Login Screen
- User needs to log in first before they can use the app.
- Two ways to log in: standard form login and social media login.
- Encourage the user to register or login via social media.
- Provide simple steps for the user to log in via social media account.
03) Relationship Status Screen/Analysis Example Screen
- The goal of this screen is to show users that our language software is correctly analyzing their data entries by showing them that we can identify the user's relationship status based on their entries.
- Show some text "Your diary entries have a lot of interesting data! Our software can analyze your entries and find out all kinds of interesting things. Let's start with your relationship status. You haven't told us if you're in a relationship or not, but let's take a look at your entries and see if we can work it out."
- Show visualization, something like y-axis: relationship-related words; x-axis: dates; emphasize the likely relationship status, then show text "Based on our analytics, it looks like you might be in a relationship - is that right?"
- The user selects either "Spot on!" or "Close but not quite" or "Way off":
-- "Spot on!" - show text: "See, your entries can tell us a lot! Let's see what else we can learn", click and go to "04) Dashboard Screen"
-- "Close but not quite" - show text: "Oh, not quite right? Wonder where we slipped up - can you tell us your relationship status so we can learn and improve?" Ask to select relationship status, include an option "I'd rather not say", then show text: "Thanks for that! We'll check what's happening behind the scenes. In the meantime, let's see what else we can learn", click and go to "04) Dashboard Screen"
-- "Way off" - show text: "Hmm, we'll check what’s happening behind the scenes. In the meantime, let's see what else we can learn", click and go to "04) Dashboard Screen"
04) Dashboard Screen
- The user can choose amongst the insights to view and can grouping the diary entries in order to generate aggregated insights (customize the tag, tag group, timeline, etc)
- This screen should show (using icons and super short descriptions) the insights available in the app. These will include simple statistics, such as:
-- Average text length of diary entry
-- Average number of diary entries in a month
-- Diary entry distribution by day of week (i.e., Mon vs Tues vs ..)
- This screen will also show (using icons and super short descriptions) insights such as:
-- Mood of entries, this option should be highlighted for first-time users, with a message saying "start here"
-- Birthday Insight - Making a prediction of the user's birthday date
-- Closest Friend - Making a prediction about who your closest friend is
-- Relationship Status - Making a prediction about whether the user is in a relationship
- When users hover over an insight, the screen should show an explanation of the insight. Several examples of insights would be:
- Sample of diary content can be found in "Samplediaryentries.pdf" docs
- FYI, the app will create insights using the following methods:
-- The diary entries created by the users (prior to signing up to this app) are text
-- When users sign up to our app and grant us access to read their diary entries, our code analyses the text in the diary
-- Then there is a bunch of data sitting there ready to show to the user. There are some ways in which the user can modify how this data is grouped
-- That is the way that the user can "generate" insights. E.g. if they choose to group certain tags together, the mood score for that group of entries will be aggregated
---- For example, if users group together all entries tagged "work" versus all entries tagged "friends" and then viewed mood statistics, they could see whether their mood is, on average, more positive or less positive when they're writing about their friends versus when they're writing about work. This kind of comparison will help give users insight into themselves and their emotions.
- There should be a user profile button where users can modify/change the way diary entries are grouped for the analysis. There should be two ways to group data, users can pick between either:
-- Grouping by tags:
---- Default will be top 5 most used tags (tags 1-5) vs next 5 most used tags (tags 6-10)
---- Users should be able to choose their own tag groupings, from the (max 30) tags they have previously generated
-- Time periods: give users the option to compare diary entries from certain periods. Offer suggestions:
---- This month vs last month; or
---- This year vs last year; or
---- User picks a point in time and say compare all before vs. all after; or
---- User selects a date range for Time Period 1 (TP1) and a date range for Time Period 2 (TP2). TP1 and TP2 should not overlap.
05) First insight screen: mood of entries
- This screen will introduce the concept of mood (before showing personalized insights relating to mood).
- Intro to mood:
-- Show a sample diary entry
-- Simulate code analyzing the entry by highlighting/circling/emphasizing certain words that are predictive of mood
-- Make the mood score for that entry appear
-- Slot that score into a distribution over time of mood
- Essentially mood will be a score on a sentiment scale from 100% positive/happy on one end to 100% negative/sad on the other end. We have written code that completes sentiment analysis: that is, it analyses the text for entry and gives the entry a score on that sentiment scale.
- The mood of an entry - that's a score on the scale. The insight aggregates various combinations of those scores to show insights about how the user’s mood differs, for example, if the user groups all the #work entries and compares the mood against all the #personal entries, the scores we would want to show in some kind of visualisation would be the aggregate mood score for all the #work entries versus the aggregate mood score for the #personal entries.
06) Personalised mood insights: Mood analysis on their own diary data
- Once the users have been shown the explanation of the mood score concept, they will be able to navigate to this screen.
- Briefly, run some kind of animation to simulate their data being analyzed by code (a kind of "work in progress" visual)
- Show a visualization of their mood over time as a distribution
-- Allow users to click on a data point to expand the info available: exact score, date of entry, title
- Visualisation should now change to show distribution sorted by:
-- Tag group 1 vs Tag group 2
-- TP1 vs TP2
- The mood insight - the user will be shown whether their mood is different (more positive or more negative) when they write entries about, for example, #work compared to when they write entries about #personal topics.
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 (Copilot email)
- 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
- Moodboard for Design References
- Sample for Diary Content (Samplediaryentries.pdf) and Marketing material for landing page (MarketingcopyforMyDiary.pdf)
Target Audience
- General Society
- Interested in learning about themselves, they're introspective, curious.
- They're probably early 20's to 50's, professionals, educated.
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 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 colors) or modify overall colors.a
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.