A website for a fintech product, Humans.uz — a case study
Introduction
About the client
Humans.uz is a fintech platform and the product is a two-in-one: a mobile carrier and a finance management tool.
The brand is a part of an international company group — in the States, Humans have already launched an HR-tech product humans.net to help users find service providers for various tasks.
When we took the project on, the release was scheduled 6 months from the date.
Objectives
- To come up with the most appropriate design concept for a non yet existing product and create prototypes.
- To design a website that would go along with the product launch: from finding the visual language to thorough tuning of every animation.
- To design 2D and 3D objects for the entire marketing communication.
- To provide tech support of the website and adapt the pages to the rapidly increasing amount of content.
We’ve created a long-lasting multi-instrument that can scale and change.
Developing concepts
The website is the main entrance point for new clients, it had to be launched simultaneously with the product itself. That’s why at the concept stage we solved tasks like finding the key market message and building communication language with the broad audience.
During the workshop with the client we came up with 3 ideas and discovered 1 request. At first, based on the previously selected references, we discussed possible market positioning vectors together with the client. It allowed us to choose the messages we could convey to Humans’ users.
The second step was to create concept moodboards based on the chosen ideas, and ultimately merge everybody’s ideas into one.
As a result, we settled on the “Human for human” concept — developers created a product that works for people.
Ideas behind the final concept
First, we searched for non-trivial materials and textures of the objects. Then, we realized it would be best to mix abstract forms with familiar ones — like images of SIM cards and bank cards. That’s how we found the perfect composition: it’s gravitating towards the sphere shape and contains objects in one tone with different textures.
Using transparent glass material made the objects look lighter. Additionally, they have an aesthetic glare when animated and it allowed us to avoid using an additional color tone.
We’ve created over 20 variations of color combinations, analyzed several ideas and came up with a concept that works best with the name of the company and its essence — a prodict made by people for people.
Choosing key visuals — 3D spheres consistent of the objects that represent services offered by the company
We were seeking objects that would represent services through associations. We picked direct images and transformed them further through association chains. At this point, we also started our work on the key visual — which then came to be final.
Solutions used on the website
To complete the tasks at hand, we integrated a few features as part of the project.
- A UI kit to ease support services
The website had to be prepared for rapid changes, integration of new pages, large text blocks and addition of new objects. All design solutions had to be easily scalable.
To tackle this problem, we developed a UI kit with a strict system and rules of component use.
- On-scroll animation
To retain the user’s attention while they are scrolling the main page, we singled out conceptual blocks and divided them with a dynamic animated transition. It immerses the user into a structured and coherent narration.
- Plan calculator
We transferred the plan feature — the one that helps choose and calculate the best suitable cell phone plan — from the app to the website. An interactive prototype helped present the ideas for the future animations to the client and then hand them on to the developers.
We presented the app right on the website using the animation where a desktop screen transforms into one of a smartphone.
- Coverage map
We’ve designed the mobile networks coverage map. This allows users to make an informed decision while choosing a plan and selecting services based on regional network conditions. Apart from that, the map works as a navigator and shows the nearest sales and refill points.
- Blog
There’s also a blog section design based on a scalable and adaptive grid. The section is used to inform clients about the plans and special offers, to instruct on the service use and to share news reports.
The technologies used
We’re an in-house agency, but the development in this very project was done by another team. That’s why we’ve approached the selection of each solution with consideration for its potential realization speed and for the amount of confidence we had in it.
For instance, the design implies a great deal of interactive on-scroll elements. It was important to make them non-resource-intensive and ease the loading process as much as possible.
For this, we used only CSS-interactive animation with minimum JS, and tested the elements on whether it was possible to put them into action. We also added overlays that looked like parallax. They were divided into sections to make them independent from the content growth.
Also, to advance the website launch, we decided not to use React and WebGL for the 3D models. Instead we exported animated 3D models as videos with a transparent background to ensure they’d look detailed on the website.
The outcome
We designed a website for the new product and implemented SIM card and bank card order services. We also added the refill and transfer features.
Overall, we created over 200 of 3D objects for communication, produced a lot of designs and put in place new service sections.
After the launch we continued to oversee and support the project, adapting it to the new objectives and the evergrowing content.
What we have learned
- If the product’s design is “raw”, don’t be afraid to do more than the client asked you to. If your task is to develop the website only, make the most of it and elaborate on the slogan and the key visual. If the design concept makes sense from the start, the design you make will align with it and the whole product will remain consistent.
- Try to get to know your client and find out more about their expectations. The more you communicate, the easier it is to reach your common goals.
- Your design presentation skills are vital, because the client has to feel you are confident about the solutions you’ve come up with.
Check out the project and our Behance case. Stay tuned for more case studies by Red Collar!
