Design math problem search result page

  • Status: Closed
  • Prize: $150
  • Entries Received: 16
  • 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 [login to view URL] 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 [login to view URL]
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 [login to view URL] website.

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

Here is the list of problems to use in the design:
[login to view URL]

Recommended Skills

Employer Feedback

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

Profile image vassiliphilippov, United Kingdom.

Public Clarification Board

  • nextdesign2007
    nextdesign2007
    • 4 months ago

    Please check it Entry #22.

    • 4 months ago
  • nextdesign2007
    nextdesign2007
    • 4 months ago

    Please check it Entry #21.

    • 4 months ago
  • nextdesign2007
    nextdesign2007
    • 4 months ago

    Please check it Entry #15.

    • 4 months ago
  • vassiliphilippov
    Contest Holder
    • 4 months 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.

    • 4 months ago
  • pixelwebplanet
    pixelwebplanet
    • 4 months ago

    Check entry : #14

    • 4 months ago
  • SamySalman
    SamySalman
    • 4 months ago

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

    • 4 months ago
  • nextdesign2007
    nextdesign2007
    • 4 months ago

    Please check it Entry #11.

    • 4 months ago
  • vassiliphilippov
    Contest Holder
    • 4 months 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.

    • 4 months ago
    1. AquimaWeb
      AquimaWeb
      • 4 months ago

      Can i use the same layout?

      • 4 months ago
  • navuthakur
    navuthakur
    • 4 months ago

    Please #sealed the contest so that no one can cheat

    • 4 months ago
    1. vassiliphilippov
      Contest Holder
      • 4 months ago

      Done

      • 4 months ago
  • navuthakur
    navuthakur
    • 4 months ago

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

    • 4 months ago
    1. vassiliphilippov
      Contest Holder
      • 4 months ago

      Done

      • 4 months ago
  • vspassion7
    vspassion7
    • 4 months ago

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

    • 4 months ago
    1. vassiliphilippov
      Contest Holder
      • 4 months ago

      Done

      • 4 months ago
  • AquimaWeb
    AquimaWeb
    • 4 months ago

    Wait for my entry please, thank you.

    • 4 months 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!