Challenge Summary
Welcome to "TeckedIn - Simpler Content Management Platform Design Challenge". In this challenge, we need Topcoder Community help to create the best UI/UX for our new platform called TeckedIn that will be used by technology users and technology solution providers. We are open to your creative and innovative ideas!
01) Homepage (Non Logged In User)
02) Login Feature
03) Details Content Feature
04) Search Features
05) User Dashboard (Both Users)
06) Personal Vault
- Provide a MarvelApp presentation of your design to help us understand your design concept.
- Request a MarvelApp prototype/project from copilot fajar.mln or adroc or tgerring (via forum or email)
- Make sure all pages have correct flow. Use correct file numbering. (00, 01, 02, 03)
01) Homepage (Non Logged In User)
02) Login Feature
03) Details Content Feature
04) Search Features
05) User Dashboard (Both Users)
06) Personal Vault
07) External Personal Vault
08) Solution Providers Homepage
09) Payments Features
10) Help Features
11) Others Features
- Provide a MarvelApp 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
We want to build a platform that will be used by technology users and technology solution providers. We provide a platform that IT users can go to to search and save web content and where technology providers use our site to upload content and market to IT end users. This platform will talk about technology and this is not a social media site.
Challenge Goals
There are 2 goals that we want to achieve in this platform, which are:
- For End Users, to make our platform/site become the number one site they go to on a daily basis for their technology information.
- For solutions providers. to make our platform/site become the number one site that they post their news, blogs and information on.
Design Considerations
- What should the priority features be?
- UI/UX Best Practice for Hybrid Design (Focus on Desktop and Mobile)!
- How quickly could you find information?
- The interface will be easy and intuitive to navigate
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- 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
Design Requirements
- Desktop, Tablet and Hybrid Apps - Focus on Desktop and Mobile!
- Tablet design will follow Desktop or Mobile (which one that more approachable)
- We will create it as 2 separate apps, one as a web apps and another one as a hybrid apps for mobile.
- Desktop: min 1280px width with height adjusting accordingly
- Mobile: 750px x 1334px (Think about hybrid apps best approach)
- Upload your screens to MarvelApp for review and to showcase the experience (ask for MarvelApp prototype/project from copilot or PM in challenge forum)
Branding Guidelines
- Color: Follow Logo Company provided in challenge attachments.
- Font: Sans Serif Family
- Icon Design: Flat Color
- Follow UI/UX Best Practice for Desktop and Mobile Hybrid design!
- Professional, clean, easy to read and look at
Required Pages/Features
For this challenge, we are looking for the below pages to be designed/considered in your concepts.
01) Homepage (Non Logged In User)
- Needs to quickly give value proposition on why end user and also solution provider would want to sign up. So homepage (non-logged in user) really needs to get message across and get people to sign up. Initially it will be free to members and offering one month free to solution providers.
- Show list of all product content from various Solution Provider in this page.
- Latest content, Popular content, Category etc? Think of content arrangement in News and Media portal.
- By saying content, we are talking about Technology Provider user doing promotion about their presence, posting update news and blogs or their products and do so at a better price point then they are currently paying for ads and sponsorships.
- After checking the content for a while (for ex, 5 minutes), there should be a prompt/modal window asking non-logged in user to login to their account.
02) Login Feature
- Allow users to register and log in using their email address and a password.
- There will be 2 kind of user in this platform, IT End User and Solution Provider User.
- Users can change their password or recover a forgotten one.
- Provide error login scenario.
- When a member joins/register, we want to present them with a checklist of what categories they are interested in, i.e. cloud computing, data analytics, etc. And also a section for other, if we don't have that category yet.
- So when they log in, it will say "Hi Debby, here is your news today on your technology interests".
- So the news would be presented by category, not just a long list of news.
03) Details Content Feature
- Utilize video, image and text to present the details content from Solution Provider.
- Use this feature to shows lists of product or services from our solution provider.
- Recommended content list? What kind of suggestion that you can offer to make user keep engage with this solution provider content?
- Think about the best practice of UI/UX layout marketing that able to increase IT End User understanding and interest about the solution that our Solution Provider user offers.
- Provide some ability like sharing, send email, subscribe in this screen. These features will not active unless user login to the platform.
04) Search Feature
- Provide the ability for both user (IT End User and Technology Provide) to search through any content in our platform.
- Search feature - there will be two search features - one searches entire teckedin.com site, the other searches the personal vault.
- We want users to be able to do like a google search throughout the site and also a more refined, category type search.
- Provide Category searches and open searches in the platform
- So they would either just start typing in a box, like google, or they would be presented with a dialog box for metadata values, i.e. category (which would be a picklist), date range, etc.
- Provide smart and intuitive search result that will makes user easily to find any content and encouraged to explore more content in our platform.
- What else that you can suggest here? Saved Search criteria? etc? Show us your suggestions
05) User Dashboard
- Once user login to the platform, they will be provided with custom content list based on their preferences when register/join.
- User can modify/customize their home screen with personalized content or basic performance indicators, such as content category that they want to see, number of popularity of content, etc.
- Show list of navigation based on category in the platform (Cloud, Data analytics, etc)
- There should be an easy way to access user personal vault from the dashboard area
- Any content that user recently read but not yet finished? show it to them (think like progress bar)
- Show summary of each content in this screen, the solution provider, content summary, time to read whole content, time the content published, and recommendation to the user like how match/good the content for themselves, etc.
06) Personal Vault
- When users are on our platform and seeing/searching content, we want them to easily be able to save the content to their personal vault.
- User should be able to save content to personal vault in an easy and quick way. Using page source, at a minimum, the metadata captured should be title, content date, date saved, all text for full text search. And then keywords where the member can type in their own keywords or reference for future search.
- Think of bookmarking features in browser, but it's inside the platform.
- User will be able to arrange their personal vault content.
- User will be able to set guidelines on how long they want to keep things in their personal vault.
- We're not sure yet if most people will just say keep forever or if they want to be able to save for 6 months, 12 months,5 years, etc.
- Some references:
-- http://www.houzz.com/ideabooks/19764256/list/new-to-houzz-heres-how-to-create-and-use-ideabooks
-- https://help.pinterest.com/en/articles/add-edit-or-delete-board
07) External Personal Vault
- Please create External personal features vault for our plugin that will be placed in user browser toolbar.
- Create an icon from our provided logo for the browser toolbar (external-personal-vault.zip) and show us how the icon/button will looks in browser.
- If someone is on a different website and wants to save that content to their personal vault in our platform then they would click the "teckedin" button on their browser to do so.
- Users will be able to save the external content to their Personal Vault (it will be connected to their Personal Vault in our platform).
- Create the UI/UX for the external personal vault layout as a plugin in user browser.
08) Solution Providers Homepage
- When IT End user read solution providers content and click the providers content profile, this screen should showed up.
- We want a template for solution providers to put their company/product information in.
- We want it to be a lot better than facebook and linkedin pages which are busy and just go on and on as you add pictures, videos, etc.
- We want a solution provider to have flexibility on the look and feel and model it after their own home page for consistency (so, layout flexibility)
09) Payments
- Allow users to pay in some way; for example, using credit cards, PayPal, or Bitcoin. Please specify your desired functionality below.
- This page is for membership payments for IT End User, While for Solution Providers User, we will probably bill them outside of the platform
- Right now we won't be charging for membership, however, we might in the future.
10) Help
- Include a section dedicated to FAQ or Help content.
11) Others Features
- What else that you think is needed for this platform?
- Show us your ideas and creation!
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Documentation
Download from Google drive: https://drive.google.com/drive/folders/0B8cviJNGmPm5UGJnSG9NbDVXZEE?usp=sharing
- company-logo.zip
- external-personal-vault.zip
Target Audience
- IT End Users - IT Managers or CIOs, one place to go to for their technology searches and a way to save content easily that they find useful.
- Technology Solution Providers - Provider a better way, than facebook and linkedin company pages, where they can post their presence, update news and blogs and do so at a better price point then they are currently paying for ads and sponsorships.
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- How well you interpret the requirements and show us new ideas and concepts.
- Cleanliness of your graphics and design.
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 will be asked to update the style tile to reflect any new elements that you have added to the design. You may also 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.
Round 1
Submit your initial design for a checkpoint feedback01) Homepage (Non Logged In User)
02) Login Feature
03) Details Content Feature
04) Search Features
05) User Dashboard (Both Users)
06) Personal Vault
- Provide a MarvelApp presentation of your design to help us understand your design concept.
- Request a MarvelApp prototype/project from copilot fajar.mln or adroc or tgerring (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) Homepage (Non Logged In User)
02) Login Feature
03) Details Content Feature
04) Search Features
05) User Dashboard (Both Users)
06) Personal Vault
07) External Personal Vault
08) Solution Providers Homepage
09) Payments Features
10) Help Features
11) Others Features
- Provide a MarvelApp 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
We want to build a platform that will be used by technology users and technology solution providers. We provide a platform that IT users can go to to search and save web content and where technology providers use our site to upload content and market to IT end users. This platform will talk about technology and this is not a social media site.
Challenge Goals
There are 2 goals that we want to achieve in this platform, which are:
- For End Users, to make our platform/site become the number one site they go to on a daily basis for their technology information.
- For solutions providers. to make our platform/site become the number one site that they post their news, blogs and information on.
Design Considerations
- What should the priority features be?
- UI/UX Best Practice for Hybrid Design (Focus on Desktop and Mobile)!
- How quickly could you find information?
- The interface will be easy and intuitive to navigate
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- 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
Design Requirements
- Desktop, Tablet and Hybrid Apps - Focus on Desktop and Mobile!
- Tablet design will follow Desktop or Mobile (which one that more approachable)
- We will create it as 2 separate apps, one as a web apps and another one as a hybrid apps for mobile.
- Desktop: min 1280px width with height adjusting accordingly
- Mobile: 750px x 1334px (Think about hybrid apps best approach)
- Upload your screens to MarvelApp for review and to showcase the experience (ask for MarvelApp prototype/project from copilot or PM in challenge forum)
Branding Guidelines
- Color: Follow Logo Company provided in challenge attachments.
- Font: Sans Serif Family
- Icon Design: Flat Color
- Follow UI/UX Best Practice for Desktop and Mobile Hybrid design!
- Professional, clean, easy to read and look at
Required Pages/Features
For this challenge, we are looking for the below pages to be designed/considered in your concepts.
01) Homepage (Non Logged In User)
- Needs to quickly give value proposition on why end user and also solution provider would want to sign up. So homepage (non-logged in user) really needs to get message across and get people to sign up. Initially it will be free to members and offering one month free to solution providers.
- Show list of all product content from various Solution Provider in this page.
- Latest content, Popular content, Category etc? Think of content arrangement in News and Media portal.
- By saying content, we are talking about Technology Provider user doing promotion about their presence, posting update news and blogs or their products and do so at a better price point then they are currently paying for ads and sponsorships.
- After checking the content for a while (for ex, 5 minutes), there should be a prompt/modal window asking non-logged in user to login to their account.
02) Login Feature
- Allow users to register and log in using their email address and a password.
- There will be 2 kind of user in this platform, IT End User and Solution Provider User.
- Users can change their password or recover a forgotten one.
- Provide error login scenario.
- When a member joins/register, we want to present them with a checklist of what categories they are interested in, i.e. cloud computing, data analytics, etc. And also a section for other, if we don't have that category yet.
- So when they log in, it will say "Hi Debby, here is your news today on your technology interests".
- So the news would be presented by category, not just a long list of news.
03) Details Content Feature
- Utilize video, image and text to present the details content from Solution Provider.
- Use this feature to shows lists of product or services from our solution provider.
- Recommended content list? What kind of suggestion that you can offer to make user keep engage with this solution provider content?
- Think about the best practice of UI/UX layout marketing that able to increase IT End User understanding and interest about the solution that our Solution Provider user offers.
- Provide some ability like sharing, send email, subscribe in this screen. These features will not active unless user login to the platform.
04) Search Feature
- Provide the ability for both user (IT End User and Technology Provide) to search through any content in our platform.
- Search feature - there will be two search features - one searches entire teckedin.com site, the other searches the personal vault.
- We want users to be able to do like a google search throughout the site and also a more refined, category type search.
- Provide Category searches and open searches in the platform
- So they would either just start typing in a box, like google, or they would be presented with a dialog box for metadata values, i.e. category (which would be a picklist), date range, etc.
- Provide smart and intuitive search result that will makes user easily to find any content and encouraged to explore more content in our platform.
- What else that you can suggest here? Saved Search criteria? etc? Show us your suggestions
05) User Dashboard
- Once user login to the platform, they will be provided with custom content list based on their preferences when register/join.
- User can modify/customize their home screen with personalized content or basic performance indicators, such as content category that they want to see, number of popularity of content, etc.
- Show list of navigation based on category in the platform (Cloud, Data analytics, etc)
- There should be an easy way to access user personal vault from the dashboard area
- Any content that user recently read but not yet finished? show it to them (think like progress bar)
- Show summary of each content in this screen, the solution provider, content summary, time to read whole content, time the content published, and recommendation to the user like how match/good the content for themselves, etc.
06) Personal Vault
- When users are on our platform and seeing/searching content, we want them to easily be able to save the content to their personal vault.
- User should be able to save content to personal vault in an easy and quick way. Using page source, at a minimum, the metadata captured should be title, content date, date saved, all text for full text search. And then keywords where the member can type in their own keywords or reference for future search.
- Think of bookmarking features in browser, but it's inside the platform.
- User will be able to arrange their personal vault content.
- User will be able to set guidelines on how long they want to keep things in their personal vault.
- We're not sure yet if most people will just say keep forever or if they want to be able to save for 6 months, 12 months,5 years, etc.
- Some references:
-- http://www.houzz.com/ideabooks/19764256/list/new-to-houzz-heres-how-to-create-and-use-ideabooks
-- https://help.pinterest.com/en/articles/add-edit-or-delete-board
07) External Personal Vault
- Please create External personal features vault for our plugin that will be placed in user browser toolbar.
- Create an icon from our provided logo for the browser toolbar (external-personal-vault.zip) and show us how the icon/button will looks in browser.
- If someone is on a different website and wants to save that content to their personal vault in our platform then they would click the "teckedin" button on their browser to do so.
- Users will be able to save the external content to their Personal Vault (it will be connected to their Personal Vault in our platform).
- Create the UI/UX for the external personal vault layout as a plugin in user browser.
08) Solution Providers Homepage
- When IT End user read solution providers content and click the providers content profile, this screen should showed up.
- We want a template for solution providers to put their company/product information in.
- We want it to be a lot better than facebook and linkedin pages which are busy and just go on and on as you add pictures, videos, etc.
- We want a solution provider to have flexibility on the look and feel and model it after their own home page for consistency (so, layout flexibility)
09) Payments
- Allow users to pay in some way; for example, using credit cards, PayPal, or Bitcoin. Please specify your desired functionality below.
- This page is for membership payments for IT End User, While for Solution Providers User, we will probably bill them outside of the platform
- Right now we won't be charging for membership, however, we might in the future.
10) Help
- Include a section dedicated to FAQ or Help content.
11) Others Features
- What else that you think is needed for this platform?
- Show us your ideas and creation!
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Documentation
Download from Google drive: https://drive.google.com/drive/folders/0B8cviJNGmPm5UGJnSG9NbDVXZEE?usp=sharing
- company-logo.zip
- external-personal-vault.zip
Target Audience
- IT End Users - IT Managers or CIOs, one place to go to for their technology searches and a way to save content easily that they find useful.
- Technology Solution Providers - Provider a better way, than facebook and linkedin company pages, where they can post their presence, update news and blogs and do so at a better price point then they are currently paying for ads and sponsorships.
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- How well you interpret the requirements and show us new ideas and concepts.
- Cleanliness of your graphics and design.
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 will be asked to update the style tile to reflect any new elements that you have added to the design. You may also 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.