Progress bars to indicate user count & competition end date for mobile

Question

This is my scenario. I have a promotion that ends at a particular time. Only if the number of entries reaches a particular threshold will the promotion take place. So to users I have to show progress of 2 events, 1) Time to completion 2) How many more users need to participate for the promotion to take place.

How do I show this information in ios, Android mobile platforms?

A promotion is going to be a card view. There might be multiple promotions happening at the same time and in the screen we show multiple card views at the moment.

Answer 1

Would something like Kickstarter work?

Similar to your situation, they have to tell users:

• how close to funding they are (a function of money; users can be 1 to n)
• when the window for funding ends (the project has a fixed window to get the funding)

Where it differs is that it sounds like you need to show the minimum # of users needed; a graphic treatment could call attention when you're close to the required number ('Only 2 more needed!').

Kickstarter in mobile has a simple progress bar for funding, and a number to indicate days; you could even do a countdown hours clock when it gets below a day.

Answer 2

Although you say "I have to show progress of 2 events", I think the key to representing this is realising that one of these measures is "progress" (the number of users) and the other is a diminishing "resource" (time left). You could then potentially combine both measures in a single component:

^{download bmml source – Wireframes created with Balsamiq Mockups}

• The shading of the left-hand portion increases to show how close to the minimum number of users you have got (potentially changing colour from red to orange/yellow as it gets closer to the minimum). Once the minimum is reached, I don't think you need to graphically show by how much it has been exceeded (you'd just show it at 100% full, possibly in green) but you could continue to reflect the total count in the legend below.

• The width of the right-hand portion will decrease to represent the time remaining in which to attract users (again possibly turning from a neutral colour to orange/red as time runs out (assuming the minimum count hasn't already been reached).