We have an app that lets users modify their face as they are taking selfies.

Under the Beauty option, users have the option to Smooth their skin, add Lipstick, edit Eyes, etc. The user can see in real time how these changes happen in their selfie.

Smoothing skin offers a simple slider to calibrate level of smoothness. Lipstick, Blush and Tint allows users to choose a color and calibrate opacity.

However, eyes is more complex. In addition of choosing eye color and opacity, users can also choose to (1) Whiten or (2) add Details and adjust how much with the slider.

enter image description here

We want to reduce the introduction of new UI levels / components to keep the experience as simple and consistent as possible.

So far we have tried 2 approaches:

A. Show Whiten and Details within the color menu level. What the slider controls changes per user selection (whiten = adjust whiteness, detail = adjust level of detail, color = adjust opacity of color).

enter image description here

B. Introduce an accordion within the main menu which expands to show the second level of options. This solution seems more novel, however the transition of having something expand + color menu show up might be too busy for the user.

enter image description here

What are your opinions? Other pros and cons you can think of? What’s an alternative solution to consider?


1 Answer 1


There are different ways to solve this problem, here are a few ways I can quickly think so while keeping the dev effort minimal, but the experience intact:

( Level 1 refers to main menu with smooth, lipstick, blush, eyes, etc.,)

  1. We can split Whiten Eyes and Detail Eyes into different sections in our level 1. This way the UI remains the same + The user is clearly told what to expect at first level + no extra dev effort.

  2. If this is a common pattern that is going to come across, then option 1 might not be viable as we might end up with too many level 1 items. Which can be overwhelming for the user. What we can do in that case is - when the user clicks on eyes > we can take the user inside to a different ui where the level 1 items are replaced with whiten & color and a back button near this bottom sheet to go back to level 1 + the colored circles & opacity. This again gives enough clarity to the user without overcrowding the UI. We have to design the interaction animation smartly so that the user knwos there is a back button which is new - so that the user doesnt feel lost.

Pros and cons with your options.

Pros: both options are clean. both options solve the users problem both options is right on the user & they wont miss it.

Cons: option 1 clubbing the colored circles & whiten+details - now if the user swipes then these options are swiped to the left - now they have to swipe back to change either. It is not usable in all scenarios.

option 2 i dont see a problem other than scalability & its crowding the ui in a small space.

Hope it was helpful :) Thank you for posting this here.

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.