Lighting up the night: presenting the dark theme of PhonePe

In the ever-evolving realm of app design, PhonePe made a transformative decision to embrace the popular dark mode! Beyond its aesthetic charm, PhonePe recognised the practical benefits it offered, such as reducing eye strain in low-light environments. By delving into research and prioritising user comfort, PhonePe created an exceptional experience that left users immersed in a seamless app journey.

Our adoption of the dark mode showcased a dedication to user satisfaction, combining visual appeal with practical advantages.

In this blog, we delve into the creation of a dark theme for the PhonePe app. We will explore the challenges faced, insights gained throughout the process, and the invaluable lessons learned by our visionary design team.

Join us on this journey of discovery and innovation!

Conceptualisation: motivation and design direction

The decision to incorporate a dark theme into the PhonePe app came from customers asking for a more immersive visual experience. Responding to this, the design team embarked on a journey of innovation, drawing inspiration from successful platforms such as Twitter to infuse the app with aesthetic elegance in keeping with its purpose.

By making the brand colour the bedrock of the dark mode, we stayed away from conventional design practices and chose a path that would exceed users’ expectations and leaves an indelible mark on their digital encounters. As a result, the app now boasts a fascinating blend of functionality and aesthetics!

Design goals and principles

At the heart of the dark theme’s conception, lay two design goals:

• Elevating user experience
• Creating an exquisite visual appeal

Guided by a commitment to inclusivity, the design team embarked on a quest to align with the Web Content Accessibility Guidelines (WCAG). With unwavering dedication, we scrutinized the colours we had chosen, ensuring that each hue adhered to the stringent accessibility standards. Through this process, we harmonised the contrasting elements, thereby striking a delicate balance between captivating aesthetics and unwavering legibility.

The result was a dark theme that captivated users with its design while maintaining excellent usability throughout a user’s digital experience.

User research: insights & challenges

Throughout the user research phase, our team discovered something crucial about the dark mode design. It became evident that employing pure white in the dark mode interface could result in eye fatigue due to the stark contrast it created.

Armed with this insight, our design decisions were strategically guided. We recognised the need to introduce a subtle touch of colour to the white text, with the aim of enhancing user comfort during extended usage. After meticulous experimentation and exploration, a delicate shade of purple emerged as the ideal complement to the dark mode’s ambience.

However, discovering the perfect hue of purple to harmonise seamlessly with the overall dark theme proved to be a challenge for our team. Countless iterations and adjustments were made, striving to strike the ideal balance between visual appeal and user experience. Furthermore, we also had to ensure that the chosen purple shade maintained compatibility with our brand identity, requiring adjustments to our brand colour palette.

These endeavours exemplify the attention to detail of our design team. By diligently fine-tuning the colour elements within the dark theme, we aimed to create an optimal visual experience that is both aesthetically pleasing and ergonomically sound.

Design process: ideation, prototyping & iteration

The design process for the dark theme began with a mapping of colours based on the existing design system. However, complexities arose due to limitations in the system, necessitating the consolidation and elimination of colours throughout the app. After finalising the colour mapping, the team considered colour accessibility standards as per WCAG guidelines. We adapted design elements, typography, and colour palette to ensure optimal legibility and usability in dark mode.

While the team lacked comprehensive guidelines initially, we were committed to establishing design systems and guidelines to maintain consistency throughout the dark theme across all collaterals.

Technical implementation and optimisation

Collaboration with developers played a vital role in the successful implementation of the dark theme. The team worked closely with front-end developers to eliminate unwanted colours and optimise the performance of the dark theme. Fortunately, it did not face any specific challenges related to battery consumption or device compatibility.

Before the rollout, the team gathered feedback from colleagues in the office to fine-tune the colour options for UI elements and icons. After the launch, we actively collected feedback from employees and the public. The major insights received were related to white text colour and monotone icon colours. To address these, the team added a subtle purple touch to the white text and introduced a dual-tone approach for icons to reduce eye strain.

Iteration and future plans

As the initial implementation of the dark theme took shape, our design team encountered a significant challenge that demanded their dedication and adaptability. Throughout the process, we discovered instances, where the dark colour implementation was incomplete or incorrect colours, were inadvertently used.

Recognising the need for continuous iteration and improvement, our team swiftly collaborated with the App Excellence team to rectify colour inconsistencies. Their valuable assistance proved instrumental in troubleshooting and refining the dark theme, ensuring a seamless and visually cohesive user experience.

The design team has now set its sights on further enhancing the dark theme’s versatility and options. We are committed to expanding the range of customisation choices available to our users, empowering them to personalise their app experience to suit their preferences.

Moreover, in our pursuit of design excellence, we prioritise the completion of the comprehensive style guide for our design system. This will serve as a valuable resource, providing detailed specifications and guidelines for implementing the dark theme across various components and interfaces. By establishing a robust and unified system, we aim to maintain consistency and coherence while fostering a sense of familiarity and ease of use for users.

Key learnings and takeaways

Developing a dark theme for the PhonePe app taught us multiple valuable lessons. It emphasized the complexity of implementing dark mode and the importance of considering even seemingly basic elements such as selecting the appropriate shade of white. The team also realised the significance of having a robust design system to maintain consistency and streamline the design process.

Designing the dark theme for the PhonePe app was a journey that involved addressing user demand, considering industry trends, and maintaining the app’s brand identity. Through meticulous user research, careful design decisions, and collaboration with developers, the team successfully created a visually appealing dark theme that prioritised usability and accessibility.

As the dark theme continues to evolve, PhonePe remains committed to refining the experience based on user preferences and technological advancements, all while adhering to our comprehensive design guidelines.