Challenge: How can I fit more text into the score slider and make the score feature more prominent without disrupting much?

Breaking down the current screen:

User action: uploads any photo/ clicks photo using the app

Responses on the same screen:

a. A score bar slides out towards the left from the top right side of the screen. Slides back in 4 secs. b. Loads three arrays for filters for transformation which are dynamic naming: 1.Vibe transfer 2.Art transfer 3. Alike.

The functionality of the Score feature:

Cornea Score: Dynamic in nature, gives you a score of your photo using machine learning. In simple words, it's your likes predictor/ Virality score. Keeps changing with every filter/ transformation.

My key feature on this screen is the score but it somehow doesn't stand out. How can I re-design this screen so that the score is more prominent?

enter image description here

1 Answer 1


Make elements stand out by having a clear visual hierarchy in your design.

You can do this by using for example a very clear contrast between the element you want to stand out and the rest of the design. Other options are animation, size and positioning. There are more of course.

Here are some options I thought of;

  • Give the score card a color with more contrast in comparison to the grey UI, for example green or red.
  • Make more use of animations. You say the score card slides into the display. Maybe you can let it bounce, or use secondary animations.
  • Increase size. You can increase the circle and put text under it. This also solves your problem regarding the extra text.
  • Change position of the element that has to stand out. Do you want users to interact with the score card? In that case you might want to place it close to a user's thumb (bottom half of the screen).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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