Hints Animations

EN

Nelogica

Understanding the Challenge

The challenge presented by Nelogica, a company operating in the financial market sector, concerns their software called Home Broker, which enables users to buy and sell assets on the Brazilian stock exchange (B3). Within this software, there is a charting feature where users can conduct analyses on assets. However, there is a lack of clear tips and information to assist users. The task involves redesigning these hints to incorporate visual elements that aid users in charting.

Therefore, I utilized the Double Diamond framework to better organize the activities and facilitate communication with the developers and stakeholders involved in the project.

Discovers

During this stage, I began studying how each hint in the study toolbar worked, whether there were any missing tools, any descriptions that could be incorrect or confusing. The idea was to understand where we are to think about where we are going. One of the discoveries was that there were indeed some tools that did not have a complete description and could lead the user to make mistakes.

After this stage, I looked into competitors and how this functionality was used in the technology market. The main reference I found was Adobe Photoshop, which has a similar functionality to what I was thinking for the Hints.

After learning more about this feature, I noticed that some users complained about it, mainly due to the difficulty in deactivating it. Therefore, the idea would be to implement something similar but invest in good animations and have the option to deactivate the feature clearly displayed.

Definitions

With this information collected, I created a presentation and invited the programmers to discuss it, gather their opinions, etc. In a conversation with the developers, the idea was approved. It would be necessary to design animations for 50 chart studies. Due to my ease in animating objects in Figma, I opted to use it to perform the task and export them as GIFs, as requested by the programmers.

Development

During this stage, the main objective was to study more about how each chart study works, how to correctly insert them into the chart, and any tips and tricks that could help. The goal was to understand their use to create the animations accurately.

With this study done, I began creating animations for a first study for testing, drawing each element and creating its variations.

With the animations completed, I began thinking about how the new layout would look. I concluded that small adjustments would be made so that the GIFs could be displayed in the hints, and this would be the new hint for each study:

With this layout and animation completed, I went back to talk to the developers, and they liked the idea, thus finalizing this development stage with the approved redesign.

Deliver

With all the deliveries aligned, this stage was about delivering the animations for each chart study. Since there were a total of 50, I initially agreed with the developers to deliver them in one week. However, as the task progressed, I saw an opportunity to increase my productivity by reusing some animations. As a result, I finished all the animations in about 4 days. With the deliveries tested and completed, I monitored the development of the feature by the programmers.

Conclusion

With the implementation of animated hints, it was possible to enhance the user experience in Nelogica’s Home Broker software. By utilizing UX and UI techniques, we redesigned the hints to incorporate visual elements that assist users in charting. We created clear and precise animations for each chart study. The result was a more modern and visually appealing layout, along with improved usability and comprehension of the studies for users.

PT

EN

PT

EN