Financial News and Data App: Dark Mode Style Guide

Product Overview

CityFALCON is a financial news and data app that offers real-time and personalized information to users. It gathers news from various sources, applies AI algorithms, and delivers filtered content based on user preferences. Covering stocks, currencies, commodities, and cryptocurrencies, it provides market data, company profiles, and analysis. With its user-friendly interface, CityFALCON aims to empower individuals with relevant and customized financial information for informed decision-making.

Considering the various benefits and growing demand for dark mode across various applications, integrating dark mode for CityFALCON users seems like a logical step to improve the app. This will enhance user experience, accessibility, and overall aesthetics of its web and mobile applications.

‍

‍

Problem Statement

The need for a dark mode and its significance

1. Comfort: By reducing overall brightness and glare emitted by screens, Dark mode makes experience more comfortable for users, especially in low-light environments. As our app is news focused, there’s lots of readable content, so dark mode is aimed at reducing eye strain and fatigue, allowing users to spend extended periods interacting with the interface without discomfort. Moreover, Dark mode offers higher contrast between text and background elements, improving readability and legibility.
2. Battery Saving: Dark mode provides reduced power consumption and extended battery life compared to displaying bright, white backgrounds.
3. Personalisation: Allows users to personalise their experience based on their preferences and style, giving a visually appealing alternative to the traditional light interface.
4. Inclusivity: design should accommodate diverse user needs. For example, a person with sensitivity to bright light (especially those with different forms of cataracts) may require different settings. Older age groups commonly suffer from farsightedness, so clean typeface, font size, and contrast between background and font are crucial for their ability to process content.
5. Engagement: Enhances focus and engagement with the interface by minimising visual distractions and emphasising important information.
6. Consistency across Industry: Dark mode has become a standard feature across many platforms, operating systems, and popular applications. By adopting dark mode, our product team can provide a familiar experience to users.

‍

Challenges and considerations

• Users should be able to switch to dark mode on the platform.
• The current style should be reviewed and a solution for dark mode suggested.
• The style should be easy to implement and adapt to current Web App and Mobile Applications

‍

Design Process

‍

In applying The Double Diamond method, my design approach began with a comprehensive style review during the research stage. This critical assessment ensured a solid foundation for subsequent design decisions. Through iterative cycles from design to feedback, I continually refined our new dark mode style.

‍

Current Style Review

At this stage, I evaluated the existing styles and design system. I started the analysis with our main Watchlist page, which incorporates the most important elements of the product. I collected the main components and identified the critical UI components and elements that require dark mode.

Starting from colours, I could see that some styles are the result of gradual product change, where some of the elements were designed at different stages, and some haven't been updated yet. This should be kept in mind when choosing a style for the dark mode, as by the time it goes into production, some of the page elements could be different. So the process was not only about switching one colour to another: any direct colour change is too straightforward when you want to keep the visual hierarchy and contrast of objects. On the bright side, there were already some dark elements in the UI (Leftbar and Footer), which, together with the Brand logo, gave me a good foundation to start from.

‍

Choice of Colours and Styles

For ease of development, we adopted a principle of possibly using minimum number of colours and object styles, while maintaining accessibility and aesthetic principles.

Part of the responsibility from a design perspective was to develop dark mode not on a page-by-page basic, but rather make a coherent Design System with its Style Guides. This makes it easier to maintain and update for any further changes both for Design and Development Teams.

‍

UX Factors

The key user experience factors that were taken into account when designing dark mode included:

‍Readability

Maintaining clear and readable content through appropriate colour contrast and typography. Since the platform is data-oriented we had to make sure that headings, text, charts, tables and any important information had sufficient contrast.

Consistency and Branding

Consistency is crucial in product design to provide a coherent and familiar user interface across both light and dark modes. To maintain visual coherence across all modes, we have adapted for both Web and Mobile apps, as well as adjusted landing pages, illustrations, and marketing materials.

User Preferences

The dark mode is a design choice, and not all users may prefer it. To enhance the overall user experience and accommodate individual preferences, it is recommended to provide an option to switch between light and dark modes, along with user preferences for automatic mode switching based on time or device settings.

User Testing

We used prototyping to assess the usability and visual appeal of the new user interface colour palette in different lighting conditions. Since the platform already has a long-term user base, it was important for the design team to receive feedback on the platform's "recognisability" given the colour changes.

Key Takeaways

• Always check the contrast ratio: Make sure that the contrast ratio between text and background meets accessibility standards. There is a Figma plugin that can easily check and tell if the text meets these criteria.
• Shadows in dark mode do not work as well as in light mode. Replace them with object outlines or apply contrasting colours
• Test the product on different devices and in different environmental conditions. No matter how well you know your product, there are many ways you may miss something important.
• Gather early feedback from coworkers and users to identify any contrast issues or readability concerns.
• Adjust font size, weight, and style for dark mode to ensure readability.

‍

Delivery

Once the style guides were ready, the development team could start implementing the feature.

The general design flow now includes the requirement for any new components that are introduced to have a dark version.

‍

Style guides

‍

‍

‍

Implementation Strategy

The mobile version has been launched quicker, due to a shorter production cycle. During testing, there have been minor adjustments, but overall everyone was happy with the result. The solution is already being tested on web landing pages and will soon be launched for the web platform.

‍

‍

‍