Home
|
Case Studies
|
Expensify

Enhancing Expensify App Performance

Discover how we revamped the Expensify app for lightning-fast experiences, guided by a systematic DMAIC approach.

CLIENT INFO
Expensify is a software company which provides an online expense management service for businesses.
Industry
Fintech
Company type
Enterprise
Region
USA
tech INFO
App performance optimization
Technologies
React Native
Platforms
iOS | Android | Web | Desktop
Tech Stack
Typescript | React Navigation | React Native Web | React Native Reanimated | React Native Onyx | Electron | Firebase | React Native Testing Library | Reassure
From 14.5 to 2.5 seconds
82.76%

Slash in Message Sending Time

Before 14.5s
After 2.5s
35k
lines of code
7
months of work
800
code commits
88%
decreased shimmer render time
50%
quicker load times for chats on subsequent visits
50%
faster rendering time for chats
18%
less frame junk when scrolling
before
The refresh time was 5-11 seconds
after
The refresh time was reduced to ~2 s

Instant Preview

Developers can instantly preview code changes on real devices without a complex setup.
Expensify
CHALLENGE

Expensify was on the brink of a major app upgrade, aiming for not just a facelift but a complete performance overhaul. They needed speed, and they needed it to feel effortless.

The key challenge lay in optimizing performance without compromising functionality. Expensify's new app version demanded a level of responsiveness that would elevate user interactions to a seamless experience.

APPROACH & WORK DONE

Adopting the DMAIC framework (Define, Measure, Analyze, Improve, Control), we approached the task systematically, ensuring each step contributed to the overarching goal of enhancing app performance.

DEFINE

We clearly defined objectives and metrics, aligning them with Expensify's business goals. Through collaborative discussions and analysis, we identified key performance indicators (KPIs) such as message sending time, and setting realistic targets to drive improvements.

MEASURE

With defined metrics in hand, we proceeded to measure baseline performance, leveraging a combination of tools and techniques such as DevTools component, Bun, and Maestro. Rigorous testing on various devices and environments allowed us to gather comprehensive data, showing performance bottlenecks.

ANALYZE

Then, we delved into a detailed analysis of performance issues, with a special focus on factors impacting app responsiveness. From CPU profiling to memory utilization, we left no stone unturned in identifying root causes and preparing effective strategies for optimization with specific action items.

IMPROVE

Thanks to our meticulous analysis, we knew exactly what to do - we started to implement targeted improvements. Through iterative development cycles and rigorous testing, we fine-tuned app performance, achieving significant reductions in message-sending times and enhancing overall responsiveness.

CONTROL

We didn’t stop there. To maintain optimal app performance over time, we integrated Reassure into Expensify's development pipeline. Continuous performance monitoring and identification of regressions let Expensify keep the great results.

define
Identified confirmed/reported issues such as re-renders and created a backlog for potential improvements.
measure
Used Macro tool measurements.
ANALYZE
Selected the most promising performance changes.
IMPROVE
Implemented changes following React Native best practices.
CONTROL
Re-measured with the Marco tool and compared to the 4.58.0 native version.
Deployment
 Developed the release process for both Android and iOS.
API DESIGN
Proposed an API based on the Rive Android library features.
INTEGRATION
Implemented Rive SDK integration for Android and created an example app for testing.
iOS SUPPORT
Extended the integration to iOS after successful Android testing.
AUTOMATION
Created a Github Action workflow for automated library releases.
PUBLIC RELEASE
Made the library publicly available on platforms like CocoaPods and Maven.
DEPENDENCIES
Managing dependencies, including Expo and react-native packages for each new release.
RELEASES
Automating the release process with custom GitHub Actions.
TRAINING
Providing React Native training through pair programming, code reviews, and workshops.
RESULTS

Enhanced Performance with DMAIC and Key Metrics for Long-Term Success

With DMAIC guiding us, we gave Expensify's app a serious performance boost. Smooth chats, snappy responses - that's the Expensify experience, now better than ever.
01
CODE REFACTORING
Kicked off the project with refactoring the whole socket.MIGRATION Migrated the codebase to TypeScript.
02
MIGRATION
Migrated the codebase to TypeScript.
03
DEPENDENCIES
Upgraded major dependencies such as Expo, React Navigation, and React Query.
04
PAYMENTS
Created two options: In-app purchase with Google Play or App Store and credit card payment.
05
linking
Sorted out links, integrated content, and implemented html rendering.
We provided full front-end support, project configuration, feature parity, and expert advice on technical and user experience. We also implemented a new design guideline, including dark mode with auto theme detection.
01
RN PAPER
Forked the React Native Paper library.
02
ci
Established continuous integration for automated code updates.
03
testing
Set up a Storybook for component testing.
04
design
Developed the basis of the design – color, layout, and typography.
Once we had the basics down, we started working on the UI library components. The components we developed included: AppBar, TextField. Button, Icon Button, Toast, which included animation and swipe-to-dismiss, Match Status, Search, and many more!
Apart from all the fixes and improvements, we provided metrics that should be tracked over time so the client knows exactly what to monitor and correct to maintain great performance levels long term.
16.8s
App start time, before 48.5s
 8.6s
