UI deliverables to Fron-end developers

No doubt that giving your users the control over what they can see in your app/website make them more engaged and attached which lead them to use it more. Also, giving the same authority to brands (if you’re designing multi-branded e-commerce for example) will lead to a great business impact.

But having such an option won’t always lead to a consistent user interface and maybe affect some vital information too.

Lately, we’ve faced a business problem with our customers in ShopX app that brands needed their identity to be more exposed while doing so would lead to a failure for our own identity. So we decided to study some items that a brand could use their colours over it and get their identity exposed through.

Monginis’ page on ShopX app

After building the page, distinguish between what’s ours and what should be changeable, and make sure it’s balanced. we had four items that belong to brand as following…

Brand logo for sure…
Cover image, Filled road, and City doodle

We faced no problem with brand logo as well as cover (maybe a little with the cover actually). The real problems were really with the road and city doodle. so, we decided to depend on one layer, only one change in one layer that changes the whole colour theme for each brand. and that colour as you may have already guessed is the background.

Actual page layers in order
  1. Background: The one and only control layer that front-end developers need to make it changeable. It affects the photo, road, and city doodles.
  2. Photo: With a “multiply” blending mode we managed to make it more into the brand’s main colour. (Brands don’t usually use proper colours in cover photo so we needed to find a solution for this as well)
  3. Map: With gabs that representing the road in each of its cases (3 cases) we managed to colour the road. And using 60, 75 and 80% values for the city doodles 3 layers -in order- we managed to make it adaptable, too!
  4. Rest of page elements on top of all changeable layers

Finally, we now have a page that adapts to any of our lovely brands…

Hope it’s useful for your next project. and if you faced such a situation in the past please tell us how you managed to handle it 😄