Platform Customisation System
- Scope Mobile, Desktop
- Role Lead Designer
- Tools Sketch, SASS, After Effects
- Duration 2 Months<
Fronhub is a part of the B2B betting platform. A skinning tool that allows to skin/customise web applications to match the client’s needs.
The customisation process takes too much time and is usually done manually, so most of the process may be simplified and automated.
Based on initial stakeholder interviews, we isolated three key directives we shall pay attention to. 1. the color customization to fit the partner’s style and branding. 2 Modularity allows the client to add or subtract modules to get the desired product. Three the localization, so no matter where the client will be operating, the outcome would stay localized and fit the market.
After the prioritization session, we decided to concentrate on the color management aspect of the system at first. It would allow us to integrate and test the outcome without additional stress for existing users, and color management would easily incorporate into the current system.
As the product was so specific and had no direct competitors, I’ve decided to go a bit experimental.
I have guttered two interview groups, and each of them had different goals. One should have described the best process of achieving specific tasks, and the other has to be evaluating that approach. During all the research, I have observed and logged steps and resources have been used as references for each percipient. This way, I have defined some referential borders.
After that in dept, interviews have been started to get insights on day to day problems the user may face in the current system
Based on assumptions, We ran interviews with 13 users ( 5 current partners, 5 account managers, and three sales managers) looking for goals, needs, and pain points.
- When you require changes, how long it takes to receive fixes?
- What kind of requests have you require.
- How many iterations does it take to meet a good result?
- Would you customize the application by yourself if there was a way?
2-3 weeks till the final implementation
- color changes
- custom application instance, personalized for a new partner based on partners branding
- text size change
up to 6 iterations till the final implementation
I would love to as it will allow demonstrating the product on the go.
I would like to have total control over the product’s appearance.
I would instead pick one of the predefined templates.
We isolated two types of roles ” tinkerer” and “Chooser.”
Time is a factor. Most of the requests took a lot of time to accomplish
We need to provide a way to select existing templates.
After a qualitative examination, there three possible proto-personas have been defined.
The users are spending too much time requesting customisation for the product.
The customisation process involves too tinkering with the colors.
Even predefined solutions took additional time to deploy
A way to make simple changes on the go
An easy way to customise application on his own without diving deeper into color theory.
A way to access existing theme templates.
During this stage, we ideate a bunch of possible ways to solve the mentioned issues. Prioritized solutions are listed below.
Achieve two levels of control?
- We may create a system that will build an entire color scheme based on a couple of colors for users that do not like deep tinkering ana in the meanwhile provide the ability to control entire color connections and schemes for a tinkerer type of users.
Allow user to customize app manually?
- We may create an additional UI panel inside the existing back office with customization capabilities
Offer to provide template variety to a user?
- As a start we may create a couple of predefined themes for users to start with, we may give the ability to make themes private or public on the creation and store all public themes in the “themes” library any user may apply on their platform.
We shall provide a web application that allows the users to select a theme template and/or customize it manually.
The application shall provide complete control on the color of each element, while the whole application should have the ability to be customised entirely by using one or two colors.
We may provide two levels of customization, auto and semi-auto, to match both types of users.
We could create a templates library based on actual themes and enlarge it with each new theme creation.
In this stage, we started by defining user tasks and user flow in the meanwhile, we concentrated on searching the technology that would suit our needs best as, the design vise, not only the experience of the customisation system user shall be smooth, but the final platform’s performance should not be affected badly. And the new product versions should be started development within new customisation system technical constraints.
During my research, I came up with a simple prototype that I wrote on scss that would accept color and then iterated it based on simple saturation and brightness shifting algorithm to brighter and lighter shades for primary and secondary color variants and desaturate then quantize it for typography. That became a base for the next steps.
Then I have developed a simple test design system, and a brief guideline of color variations use for peers to enlarge the system if needed.
After the launch, we had 64% positive feedback from the management unit and 40% positive feedback from the partners. In this situation, it was a massive success as we optimized internal processes a lot by reducing the pressure from the engineering unit and allowing the sales managers and account managers to work more efficiently by introducing potential and existing clients to the offered solutions or requested solutions branded and ready to use.
I have enjoyed working on this project a lot, while the project itself was very voluminous in terms of technology, tools, and unique research approaches.
First time in my experience, one of my algorithmic solutions took its place in the final product.