Challenge Summary
Welcome to SunShot - Simplify Solar - Responsive Learn Solar Parallax Page Design Challenge. In this challenge, we are looking for your help to create a single responsive parallax page.
The object of simplifysolar.com/learn is to create a platform where those interested in solar can learn about and get quizzed on a series of topics. While completing, they will be prompted to register as a SimplifySolar partner and, if they choose, can become an independent solar sales contractor (a “Simplify Solar Ambassador”) after completion of the short course.
NOTE: We will be awarding checkpoint prize $150 to all best submissions
Round 1
Submit your initial designs for Checkpoint Feedback
A. User/Student Page (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. User/Student Page (Desktop + Mobile)
B. Admin Dashboard (Desktop + Mobile)
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 look & feel and flow of the new application We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).
Design Considerations:
- Looking for modern, intuitive user interface
- We need this product to be simple, smart, engaging.
- Focus on the design being a great user experience, think simple but effective solutions!
- 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
- Please follow the look & feel from attached existing designs
- What should the priority features be?
- How quickly could you find information?
- Stock Photos: Feel free to use any images
Design Size:
We need responsive designs:
Desktop: 1024px as width and height as required
Mobile: 750 × 1334px (iPhone 6)
Challenge Assets:
We had provided a simple wireframe to help you get started, please make sure to pay close attention to all features as given in the wireframe and come up with modern UI and think about user experience.
Required Page:
We need below pages to be created for this challenge..
Generic UI elements:
- In all the below pages, we need to have a consistent header and footer as described below..
- Provide an option to “Search Within” the page or something similar to enable visitors to search, please include this wherever appropriate.
Header:
- At the top, we need to show “Learn” powered by SimplifySolar
- We also need to show a notification icon and a user logged in thumbnail as shown in the wireframe.
- Note: Any user, whether they are registered or not, can access this content, only thing is their progress will not be saved if they don't sign up.
Footer:
- Follow the styles from existing designs.
A. User/Student Page:
Below page need to designed as a single parallax page like the attached examples..
1. Learn Main Page:
- Display a title “Solar Crash Course” with a subtext “Learn the basics of solar through this simple introductory course on solar”
- Show a “Continue” button with a percentage, clicking on it takes the user to the last place where the user stopped the course.
Statistics:
We would like to show simple statistics that indicates:
- Number of students enrolled
- Estimated Course Time (in hours)
- Required technical level (Beginner, Intermediate, Advanced)
Courses:
- We need to show the list of courses organized by topic names
- Each of the topic will show list of lessons under them and it needs to have a progress indicator, that indicates the completion percentage (this is based on the quiz answered in each lesson) - we are looking for your ideas on how this can be shown in your designs!
- User can go through and visit any specific part of a page, especially if he/she is just interested in finding something out quickly and exit the page.
- Clicking on the “Progress indicator” will take the user to Course Details (as this is a parallax, we will show them below the list of courses).
Course Details:
- When a user clicks on a course within a topic, they are taken to this section.
- These course detail will be mix of video, articles, images etc..see given examples to “simplifysolar_learn_home_rooftopsolar.png, simplifysolar_learn_home_simplifysolarway.png, simplifysolar_learn_home_solar101.png, simplifysolar_learn_home_solarphysics.png” to get an idea on the contents.
Quiz:
- At the end of each lesson, user will have the option to take the quiz.
- Certain lesson will have multiple quiz, how to indicate this in the designs?
- Clicking on “quiz” will show the quiz details, think on how this need to be shown (make sure it doesn’t open in a new page)...for design mockup: show few questions and allow the users to select answers (maybe, show 4 checkboxes for the user to select as answers or show 4 radio button to select one answer, etc..)
B. Admin Dashboard:
In addition to the above user/student’s facing page, we would also like you to create a admin dashboard that helps admins monitor student’s progress and also manage the course contents!
NOTE: Admin pages need not be a single page parallax scrolling, they can like a normal website
Statistics:
It will be good to shows these statistics in the dashboard:
- Numbers of topics available
- Total number of lessons available
- Overall number of student’s enrolled
- Anything else that will useful for admin’s?
2. Monitor Student's Progress:
- We need a page that lists all students enrolled and also allows the user to search for a particular student.
- View individual student's progress, progress need to include some statistics like number of topics/lesson’s completed by them, duration spent in the site...etc.
- Also it needs to allow the user to view the list of lessons completed by the student.
3. Manage Contents:
Admins need a page that allows them to manage the content available for students. These could include the below (note that you are not limited to these, feel free to expand on the below given thoughts)
List of Course Contents:
- We need a page that shows all of the existing contents available to students, do you think we can reuse the same student’s page with additional editing capabilities for the admins?
- By listing the contents gives additional linking capabilities like we can list the number of students taking a particular lesson and clicking on that number takes user to “Student’s progress section”
- What other options each of the lesson need to have (edit, delete, enable/disable, etc…?) - looking for you thoughts on that.
- Admins will have options to “Add New Topic, Add New Lesson”
Lesson Details:
- We are looking for your thoughts on how an admin will edit the lesson details, how should interface look like? will it be wise to provide an editing capability for admins in the existing student’s facing page?
Creation of New lesson:
Admin needs the ability to create a new lesson, few details that will be required for lesson creation are
- Choose a Topic under which this lesson need to be created.
- Choose the required technical level (Beginner, Intermediate, Advanced)
- Add Content (This can be a large text area with rich text tools that allows users to add various types of content), please go through “simplifysolar_learn_home_rooftopsolar.png,
simplifysolar_learn_home_simplifysolarway.png, simplifysolar_learn_home_solar101.png, simplifysolar_learn_home_solarphysics.png” to get an idea on the type of content.
- Creation of Quiz (Note: we might need users to create multiple quiz for certain lessons, see attached examples), please see below..
Creation of Quiz:
- This section will be a part of creation of new lesson page.
- Quiz will have few questions and answers.
- We will need a interface that allows user to enter a question and select the type of answer (multiple choices, single selection etc..), on selecting the type of answer - provide options to enter answers (i.e. if user chooses multiple options, then provide users couple of textboxes to enter different answers that need to be shown to users for selection, it will be good to allow the user to admin to add more answer by clicking on a button say “Add more”)
References:
Below are some of the parallax scrolling references, please DO NOT COPY
- http://www.creativebloq.com/web-design/parallax-scrolling-1131762
- http://www.awwwards.com/20-best-websites-with-parallax-scrolling-of-2013.html
Target User:
- Residential Homeowners in US, who are interested in solar and are looking to learn about solar.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- 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 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.