Zesty

Zesty is an application that allows you to buy stocks, crypto, and ETF. It is a Chilean application, very similar to Robinhood. Still, it will enable Chilean users to easily make these purchases and get profits, transferring them quickly to the users' current accounts.

Role

  • UI Designer
  • UX Designer
  • Graphic Designer
  • Frontend Developer

Duration

  • ~12 months

Tools

  • Figma
  • Figjam
  • VS Code
  • Stripo

Deliverables

  • Responsive Landing Page
  • Responsive Mailings
  • App Design

Context

I came to work at Zesty because I have worked on several projects with one of the founders, and he asked me if I was interested in working on this project. They told me that they had in mind an application for investing in Stocks and that they needed a landing page design to start with.

Landing Page

They introduced me to the brand they had built and told me they wanted to create a simple landing page that would communicate the essence of Zesty by explaining what it is and how it works. The challenge was to find the right tone of communication from the brand book they had shared with me. Besides designing the web page, I had to program it... so I put on my Frontend hat and started to code the page, but many details and micro-interactions appeared that I didn't count on when I started the project.

We wanted to show, through a slider, essential sections of the App. We faced some challenges in making this happen because we wanted to clearly explain to the users the main benefits of the App. Also, the screen layout was something we cared about, so we used the famous Slick.js slider in this section, with some adjustments. It wasn't easy to select which screens needed to be here. Still, after some iterations, user interviews, and testing, we realized that the core things the user must do in the App to operate were: the easy sign-up, the share acquisition, and the main wallet.

There were things that I knew I couldn't solve with my web knowledge at that moment, but researching and iterating a lot with the client got me in the right direction. We added effects to buttons, floating images, text that changes every 5 seconds. You can see the stunning result here.

Mailing

After finishing and publishing the website, I had to design and code the informative and transactional mailings of the application. These emails will arrive to the users after they sign up and operate within the platform, so it was essential to clearly show the correct information to the user. I had to design, cure the content and code the emails making adjustments in the HTML so that they would work on mobile and the information could be seen correctly.

App

After the first part of the project, they introduced me to the App and its usability problems. They had built a skeleton following the standard of some investment-related apps, such as Racional, RobinHood, and eTrade, and they needed to customize their experience. The first big challenge was finding the right way to communicate the brand within the App, so we refreshed the App since its architecture was good at this stage.

The next big challenge was to improve the enrollment process. In several tests, people were not completing the registration process, and they said they needed more information, like how much time was left to finish the process and if they could finish it later. So with those insights, we worked on an idea highlighting the process through steps or stages completed, explaining through iconography which step in the process they were and how much is left. Also, we let them know that if they left the procedure in the middle, the progress would be saved.

This greatly improved the signup conversion, and we received excellent feedback. Although the enrollment process has many steps, they are all mandatory, and now it is easier to complete than before. The App is constantly updated and evolving, but we are thrilled with the results.

– 28-09-2022 –