How we redesigned our home screen design

Carol Klassmann
Ton Design Team
Published in
5 min readFeb 7, 2020

--

I started working at Stone Co. during a transition period, one of their products, Stone Mais was now going by the name Ton. Stone Co. is a technology company focused on financial services and payment process, while Ton is focused on small businesses and self-employed persons.

Facing this challenge, our whole app had to be redesigned to both offer better features for our users and also to adapt to our new visual identity.

The first challenge on the rebranding was understanding and analyzing how we could change our approach to make our users’ lives easier and deliver a better product, since Stone Mais had a simpler goal, offering just the basics: a feature to sell products, sales reporting, and money transfer.

On our discovery stage, we did a benchmarking with our competitors apps to understand the features already available on the market, we also analyzed our users journey, and lastly but not least, we did multiple group dynamics to talk directly to our potential users, to understand their day-to-day hustle and what kind of features they miss.

The results

One of the main reasons self-employed people chose this life is to have flexible working hours, control over their responsibilities without someone on their neck and independence. Based on our personas studies and the results from the group dynamics we came to the app idea: an app that allows our users to manage their business on the palm of their hands.

Our new features

  • Sales through social media;
  • A catalog so users can add their products and speed transactions;
  • A calculator to better understand taxes on each sale or product and plan how much they should charge;
  • Choosing who pays the taxes in transactions paid in multiple payments;
  • A sales report with detailed information on each transaction and also reports on future payments.

These are the features we aimed for this first launch, besides the basic function of selling products, sales reporting, and money transfer.

Redesigning our prototype

Some of you may know about how a creative process happens, you can’t get too attached to the first version of your product or else you’ll get pretty sad when you find out there’s a ton of changes required from multiple different people, stakeholders, software engineers, and user’s feedback. You’ll have to manage these different inputs and find a common ground between them, focusing on your users, but not forgetting the business part of the product. We spend days, weeks and months designing, testing and getting feedback until a final design was chosen to be launched.

While doing a product the “final” version is the one you have to deliver due time and contracts, but I bet you will always look back and feel like you could do so much better if only you had more time. In an interview with Forbes, Kanye West talks about his many prototypes to get to a final version of Yeezy shoes and one interesting question the interviewer asks is “How many of these shoes are prototypes that will never see the light of day?”, and this was no different for us, we lost count of many different designs we did, some of them never were put to test.

Font: Kanye West And The Creative Process Behind His Adidas Yeezy Shoes | Forbes. https://youtu.be/Jbgkk1eVHaM

Team play

During the redesign process, we thought it would be interesting to show stakeholders and a few software engineers how design ideas came to life. We did a few challenges, Crazy Eight, How Might We and at the end, each person explained their ideas.

One of the main points we decided to use from the dynamics was using icons, emojis and different colors to make the app more friendly and intuitive.

New design

Our home screen is basically divided into three parts: the first one designated for checking your balance, the second one is sectioned in three tabs “Para vender” (To sell), “Para usar” (To use) and “Para crescer” (To grow), and the third part is destined for banners announcing new features.

The most important part is the second one because it is where we focused our features to enhance our users’ lives.

The final home screen design.

A lot has changed since our first designs, these choices were based on the concept of giving our user more control over his business. The division of features is based on hierarchy and importance to our users.

Since we’re dealing with a money-involved app we decided to allow our user to hide their balance, for safety reasons, besides that we focus on the available balance instead of showing all the figures.

To complete our total support to our clients, we have a chat available 24/07 in case they need something, the chat was designed based on our logo.

One of our first home screen designs and the most recent one.

Our product is finally out and is really gratifying knowing that this will help self-employed people and small businesses.

Thanks to Natalia Petrosky, Hugo Vinicius, and Renan, my partners in crime!

--

--