6

our saas web application has 30 days subscription model. we don't use the auto-renew subscription since the user can complete his mission within those days and if not to manually extend the subscription.

I'm now working on this feature, where the user can renew his subscription. the renew option is available from the last 7 days, before the last week he won't see the option.

I've created a mock which I don't really convinced that it's delivering the feeling of "click on me" to renew the subscription.

the flow for renewing the subscription is a modal, so once the user clicks on Renew, a pop with 2 steps will be open.

this is the screen layout, I am clueless about the other possibilities on where I can put the Renew button. The current location is the must logic location I could think of.

I guess i'm trying to check two things:

  1. do you think the user will understand the Renew is clickable and will open a new flow
  2. do you have any other ideas on where/how the button should be?

Thanks a lot

enter image description here

UPDATE Ok, so I re-think it. since it's either complete the mission or renew the subscription (in the use case of last 7 days left to subscription), I thought about this option: enter image description here some comments:

  1. I wanted to use a different color for the renew option but I have the style guide as a constraint since we don't have any other colors that represent a button. we use Green or Blue
  2. we use flat buttons also in other places in the application which are also opening new flows on popup
  3. I think that these two actions are related so it's better to have them closer to each other.

OK, so this is the final solution. it is a combination of @Alveros' inputs, material design and our app language and design

enter image description here

Improve this question
6
  • The renew label which is orange does not look clickable. There is only one button which says "submit results" - Its not clear what results the user would be submitting. I can see that there are 3 tabs on the page. Also I am not sure if this is just a typo but there is one bit that says you have "5 days left" then another that says "35 days left". I also think If you are renewing then there could be a check box that allows the user to auto renew as it saves them the hassle of coming back in to renew each month or quarter
    – Andrew
    Feb 6, 2017 at 10:27
  • In your second suggestion the "Renew Subscription" button/link is very close to the "Submit Results" button. A lot of people will probably click on the wrong button, or at least be nervous clicking in case they click on the wrong button.
    – micheal65536
    Feb 6, 2017 at 12:24
  • Does the "Submit Results" action finish the mission so there is no need to Renew anymore?
    – Alvaro
    Feb 6, 2017 at 12:36
  • 1
    @alvaro exactly. submit result you can do anytime within the period of the active mission, whereas the renew subscription is available only in the last 7 days of the subscription. once you have completed the mission, you don't need to renew the subscription. so if the subscription is 30 days long: the first 23 days the user see only the submit results button the last 7 days the user would see both buttons
    – noadavi
    Feb 6, 2017 at 12:41
  • 1
    yes. the right corner shows the countdown until the end of the mission while there is a number of days left of subscription in the summary row of the mission
    – noadavi
    Feb 6, 2017 at 13:03

2 Answers 2

Reset to default
6

About the updated question:

Placing both buttons one on top of the other might create confusion. The user might think one is the dismissive of the other, when it is not the case. You can give more emphasis to the Renew action, but I would leave it in an specific Renew section. Instead of using the same wording (days left) for the subscription I suggest using something different.

This image is a suggestion of the previous points in case it helps.

enter image description here

The problem I see is you are using a flat button in between several text elements, so it is not identified as a button. You can place the button of the same size/form of the "Submit Results" one you have in the image, a bit to the right of where it is now. You might need to use two lines for "Subscription days left".

5                _______
SUBSCRIPTION    | Renew |
DAYS LEFT        -------

Also, try to place the content related countdown (on the right now) next to the title, so it is understood better and not mixed with the Payment countdown.

Material Design - Raised buttons

Do.

Raised buttons stand out more than flat buttons.

Don't.

Don’t use flat buttons in UIs where they would be difficult to see.

Improve this answer
1
  • It's a pity that the apps section of the Android settings doesn't actually look like that.
    – micheal65536
    Feb 6, 2017 at 12:25
0

Your dilemma is right, the current "Renew button" doesn't really deliver the feeling of "click on me" to renew the subscription.

The problem here is button's flatness, its less catchy color and information on it. Have you considered replacing it with a more attractive color with actual CTA?

Here I came up with a solution including a little modification in your current Mockup.

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.