Report screen load time, before 15.9s
2.5s
Sending a message, before 14.5s
60FPS
Average FPS on LHN
2.6s
Search screen load time, before 11.8s
01
Together
we acted as staff augmentation within Advantys’ team.
02
Engaged
in collaborative problem-solving and solution exploration.
03
supervised
by Advantys' CTO, the project utilized GitHub, Notion, and Slack for communication.
01
migrating
from a custom server-side rendering (SSR) solution to Next.js 
02
Focusing
on Core Web Vitals metrics
03
Optimizing
a large shared JS bundle 
04
Introducing
Fast Refresh for accelerated development iterations
The introduction of Fast Refresh in Next.js further accelerated development iterations. All in all, it contributed to an enhanced user and developer experience.In a span of several months, our team effectively overhauled the AutoZone app's performance, which initially struggled on both desktop and mobile devices. To find out more about the whole AutoZone project, head over to the case study on main case study title
01
strong
architecture with professional maintenance and continuous updates
02
high
code coverage with quality-compliant unit and integration tests
03
Comprehensive
testing, including end-to-end.
04
Faster
time-to-market with mobile process automation.
05
New PoC
features like biometrics and mobile health kit integration.
Last but not least, our collaboration significantly enhanced the knowledge of Thriva's development team regarding React and React Native.
Autozone app
  • Students new to programming and React Native
  • Web developers unfamiliar with device APIs and native apps
  • Native developers exploring web app frameworks and React Native's UX potential
  • React Native developers prototyping and sharing ideas
  • Library maintainers creating examples and documentation
  • Users providing reproducible cases for bug reports
  • Speakers and workshop presenters conducting live coding sessions
Callstack person image
Your Success Story is Next
callstack illustration
CALLSTACK APPROACH
get in touch

Trusted by

“The team at Callstack are the most experienced and trusted engineers in the React Native community and ecosystem.”

Nader Dabit

DevRel + XD at EigenLayer / EigenDA

at Amazon Web Services

This information will be used only to contact you. For details, check our Privacy Policy.
Callstack Cosmos

-

In brief

We optimized the client’s mobile app performance and introduced a custom tool to measure performance regressions. We set up performance tests and documentation to enable a seamless transition of knowledge with the in-house team of developers.

Client Info
Entain is one of the world’s largest sports betting and gaming entertainment groups.
Industry
Commercial gaming
Company type
Enterprise
Region
Australia, Asia & Oceania
Tech Info
Performance optimization project with the best practices, approaches & tech solutions
Technologies
React Native | Native
Platforms
iOS | Android
Stack
Redux | Tanstack | Reassure | GraphQL

Performance Boost

87.5%

In 87.5% of the screens, the number of rerenders decreased or remained the same, which affected the acceleration of the initial performance.

React Universe

In brief

Discover how we revamped the Expensify app for lightning-fast experiences, guided by a systematic DMAIC approach.

From 14.5 to 2.5 seconds

Sending a message took approx. 14.5 seconds on average. We reduced this baseline value to approx. 2.5 seconds.

reduced time of sending a message

Challenge

Expensify was on the brink of a major app upgrade, aiming for not just a facelift but a complete performance overhaul. They needed speed, and they needed it to feel effortless.

The key challenge lay in optimizing performance without compromising functionality. Expensify's new app version demanded a level of responsiveness that would elevate user interactions to a seamless experience.

Approach & Work done

Adopting the DMAIC framework (Define, Measure, Analyze, Improve, Control), we approached the task systematically, ensuring each step contributed to the overarching goal of enhancing app performance.

Define

We clearly defined objectives and metrics, aligning them with Expensify's business goals. Through collaborative discussions and analysis, we identified key performance indicators (KPIs) such as message sending time, and setting realistic targets to drive improvements.

Measure

With defined metrics in hand, we proceeded to measure baseline performance, leveraging a combination of tools and techniques such as DevTools component, Bun, and Maestro. Rigorous testing on various devices and environments allowed us to gather comprehensive data, showing performance bottlenecks.

Analyze

Then, we delved into a detailed analysis of performance issues, with a special focus on factors impacting app responsiveness. From CPU profiling to memory utilization, we left no stone unturned in identifying root causes and preparing effective strategies for optimization with specific action items.

Improve

Thanks to our meticulous analysis, we knew exactly what to do - we started to implement targeted improvements. Through iterative development cycles and rigorous testing, we fine-tuned app performance, achieving significant reductions in message-sending times and enhancing overall responsiveness.

Control

We didn’t stop there. To maintain optimal app performance over time, we integrated Reassure into Expensify's development pipeline. Continuous performance monitoring and identification of regressions let Expensify keep the great results.

Results

With DMAIC guiding us, we gave Expensify's app a serious performance boost. Smooth chats, snappy responses - that's the Expensify experience, now better than ever. 

table with metrics showing before and after our work

Apart from all the fixes and improvements, we provided metrics that should be tracked over time so the client knows exactly what to monitor and correct to maintain great performance levels long term.

The challenges we’ve solved so far

Related services

Service

Product and Process Optimization

Callstack illustration

get in touch

Fill in the form and tell us a little bit about your enquiry. We’ll get back to you promptly to discuss your requirements.

This information will be used only to contact you. For details, check our Privacy Policy.