From branding to interaction, a fintech end-to-end project in Sketchin
Sketchin
Here I’ll try to explain my first end to end project in Sketchin. I started working here in September 2017 and few months later I got the chance to work on a cool project involving service design, branding and interaction.
Sketchin is a smart design firm that shapes future experiences, today we’re around 100 people, working in different places around Europe and US, and counting. We work in both big service design project and small interaction ones.
I’ll describe the experience from our point of view, what we did wrong, what we did right, what was unexpected and the final results, even the ones the client rejected.
Sketchin is a multidisciplinary studio and we work in teams and pipes. A team is formed by 2 pipes of 2 designers each and an architect that manage the connection with the client and the consistency of the project itself.
Brief
In late 2017 we’ve been contacted by a group of people that asked us to help them design a new fintech service. They already run a similar service in Russia and they wanted to expand their business in Europe first and South America later.
The idea is pretty simple, designing an instalment card service that will let the user to buy everything just paying in instalments. The service works on agreements with partners shops. No fees or extra costs for the user.
The whole project took us exactly 2 months of an interaction designer (me) and a visual designer (Gabriele Demarin).
Ok, well, I’ll try to explain the service in few words. It took me weeks to get it but I’ll try to transfer all my knowledge to you in just 30 seconds. If you don’t really care about how this stuff works just skip this paragraph, you’ll understand the rest without any problem. (It’s like watching the new Blade Runner without the old one, you get everything)
I’ll try to explain this using my friend Rachel. She has a salary of 5 and a limit of 10 (the black triangle is the limit, spoiler, it moves), we’ll take a look about 4 months of use of the service as described in the chart.
The first month Rachel buys a TV that costs 6 with a 3 months instalments (2 per month) and at the end of the month she pays an instalment of 2, now the limit is 6 because he still has to pay 4.
The second month with a limit of 6 she spend 4 (green instalment of 4 months) for a n iPad, so during the month her spending capability is reduced to 2 but at the end he pays 3 instalments so she free the limit till 5.
The third month she spends 5 for a really cool pair of headphones and the limit goes to 0. At the end of the month she pays 4 instalments so the free 4.
The fourth mont she doesn’t spend anything so from a limit of 4 she goes till 6 because she pays an instalments of 2.
To sum up, Rachel has a limit (10) and can fill it with as many instalments she wants, every time she pays an instalment the limit become free again of the same amount.
Define and understand the experience
What I explained in the last paragraph looks pretty simple now. Well, it wasn’t when we started the project, actually took us quite a while to perfectly understand the concept of the service. The first thing we did was to set up a 2 days workshop with the team (from now on the team is the client + us) to understand their idea of the service.
Visual exploration workshop
Gab and I got this project and the first thing that came up in our mind was that we didn’t know so much about the service and the context. We didn’t know anything about instalment cards (they are not so common in Europe) but we had a strong knowledge about fintech industry thanks to other projects we had in Sketchin. We had some experiences working with Russian but we didn’t know so much about their visual taste. Well, if you don’t know something there is only one thing you can do, study. We took few days to make a massive research in the industry, we didn’t choose only other instalments card but we opened our research to the whole fintech industry in order to understand the market and the players.
We met the team in Milan and in a 2 days workshop we defined with them the visual strategy to follow. We asked them to spot the strength and weakness of every brand we found in order to understand their taste and idea.
Using other brand as an inspiration we helped them also to figure out the main pillars of the service we were designing, what came out was at the same time simple and so powerful, it helped us a lot to shape the service along with the value proposition that we ask them to write down. It’s always interesting how different people from the same project and team get to different conclusions when you ask them to create something real about their service. Asking them to fill the value proposition without talking to each other helped us to get to one shared idea of the service avoiding misunderstandings and wrong expectations.
Customer experience workshop
What I explained in the last paragraph took us only one day and we had the team in Milan for another one. At that point we had a clear view of the visual expectations, the pillars of the service and a shared value proposition. What we needed then? Easy, understand how the service works. We knew they had something really similar running already in Russia so we decided to map out that service in order to:
- Understand how the service works, trust me, it’s not easy at all for an European
- Pin out the needs of the user in the as is
- Find out pain points in the flow to create new opportunities to explore
Design the experience
What we did in the first 2 days workshop helped us to understand and better define what they asked us to design. The pure phase of research now ends to leave the scene to a more operational one.
Design strategy
Thanks to the insights and design opportunities identified during the previous activities, it has been possible to elaborate a series of guidelines that will be fundamental to:
- build a product / service design strategy and its possible future evolutions;
- validate the design assumptions in order to start the design process.
Naming
Based on the workshop we had in Milan we investigated different paths in order to come up with names with may backgrounds.
We followed 3 main paths, an English one, using English roots to have internationals names. A Russian one, we took words from the Russian world making them more international and recognisable and a Latin one, taking something from the past in order to create unique names.
Designing a name is not just a matter of creativity. Numbers are involved too. We used an analytic approach in order to explores different paths and to have quick feedbacks on the names we found. On top of this for every names we came up with we run a check about web domain names and brands.
After the first batch of names we collected many feedbacks from the client and we focused of some names creating derived ones and also on few new ones. We came up with 7 new names and a new survey
The client really liked the SOLVO one, they thought was really on point and perfect for the user, but it was too high, too unique and we were worry about being perceived like something not approachable for everyone. So we kept the root and we changed the end, from Solvo to Solvy to be more friendly and catchy.
SOLVY is the chosen name from the client, friendly and catchy
Co-design workshop
After few weeks they came back in Milan and we had the chance to get them for another couple of workshops. We met them with the customer journey “as is” and together we mapped out again the whole experience, this time creating a “to be” scenario. No limits on the ideas, we wanted to create a real ideation moment, forgetting everything about costs, feasibility, time and technology. The result was really impressive, we collected more that 100 ideas about how improve the user experience.
Of course you cannot use all these ideas and you need to drill down to something that the team could achieve. If putting a challenging goal is the best you could do to engage your team, putting impossible ones will have the opposite result. We used a board to create a prioritisation canvas with customer value on one axis and business value on the other one. Every idea we put on the upper right space is something the team has to follow, everything on the bottom left part is something you can forget about.
So now we now what is a must have and what is not. We still don’t have a clue about what is feasible and cost wise doable. That’s why we took all the ideas and we validated them on a validation chart, from easy to hard to do we put every post it having a better clue of what is important to do and how easy to achieve it is.
The overall result of this 2 days activity is the customer journey to be, an big level flow of every step the user has to do in order to use the service, it’s divided in 10 phases:
- Discovery
- Onboarding
- Engagement
- First purchase
- Post purchase
- Use
- Billing
- Profiling
- New limit
- Offboarding
Branding and visual language
Well, this, along with the naming phase was the most difficult to achieve. It’s really easy for a client to have an opinion about a logo or a name, so we expected somehow to spend some effort on top here. We designed some different logos keeping in mind our target, someone in the mass area that wants to use an easy and free service. They need to trust the brand and see it approachable, not too far away, not too exclusive, not too elegant.
The final logo has a fresh, modern and trustable design that expresses not only the innovation of the service but its human side and at the same time its reliability.
The shapes of the positive and negative spaces of the logo creates a large variety of possibile declinations of the logo itself.
The smile can also be used during animation processes in order to express sentiments that can emphasize with the user.
We designed the card as well. We used the logo in different shapes and colours in order to have a process that a single design. Every card it’s unique but still recognisable.
The smile that been used as the shape to design the merchant sticker. This solution in perfect for an immediate impact being also very recognizable.
A full brandbook has been designed in order to give all the needed info to use and develop the Solvy brand. Card design, App design, icons, logo usage, fonts and typography and colors all in one book.
Let’s go to Moscow in February ✈️ 😱 ❄️
Exactly after having designed all this stuff we went to Moscow. The client asked us to present everything we did to the investors. We had 3 days (weekend of course) to setup a keynote and to fly to Moscow.
Well, can’t go deep in details but that was the hardest presentation of my career. Moscow is beautiful but -20 degrees all day long can be annoying sometimes.
Mobile app
The client asked us to design the whole flux of the app, without going so deep as a screen flow but giving them all the tools to be able to do it. That’s why we created the app flux that investigate every single aspect of the app without describing details like buttons or interfaces. We also designed a single section of the app in detail in order to give them an idea of the layout and interactions. These two tools together are everything you need to create a great app.
App flux
Visualize and explain in details each aspect of the offered service for each use cases. The flow allows all the actors involved to have an overview of the offered service and its ecosystem and gives a detailed map of the Solvy app interface and functionalities. This is a mandatory deliverable to design the App screen flow.
We designed a strong and flexible Sketch library to be able to handle such a map. Every step is inside an iPhone outline to better convey the idea of the app, a section label on top help the reader to understand the area of the app, a number on the top right corner is mandatory if you wanna do a remote review with your client on a file with 100 screens. We also used some interactions between a step and the others just to give the idea of the way we expect the user could interact with that area.
Interface
The app is the main touchpoint for the Solvy experience. We designed it keeping in mind the pillars: usefulness, good communication, simplicity, convenience.
We designed the dashboard, a section of the app where the user can see all the data about the money he/she’s using with Solvy. The dashboard has 3 sections, one is the past where all the expenses of the previous months are stored, divided by categories helps the user to figure out where he spent too much. The present is a section with the list of all the expenses of the current month and the future is the last section with the prevision of how much will be the next rate. The idea behind this is to empower the user giving him/her info about what he did in the past, what he/she is doing right now an what to expect.
When we design something we have a responsibility as designers. We are not only responsible for the good design of the app, we are not only responsible for the service to achieve its goal. We are also responsible of creating something the user will understand and in case of a fintech service we are responsible to not trick the user and to help him/her to use his/her money in a new way that will be helpful in his/her life. That’s what we tried to do with Solvy, designing a fintech service with a social responsibility.
I tried to keep this post short, there are hundreds of other things to tell about this project but here I explained the main activities we carried out. If you have any other question about what we did and how, just post a comment, we’ll be happy to answer you or catch up with me or Gab on Linkedin.
