Design math problem search result page

Estado: Closed
Premio: $150
Propuestas recibidas: 11
Ganador: nextdesign2007

Winner

Resumen del concurso

Design one web page that contains math problem search results.

The page should contain the following sections:

1. Website header
2. Search terms + sorting
3. Filters
4. Found math problems
5. My Problem Set
6. Website footer

The web design should follow general design guide of http://wesolveproblems.org.uk/ website. Please use the same elements as there where appropriate.

The result should be provided as two PNG files: one for desktop PC, one for a smartphone.

I have attached a mockup that can be used to better understand which content should be in each sections. Please do NOT use it as a visual style guide. It is just for data/information.

Everywhere where I write buttons they could be either buttons or links on your choice.

Here is description of section content:

1. Website header
A website header with the same links as at http://wesolveproblems.org.uk/.
Please improve the header to take less vertical space.

2. Search terms + sorting
This panel on the top of the screen contains an edit field with the search phrase that was being searched and "Search" button. User can redefine search term and press the Search button again. There should be some element on the right allowing users to change sorting.

3. Filters

A left panel with search filters. There could be the following filtering options:

* "Find text in" - two checkboxes, "Problem" and "Solution"
* "Age" - a slider from 7y.o. to 16y.o.
* "Difficulty" - a slider from 1 star to 5 star difficulty
* "Categories" - a list of selected categories with checkboxes to uncheck the categories and "Select categories" button on the bottom that will open a popup window to choose categories from the list

Each filter should be easy to reset.

4. Found math problems

The main part of the webpage with search results as a list of found math problems.

The search result should contain 20 math problems per page.

Each math problem block should contain the following information:
* List of categories, each category is clickable
* Difficulties as stars (1 star minimum, 5 stars maximum)
* Age rating, like 10+
* Full problem text
* Button to show answers in a popup window - "Show Answer"
* Button to add this problem to the My Problem Set - "Add to My Problems"

Each math problem section must be clickable, leading to the corresponding math problem webpage.

There should also be standard pagination controls on the bottom of this section, allowing the user to go to the next page of the search results (this section is missed on the attached image file). Like:
Previous Page 1 2 3 ... 20 Next Page

5. My Problem Set

A section on the right with list of selected math problems. It is like a shopping cart on shopping websites.

This section contains:
* "My problem set" title on the top
* List of problems
* "Print" button on the bottom
* "Clear All" button on the bottom

Each problems in this section has short text which is just the first X characters of the problem, remove button and a "burger" section on the left that can be used to sort the problems.

6. Website footer

The same footer as on the http://wesolveproblems.org.uk/ website.

=============

Here is the list of problems to use in the design:
https://www.dropbox.com/s/3vdocserxhs0qxr/sample%20problems.txt?dl=0

Habilidades recomendadas

Winner

Publica un concurso similar

Comentarios del empleador

“Second time this designer provides the best (by far) design in our contest. Highly recommend him!”

vassiliphilippov, United Kingdom.

Principales propuestas de este concurso

nextdesign2007 India

0
nextdesign2007 India

0
nextdesign2007 India

0
pixelwebplanet India

0
jaswinder12345 India

0
jaswinder12345 India

0
nextdesign2007 India

0
ramjanali892 Bangladesh

0
Raya Link Egypt

0
pixelwebplanet India

0
vspassion7 India

2

Ver más participaciones

Tablero de aclaración pública

nextdesign2007
- 6 años atrás
Please check it Entry #22 .
- 6 años atrás
nextdesign2007
- 6 años atrás
Please check it Entry #21 .
- 6 años atrás
nextdesign2007
- 6 años atrás
Please check it Entry #15 .
- 6 años atrás
Organizador del concurso
- 6 años atrás
To everyone: please DO NOT follow design in my draft, just consider it as layout. For example ALL versions submitted are with boxes. I want to see a version where search results are not in boxes, like on Google.
- 6 años atrás
pixelwebplanet
- 6 años atrás
Check entry : #14
- 6 años atrás
SamySalman
- 6 años atrás
#extended #increaseprize and don't #Seal :)
- 6 años atrás
nextdesign2007
- 6 años atrás
Please check it Entry #11 .
- 6 años atrás
Organizador del concurso
- 6 años atrás
For everyone: please do not consider the attached picture as a guide for design style. Just general information layout. Please follow the website style guide instead.
- 6 años atrás
navuthakur
- 6 años atrás
Please #sealed the contest so that no one can cheat
- 6 años atrás
1. Organizador del concurso
  - 6 años atrás
  Done
  - 6 años atrás
navuthakur
- 6 años atrás
Please #sealed #sealed #sealed #sealed #sealed the contest. I am working on the design
- 6 años atrás
1. Organizador del concurso
  - 6 años atrás
  Done
  - 6 años atrás
vspassion7
- 6 años atrás
#sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed
- 6 años atrás
1. Organizador del concurso
  - 6 años atrás
  Done
  - 6 años atrás