Clear Investments is a Brazilian broker app that allows you to invest in fixed and variable income free of charges; it’s also the app that I chose to invest in the beginning of 2020, after it was recommended to me by some friends.
After a few days using it, I had three motivations to redesign the app:
- Usability is a big issue and it takes too much time to learn how to use it. The user always needs to be sure about what they’re doing; When the app is dealing with your money, even more.
- The app doesn’t look good at all, and apps with bad visual design tend to be harder to trust. When I started using it, I transferred a very small amount of money until I was sure it was trustworthy.
- I wanted to improve my skills with Sketch since I would be using it for my new job.
My design process is not very different from most, although there’s one thing that I try to apply to every project I work on: Learning. You’ll probably always learn something, but including this step in the process and taking time to summarize and think about what you’ve learned, at least for me, is a better way of learning.
I started this project by analyzing my friends’ opinions and comparing theirs to mine and wondered if more people agreed that there were problems. For that, I checked the reviews on Google Play Store. Unsurprisingly, a lot of people feel the same and apparently the product has lost a big number of users based on those reviews.
Must improve the UI Design and some functionalities. Sometimes I get confused with the usability, and there are also moments I have to deal with instabilities.
Need improvement with user experience when it’s about checking my money, and sometimes it doesn't give a explanation why you can’t place a buying or selling order.
Interface looks bad and usability is even worse.
In addition to the comments above, many others talked about problems with displaying information, uncertainty about usability, and bugs. The app has more than 14,000 reviews, with an average rating of 1.8⁄5.0–the lowest rating app I’ve ever used. I realized I would never use it if it weren’t for my friends’ recommendations.
And as mentioned as one of the motivations for this redesign, the app doesn’t look good. It’s not attractive and lacks clarity and consistency among other issues.
Define & Ideate
I mapped the app screens and functionalities and chose which ones I would cover, based on what would be enough to explore a good variety of user interactions and UI elements.
After a few notes and drawings, I moved to Sketch and started the high-fidelity screens.
Starting with the high fidelity prototype, one thing was holding me back: Clear’s logo. The typography is bad, the “flower” is complex and doesn’t communicate anything. I didn’t take me too much time to make a proposal which brings better colors, a modern and minimalist symbol with a letter C in blue, and the name written in Helvetica.
I enjoyed designing the high fidelity prototype and I’m proud of the final result. They’re light, clean, and highlight what’s important on each screen.
Here are my key learnings of this project:
- A fast release fast is important, but bad reviews can ruin your product’s chances of being found and adopted. Clear will have a hard time trying to revert that 1.8.
- As I was designing more and more screens, maintaining visual consistency was taking more time. Gladly I made good use of Sketch symbols. Design Systems are important and all the time invested in them are worthy for bigger projects.
If by any means it can be useful, here’s my Sketch file for download.