Challenge Summary
Welcome to METI - Case Studies Responsive Application Design Challenge.
There is a considerably large amount of information about business case studies that we need to make available for users to grasp and use quickly for their business purposes. METI (Ministry of Economy Trade and Industry - government of Japan) is creating a web application from scratch to help users finding this information and interacting with it. We need your skills to provide a concept that meets the required practices mentioned in the specifications.
Best of luck.
2. Case Studies List (Desktop and Phone)
3. Search case studies (Desktop)
4. Newly-arrived case studies (Desktop)
5. History (Desktop)
6. Case Study Details View (Desktop and Phone)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1. Login/Register (Desktop)
2. Case Studies List (Desktop and Phone)
3. Search case studies (Desktop)
4. Newly-arrived case studies (Desktop)
5. History (Desktop)
6. Case Study Details View (Desktop and Phone)
7. Bookmarks (Desktop)
8. Notifications (Desktop)
9. Account (Desktop)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this challenge is to design the look and feel of a responsive web application (mobile and desktop) that will be used to help users managing information about case studies in small and medium-sized enterprises in Japan, which contain information about the efforts on their business challenges. The application should enable users to find useful information from these case studies, and utilize them in their own business effectively.
Background
In the past years, the customer had created a lot of collections of nationwide case studies of business challenges in small and medium-sized enterprises in Japan. Unfortunately, these efforts have not created great value so far because:
- It takes a lot of efforts to find potentially useful information from case studies existing in somewhere in a lot of PDF or paper documents.
- It’s difficult for users to access these documents when it’s needed because these have been created and managed individually and not shared as the worst case.
Concept Design Goals
The customer is going to solve these issues by creating the database to collect and consolidate the case studies information and building a software system on it, which provides features to enable users to find useful information in the case studies.
The most important features this application must provide:
(1) Effective Search / Recommend
- The app should enable user to find case studies which should be useful for his/her customer.
(2) Personal collections of case studies
- It's supposed that user want to have his/her own collections of case studies for his/her customers, instead of existing ones based on PDF/papers.
Design Considerations:
- Good UX, especially for key features above.
- Must be easy-to-use and intuitive.
- Accessibility for middle and elderly people.
- This will be a responsive web application.
Some Keywords looking into the design:
- Easy-to-use
- Eye-friendly
- Simple
- Comfortable
- Easy to understand
- Friendly
- Motivating
- Not boring
- Happy and Positive
Keywords that should NOT bee seen in the design:
- Too Formal
- Rude
- Too Aggressive
- Discriminatory
- Provocative
- Disrespectful
- Old & Classical
- Cheep
- Luxury
The design needs to be independent from specific culture or race. For example, following keyword design are not what we're looking for.
- Closed, Ethnic, Girly/Feminine, Too cute, Sweet, Childish, Tropical, Cartoon, Too gorgeous, Mysterious, etc.
Supporting Documents
- Download link: https://drive.google.com/open?id=1h-e5lTR6v4oJu_HYuKG8yBn-0FZZU2F1
- Design Moodboard
- Data sample
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- Please suggest how to organize this content and group them into screens, we are looking forward to see your unique proposals, be bold. For instance, requirements 2, 3 and 4 could be grouped in a single screen, just an example. We’d like to see your proposals about flow and organization.
- Propose a navigation system that makes sense and considers all the required features below (include logout).
- You can use "Relationships" tab from the Data doc to map out features.
1. Login/Register (Desktop)
- User should be able to login using email and password. There should be a forgot password link.
- Social login/registration should be supported (Twitter and Facebook).
- Registration should require the following fields:
-- Email
-- Password
-- First Name
-- Last Name
-- Address
-- Phone number
-- Organization (Company).
-- Corporate Number.
2. Case Studies List (Desktop and Phone)
- List of case studies sorted by popularity (based on the view count).
- Case studies can be organized in categories/tags such as "Management", "Financial", "Commerce", "Regional", etc.
- List is sortable by:
-- Default sort key is "Popularity" (based on the view count).
-- Possible keys for sorting could be any of the data structure of a case study (e.g. title, region, etc… open to suggestions).
- A typical case study would have:
-- Title
-- Organization
-- Region
-- Published date
-- Tags
-- Views (# of views)
- User can see a list of suggested case studies generated automatically by the system according to user’s attributes and behaviours such as region, industry, company size (# of employees).
3. Search case studies (Desktop)
- User should be allowed to search by keyword(s).
-- Multiple keywords should be used as AND condition.
- User can search by one or more tags.
-- It's supposed that case studies have single or multiple tags.
-- Multiple tags should be used as OR condition.
- User can search by region / prefecture. Regions and Prefectures are based on some fixed labels:
-- One or more items in 8 regions should be assignable as search parameters.
-- One or more items in 47 prefectures should be assignable as search parameters.
-- Multiple items should be used as OR condition.
From functional point of view, regions/prefectures for search are tags for specific use. Regions are groups of some prefectures. See the sheet [Regions/Prefs] in Data doc for details, Region/Prefectures tab.
4. Newly-arrived case studies (Desktop)
- User can see a highlighted set of case studies that are recently added to the system so she can tell quickly it’s ‘new’.
5. History (Desktop)
- User should be able to visualize the cases he/she recently visited.
6. Case Study Details View (Desktop and Phone)
- User can see the detailed view of a case study.
- All data under the “Case Study Details” tab must be displayed except for “Type of Contents”.
- User can share the URL through social network (Facebook, Twitter).
7. Bookmarks (Desktop)
- User can bookmark a case study.
- User can create/modify/delete collections. Case studies can be added to a default list/collection or to specific created collections.
- A case study can be added to several collections.
Collections List
- User can see a list of collections.
- User can set display order for collections based on his/her preference.
Collection Details
- User can see the content of a collection, which is a list of case studies associated to the respective collection.
- User can move/remove case stud[y|es] from a collection.
- User can share URL of a collection through social networks (Facebook, Twitter).
- User can print all case studies in a specified collection. Just place a “print” button for the collection, no need to create print-friendly pages.
- User can find recommended case studies in the collection details.
-- The recommendation is created based on case studies put in a collection.
Collection Search
- Search by keyword(s) in a collection(s).
- List of case studies related to contents of a collection.
- Consider integrating this search as a global search along with the case studies search if useful.
8. Notifications (Desktop)
- Display a notification icon with the indicator to show the number of new items.
- Show a list of notifications. Content of notifications are new case studies arrivals, important news from the office management or system updates.
- Notifications should have the ability to be marked as read.
- A notification should have:
-- Date/Time
-- Message
-- Creator Name
-- Link to see/read more details.
9. Account (Desktop)
- User should be able to edit their account parameters. HOWEVER, this screen is out of scope, we’d just like you to consider it for the navigation.
Branding Guidelines
- Fonts and colors open to suggestions as long as they are inline with the design goals.
- We provide a moodboard for simple start or inspiration. Ignore the page design, we like the color tones and fonts. The design style we’re looking for leans towards dashboard-like design.
- Use a placeholder for logo.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1366px width. Height as much as needed.
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com).
- Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload. See example.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
- You don’t want to fail screening? Read this.
Target User
- Business advisors in a local commerce association to support managers of local companies.
- CEOs in small and medium-sized enterprises in Japan.
- There are a wide variety of industries related to energy such as oil, mining, fuel, refining, and so on.
- Service available in Japan only.
Persona
Sato
29 years old, male.
He moved to a local commerce association 2 months ago. He is working as a business adviser for small companies in the local. To be better advisor for customers, he is making efforts on collecting useful information for them, such like assistance programs, laws, and etc.
Among his work activities he supports management plans, introduces measures to managers and performs advising for finances.
Sato wants to build trust with his customers as soon as possible. He will go to his office early every morning and login to the case study search app. And then checking new contents the app recommends for him to find useful information about enterprises like government's measures, the labor law, and etc.
Sato would bookmark case studies which seem to fit his customer when finding them.
He finds impressive that many people put ”Like" on contents about a Kyoto vegetables farm. Which would make him save it and other interesting contents to one of his bookmark collections.
One of his customers who runs a poultry farm asked for some advice to resolve the issue of difficulties in price negotiations caused by rise of food price. Sato found some useful articles about possible solutions in his bookmark collections and created new bookmark collection by reorganizing bookmarked contents. Then, he prints these articles to share them with the customer. Later, he makes that collection public to share it with other users and also allow them add comments.
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- Are mobile-first principles properly applied to your solution?
- How well you implement the challenge requirements. Note you would need to implement all required functionalities and items as written in the spec.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
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, Illustrator or Sketch. Layers should be named and well organized.
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.
There is a considerably large amount of information about business case studies that we need to make available for users to grasp and use quickly for their business purposes. METI (Ministry of Economy Trade and Industry - government of Japan) is creating a web application from scratch to help users finding this information and interacting with it. We need your skills to provide a concept that meets the required practices mentioned in the specifications.
Best of luck.
Round 1
Submit your design for a checkpoint feedback.2. Case Studies List (Desktop and Phone)
3. Search case studies (Desktop)
4. Newly-arrived case studies (Desktop)
5. History (Desktop)
6. Case Study Details View (Desktop and Phone)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final design plus checkpoint feedback.1. Login/Register (Desktop)
2. Case Studies List (Desktop and Phone)
3. Search case studies (Desktop)
4. Newly-arrived case studies (Desktop)
5. History (Desktop)
6. Case Study Details View (Desktop and Phone)
7. Bookmarks (Desktop)
8. Notifications (Desktop)
9. Account (Desktop)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this challenge is to design the look and feel of a responsive web application (mobile and desktop) that will be used to help users managing information about case studies in small and medium-sized enterprises in Japan, which contain information about the efforts on their business challenges. The application should enable users to find useful information from these case studies, and utilize them in their own business effectively.
Background
In the past years, the customer had created a lot of collections of nationwide case studies of business challenges in small and medium-sized enterprises in Japan. Unfortunately, these efforts have not created great value so far because:
- It takes a lot of efforts to find potentially useful information from case studies existing in somewhere in a lot of PDF or paper documents.
- It’s difficult for users to access these documents when it’s needed because these have been created and managed individually and not shared as the worst case.
Concept Design Goals
The customer is going to solve these issues by creating the database to collect and consolidate the case studies information and building a software system on it, which provides features to enable users to find useful information in the case studies.
The most important features this application must provide:
(1) Effective Search / Recommend
- The app should enable user to find case studies which should be useful for his/her customer.
(2) Personal collections of case studies
- It's supposed that user want to have his/her own collections of case studies for his/her customers, instead of existing ones based on PDF/papers.
Design Considerations:
- Good UX, especially for key features above.
- Must be easy-to-use and intuitive.
- Accessibility for middle and elderly people.
- This will be a responsive web application.
Some Keywords looking into the design:
- Easy-to-use
- Eye-friendly
- Simple
- Comfortable
- Easy to understand
- Friendly
- Motivating
- Not boring
- Happy and Positive
Keywords that should NOT bee seen in the design:
- Too Formal
- Rude
- Too Aggressive
- Discriminatory
- Provocative
- Disrespectful
- Old & Classical
- Cheep
- Luxury
The design needs to be independent from specific culture or race. For example, following keyword design are not what we're looking for.
- Closed, Ethnic, Girly/Feminine, Too cute, Sweet, Childish, Tropical, Cartoon, Too gorgeous, Mysterious, etc.
Supporting Documents
- Download link: https://drive.google.com/open?id=1h-e5lTR6v4oJu_HYuKG8yBn-0FZZU2F1
- Design Moodboard
- Data sample
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- Please suggest how to organize this content and group them into screens, we are looking forward to see your unique proposals, be bold. For instance, requirements 2, 3 and 4 could be grouped in a single screen, just an example. We’d like to see your proposals about flow and organization.
- Propose a navigation system that makes sense and considers all the required features below (include logout).
- You can use "Relationships" tab from the Data doc to map out features.
1. Login/Register (Desktop)
- User should be able to login using email and password. There should be a forgot password link.
- Social login/registration should be supported (Twitter and Facebook).
- Registration should require the following fields:
-- Password
-- First Name
-- Last Name
-- Address
-- Phone number
-- Organization (Company).
-- Corporate Number.
2. Case Studies List (Desktop and Phone)
- List of case studies sorted by popularity (based on the view count).
- Case studies can be organized in categories/tags such as "Management", "Financial", "Commerce", "Regional", etc.
- List is sortable by:
-- Default sort key is "Popularity" (based on the view count).
-- Possible keys for sorting could be any of the data structure of a case study (e.g. title, region, etc… open to suggestions).
- A typical case study would have:
-- Title
-- Organization
-- Region
-- Published date
-- Tags
-- Views (# of views)
- User can see a list of suggested case studies generated automatically by the system according to user’s attributes and behaviours such as region, industry, company size (# of employees).
3. Search case studies (Desktop)
- User should be allowed to search by keyword(s).
-- Multiple keywords should be used as AND condition.
- User can search by one or more tags.
-- It's supposed that case studies have single or multiple tags.
-- Multiple tags should be used as OR condition.
- User can search by region / prefecture. Regions and Prefectures are based on some fixed labels:
-- One or more items in 8 regions should be assignable as search parameters.
-- One or more items in 47 prefectures should be assignable as search parameters.
-- Multiple items should be used as OR condition.
From functional point of view, regions/prefectures for search are tags for specific use. Regions are groups of some prefectures. See the sheet [Regions/Prefs] in Data doc for details, Region/Prefectures tab.
4. Newly-arrived case studies (Desktop)
- User can see a highlighted set of case studies that are recently added to the system so she can tell quickly it’s ‘new’.
5. History (Desktop)
- User should be able to visualize the cases he/she recently visited.
6. Case Study Details View (Desktop and Phone)
- User can see the detailed view of a case study.
- All data under the “Case Study Details” tab must be displayed except for “Type of Contents”.
- User can share the URL through social network (Facebook, Twitter).
7. Bookmarks (Desktop)
- User can bookmark a case study.
- User can create/modify/delete collections. Case studies can be added to a default list/collection or to specific created collections.
- A case study can be added to several collections.
Collections List
- User can see a list of collections.
- User can set display order for collections based on his/her preference.
Collection Details
- User can see the content of a collection, which is a list of case studies associated to the respective collection.
- User can move/remove case stud[y|es] from a collection.
- User can share URL of a collection through social networks (Facebook, Twitter).
- User can print all case studies in a specified collection. Just place a “print” button for the collection, no need to create print-friendly pages.
- User can find recommended case studies in the collection details.
-- The recommendation is created based on case studies put in a collection.
Collection Search
- Search by keyword(s) in a collection(s).
- List of case studies related to contents of a collection.
- Consider integrating this search as a global search along with the case studies search if useful.
8. Notifications (Desktop)
- Display a notification icon with the indicator to show the number of new items.
- Show a list of notifications. Content of notifications are new case studies arrivals, important news from the office management or system updates.
- Notifications should have the ability to be marked as read.
- A notification should have:
-- Date/Time
-- Message
-- Creator Name
-- Link to see/read more details.
9. Account (Desktop)
- User should be able to edit their account parameters. HOWEVER, this screen is out of scope, we’d just like you to consider it for the navigation.
Branding Guidelines
- Fonts and colors open to suggestions as long as they are inline with the design goals.
- We provide a moodboard for simple start or inspiration. Ignore the page design, we like the color tones and fonts. The design style we’re looking for leans towards dashboard-like design.
- Use a placeholder for logo.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1366px width. Height as much as needed.
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com).
- Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload. See example.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
- You don’t want to fail screening? Read this.
Target User
- Business advisors in a local commerce association to support managers of local companies.
- CEOs in small and medium-sized enterprises in Japan.
- There are a wide variety of industries related to energy such as oil, mining, fuel, refining, and so on.
- Service available in Japan only.
Persona
Sato
29 years old, male.
He moved to a local commerce association 2 months ago. He is working as a business adviser for small companies in the local. To be better advisor for customers, he is making efforts on collecting useful information for them, such like assistance programs, laws, and etc.
Among his work activities he supports management plans, introduces measures to managers and performs advising for finances.
Sato wants to build trust with his customers as soon as possible. He will go to his office early every morning and login to the case study search app. And then checking new contents the app recommends for him to find useful information about enterprises like government's measures, the labor law, and etc.
Sato would bookmark case studies which seem to fit his customer when finding them.
He finds impressive that many people put ”Like" on contents about a Kyoto vegetables farm. Which would make him save it and other interesting contents to one of his bookmark collections.
One of his customers who runs a poultry farm asked for some advice to resolve the issue of difficulties in price negotiations caused by rise of food price. Sato found some useful articles about possible solutions in his bookmark collections and created new bookmark collection by reorganizing bookmarked contents. Then, he prints these articles to share them with the customer. Later, he makes that collection public to share it with other users and also allow them add comments.
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- Are mobile-first principles properly applied to your solution?
- How well you implement the challenge requirements. Note you would need to implement all required functionalities and items as written in the spec.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
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, Illustrator or Sketch. Layers should be named and well organized.
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.