Design math problem search result page

  • Status: Closed
  • Prize: $150
  • Entries Received: 11
  • Winner: nextdesign2007

Contest Brief

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

Recommended Skills

Winner
Featured Contest
Post a Contest Like This

Employer Feedback

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

Profile image vassiliphilippov, United Kingdom.

Top entries from this contest

View More Entries

Public Clarification Board

  • nextdesign2007
    nextdesign2007
    • 6 years ago

    Please check it Entry #22 .

    • 6 years ago
  • nextdesign2007
    nextdesign2007
    • 6 years ago

    Please check it Entry #21 .

    • 6 years ago
  • nextdesign2007
    nextdesign2007
    • 6 years ago

    Please check it Entry #15 .

    • 6 years ago
  • vassiliphilippov
    Contest Holder
    • 6 years ago

    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 years ago
  • pixelwebplanet
    pixelwebplanet
    • 6 years ago

    Check entry : #14

    • 6 years ago
  • SamySalman
    SamySalman
    • 6 years ago

    #extended #increaseprize and don't #Seal :)

    • 6 years ago
  • nextdesign2007
    nextdesign2007
    • 6 years ago

    Please check it Entry #11 .

    • 6 years ago
  • vassiliphilippov
    Contest Holder
    • 6 years ago

    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 years ago
  • navuthakur
    navuthakur
    • 6 years ago

    Please #sealed the contest so that no one can cheat

    • 6 years ago
    1. vassiliphilippov
      Contest Holder
      • 6 years ago

      Done

      • 6 years ago
  • navuthakur
    navuthakur
    • 6 years ago

    Please #sealed #sealed #sealed #sealed #sealed the contest. I am working on the design

    • 6 years ago
    1. vassiliphilippov
      Contest Holder
      • 6 years ago

      Done

      • 6 years ago
  • vspassion7
    vspassion7
    • 6 years ago

    #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed

    • 6 years ago
    1. vassiliphilippov
      Contest Holder
      • 6 years ago

      Done

      • 6 years ago

Show more comments

How to get started with contests

  • Post your contest

    Post Your Contest Quick and easy

  • Get tons of entries

    Get Tons of Entries From around the world

  • Award the best entry

    Award the best entry Download the files - Easy!

Post a Contest Now or Join us Today!