Challenge Summary
Welcome to Living Progress - Educational Pinboard - Responsive Application Design Challenge!
This application at creating a responsive web application for teachers and students around the world to easily find, collect and modify high quality educational materials at no cost.
We have provided wireframes for content references, please do not copy them!
Also please don’t just color the wireframes, as we are looking for your help to improve the overall layout, interaction and user experience of the this application.
This challenge is part of the HPE Living Progress Challenge Blitz Program (Secure top placements in the leaderboard to grab additional cash prizes).
Good luck and we look forward to your design!
Round 1
Submit your initial designs for Checkpoint Feedback
A. Educators / Learners:
01 Login and Create Account (Desktop)
02 Landing Page (Desktop)
03 My Pinboard (Desktop)
04 Board Details (Desktop)
05 Resources (Desktop)
06 Resource Details (Desktop)
07 User Profile (Desktop)
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.
A. Educators / Learners:
01 Login and Create Account (Desktop + Tablet - portrait)
02 Landing Page(Desktop + Tablet - portrait)
03 My Pinboard (Desktop + Tablet - portrait)
04 Board Details (Desktop + Tablet - portrait)
05 Resources (Desktop + Tablet - portrait)
06 Resource Details (Desktop + Tablet - portrait)
07 User Profile (Desktop + Tablet - portrait)
B. Site Administrators
08 Manage Accounts / Permissions and Contents (Desktop + Tablet - portrait)
09 Reporting (Desktop + Tablet - portrait)
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).
About the Application:
The Open Education Consortium proposes development of an intuitive web application that streamlines finding, collecting and modifying open educational resources. Providing an easy to use tool, the Educational Pinboard, could allow educators and students around the world to access relevant, high quality educational materials at no cost.
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 you capture every detail in the wireframe.
- Any specific branding guidelines that need to be included?
Design Size:
- Desktop: Please have your designs of size 1280px width and height as required.
- Tablet (portrait): 1536 x 2048px
Required Screens:
We need below screens to be designed..
00) Logo and Navigation:
- We would like to receive your suggestions for logo that would be apt for this application!
- Show us how the navigation need to look like (navigation is available only for the logged in users).
A. Educators / Learners:
01) Homepage (Login and Create Account):
- This will act as the main landing page for anonymous users (i.e. not logged in users), this page will allow the users to login or create an account with the site!
- Users should have the ability to login or create an account using their Social media accounts like Google, Facebook or they should be able to create an account using their email (in which case, they will need to login with their username and password).
- Please make sure to include design for all required form elements i.e. if we have drop-down, show us how the drop-down style will look like
- How will the error design looks like if they enter wrong credentials?
Register:
- Show us how the registration page need to look like
- Please follow the details from "Register" page in wireframes
2) Landing Page:
- Looking for an engaging landing page that will act as single point of entry to all types of users (teachers, students).
- Come up with a navigation design that will be apt for this application.
- Provide an option to search about the Pinboards / resources/
- we need consistent option across the site to “Add Content from website, Upload Content, Create New Content, Add Board”, selecting each of them will show appropriate screen to add them.
Add Content from website: This allows the user to pin a content from website.
Upload Content: This allows the user to pin a content by allowing content to be uploaded from local drive.
Create New Content: Shows a form, that allows them to create a new content.
Add Board: Shows a form to create a new pinboard.
We need you to design all the 4 options above, have fun creating these, if you have any other design ideas to simplify this part - feel free to show them in your designs!
03 My Pinboard:
- Clicking on “My Pinboard” in the navigation should land them in this page.
- They will be seeing the list of boards that were pinned by them.
- Clicking on a board will take them to the board details that will be a collection of resources.
- Hovering on a board shows options to share and also edit, think on what would be best to show these options!
- Clicking on Edit (hover on a board to see edit option), takes the user to “Edit Board” page (please see below)
Boards:
- How do you think, the individual boards need to be designed?
- What would make it look legible as well as appealing to users?
- How do you think the different options shown on hovering a board should be displayed?
- How can we show the different options available to them to customize and share the board?
- How do these look in grid and list views?
- Feel free to add anything that you think would improve the user experience.
Edit Board:
- This page allows the user to edit the board, they will be able to change the title, description, tags and topic.
- Incase if they enter wrong information or miss some fields then we show error screen - how does it need to look like?
04 Board Details:
- Users who click on the board from “My Pinboard” or other users board will land on this page.
- This page will show the list of resources that were already curated and pinned by the user who created the board.
- Show the username of the person who created the board, this will be a link to their public profile.
- How can show the individual resources pinned?
- How do we need to show the options available for each of the resource?
My Board:
- If the user is viewing the board that they have created, then we need options to Edit the resource, could remove them from the board or share this particular pin with others / option to move a resource between boards would be great.
Other Users Board:
- If the board they are viewing belongs to some other user, then we need options to PIN it, share them.
- If the user chooses to pin a resource, what needs to be shown?
05 Resources:
- These are the individual educational resources that could of any material such as books, articles, research data, videos, simulations, and courses, looking for your thoughts on how can we indicate the type of material (PDF, video, article, etc..) in the resource?
- How do these resources look in grid and list views?
- Will have the ability to share the resource!
- It would be good to indicate the link from where the resource was taken along with statistics on how many people liked and commented.
- Clicking on a resource will take them to resource details.
- Should allow these to be filtered or viewed based on topics or by the type of resource (see wireframe)
- Show us designs on how the user will view different topics and types available for selection and also how will they select them to view the resources under them!
My Resource:
- If the user is viewing the resource that they have created, then we need options to Edit the resource, option to remove them from the site or share this particular pin with others.
Other Users Resource:
- If the resource they are viewing belongs to some other user, then we need options to PIN it, share them.
- If the user chooses to pin a resource, we need to allow the details of the resource to be edited (similar to adding/editing a content).
06 Resource Details:
- These need to show the resource details, please include all information as shown in the wireframes.
- Provide ability to comment on resources, having comment feature is particularly important so the user can make notes on their impressions of the resource, how it could be used, ways it could be modified for greater relevance, etc.
- Owner of the resource will be able to see some statistics on who pinned this resource and how is the pinning trend over a period of time?
07 User Profile:
- Profiles could take two views: public view (reference: profile (view)) and a private view (reference: My Profile)..
- Both views will need to show the boards and the profile information (Name, position/institution, etc) of the user.
- Only people who are logged in will be able to view their respective private profile view, these could have specific boards that they had marked as private
- Logged in users will be able to edit their profile information (click on “user thumbnail” in the top right > My profile...this page will have the option to edit..
- Looking for your designs thoughts on how the profile need to be displayed.
- Show us how the edit profile view will look like..
B. Site Administrator:
These are admins who will be handling the overall management and reporting
08 Manage Accounts / Permissions and Contents:
- They should be to manage all users and contents that are posted to the site.
- Should have the ability to delete any content that are irrelevant.
- They will be able to delete an account if site terms are not.
- They should be able to create an account / add another user as administrator.
09 Reporting:
We need a way for the admins to view the reports, these should allow the search to input some criteria and generate reports based on that..come up with concepts on how these criteria can be entered/chosen and then generate reports based on that.
Some example of reports that you could come up with are:
- - - Basic website analytics of use (number of visitors & accounts, frequency, geographic location, time on site, referrals, site drop offs and when, how many collections created,) and
- - - Content usage metrics
10 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.
Reference:
https://www.pinterest.com/
Please do not COPY, we are looking for unique designs and this is just provided as a reference to understand the overall concept!
Target Audience:
- Educators and Learners
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.