Tickertape- Design is the key to communication, How? 🤔 (Part-2/3)

Design is a part of the process but the design itself follows a process which focuses on communicating the ideas to the user visually. To keep up with the reference, I’d like you to please read the previous post of introduction.

Well, I am not gonna bore you with the usual design process, but I’d like to talk about important aspects of the process while we were at it. Here we go:

• Understanding users: Providing a positive financial experience not only entails offering valuable product features and thoughtfully designed functionalities, but it also requires taking a deeper look into the behavioural patterns of the people who will be using the product at the end of the day. Hence, we are trying our best to create a product that can help improve the way people perceive finance as a domain.
• Information architecture: When interacting with any digital product, the user builds a mental model in their mind. This model should answer how to implement a particular flow, or where to look for what information. The basis here is the navigation and the information block of the product so that the user can get an idea of the structure at a glance. We added frequently-accessed tabs: Search, Watchlist, and account.

• Foundation of Grid System: We have used the 8-Point-Grid system where we used multiples of 8 to define dimensions, padding, and margin of elements to maintain consistency throughout the app.

Typography:

• Font selection: Fintech apps comprise of a lot of numbers. While selecting a font in such cases, there are a number of guidelines that we considered. For example, check the symbols of the font like ‘₹’, as well as design for an individual figure. Since finance revolves around a constant change of numbers and figures, we also kept in mind that the chosen font is flexible in compact spaces, without affecting the legibility. Thus, the font we chose was “Graphik”.

• Setting up Typography: Maintaining consistency and sticking to logical hierarchies ensure that elements in the UI are clear and easily recognizable when scanning the page. Text sizes, styles, and layouts were selected to balance content and UI.

• Defining Visual Language: The data-heavy UI has to emphasize presentation and be as informative as it gets. That’s what we tried to pursue by focusing on the important pieces of styleguide.
• Colour palette: When working with muted colours, it is critical to create shade variations based on the desired contrast level. Since we wanted to keep the entire design minimal, clean, and fresh, we chose “Charcoal Grey” as our primary colour. The selection of a meaningful palette underscored Tickertape’s brand values and helped the identity take a more rich and ownable position. The primary colour shades were inspired by the leading masters of design in the market at that time. The bright colour group was added for accents and attention-calling elements.

• Illustrations: We knew that illustrations play a key role in the brand’s visual language. Characterful illustrations allow depiction of a more conceptual subject matter, which add a valuable layer of interest to the design pieces. Few of the illustrations with which we started are here:

• Data Visualization: Data visualization helps in presenting data visually appealing so that comparing and figuring out prices along with volatility becomes an extra smooth process. Basically, the focus has to be equally divided among the content and call-to-action. The content aids the shift in user habits and adoption of new technology, whereas CTAs help users take desired actions and reinforce how easily they can manage their finance-related issues with just a few taps.
• Graphs and Charts: A well mannered graphical representation plays an important role in conveying the intended communication rightly. They make things easier to scan, read and adapt information out of it. We had a few complex elements where these elements played a splendid job to present the prices, financial updates over the years, and so on. The users of Fintech industry are extremely used to red and green colours, for sell, buy, bearish, and bullish. Thus, it was important to design a colour palette that is suitable for data visualisation too.

• Table Layouts: Charging pages with volumes of data requires a specific arrangement. Add to that multiple filters, categories, and details and the organic content form factor becomes table layout. This is where we faced one of the most difficult challenges so far. The idea of tables being usable required all the estate for visual comfort. The super complex data visualizations and real-time incoming information can only be presented in a particular layout in order to be relevant.

Image source: Tickertape

Image source: Screener

• Ideation, Wireframing & Brainstorming: Before we started working on the screen, firstly ideas were generated and then conceptualised from thoughts to paper to visualise things better.
• The Finished Product: Finally, after months of intense iterations and discussions, we finally settled and locked designs and it looked something like this:

Continue reading the next article to know more about the types of challenges(user or business) we faced, what we did about it and what we’re planning to do next 👻

I would love to hear your thoughts and suggestions if you check out the platform. Feel free to reach me at devyanibhati6@gmail.com with any queries or suggestions.

Like what you’re reading? don’t forget to clap (remember- clap goes up to 50 😛).