UX / UI / Design System
Nunchee provides white-label technology and know-how to create and operate direct-to-consumer streaming services focused on sports content. It enables anyone to create a branded video TV channel online, along with native apps (Mobile and STB as Apple TV, Android TV, Chromecast, Fire TV and Roku TV).
Creating a Design System, building flexibility
CONTEXT
Nunchee has a global service for different kinds of companies, that has different kind of users. What in terms of design means, that our components need to be enough flexible for different business industries, different amount of texts, different fonts, color palette and UI.
At the same time need to be enough attractive as an unique and interesting product, and enough standard so it fit with different kind of industries.
It is a big challenge, but that make it interesting too!
As we improve our Fanatiz product, we also create new features for other Nunchee’s clients, so this new features need to be scaled to all the requirements defined before. In this case for commercial reasons, we needed to create ways to highlight discounts for the plans our clients offer to their users.
Original component for prices card in selected states
Different proposals for highlight discounts
In this stage we made the proposals on high quality prototypes as we already have all the UI of the product and we are not testing a flow, but a single element on a component.
Those components was tested on a use flow of the existing product, so we could check which component reflected in a better way the discount, the relation with the plan (monthly, per time, yearly, etc) and the clarity on the information hierarchy. Here we realized the last component was the most clear way to communicate to users.
Scaling the product:
For scale the product first we need to see how the components are responding with the default settings and the different color palettes.
And we have a not very good surprise.
So we design components that helps to standardize the different color palette with a grey blue palette, that helps to minimize all the noise produced between a neutral grey and different colors.
The components were tested with different color palette from active clients, and following specific principles uniqueness, reusability, clarity and consistency.
This is a part of the process to create a component, considering all the requirements needed for this product. The next step in this process is to scale the pieces for the mobile version.