Payhip
Boosting User Experience of the e-commerce platform with React Native and Expo
About The Client
Payhip is an e-commerce platform that enables anyone to sell digital products, courses, coaching, memberships or physical products directly to their fans and followers. You can embed Payhip directly into your website or you can use their storefront to sell your work.
Challenge
When Payhip reached us, their digital channels were limited to a web platform, delaying real-time sales notifications and access to revenue data for their users on the go. Users pointed this out as the drawback of their platform, so Payhip decided to fill this gap as fast as possible. Also, most of their competitors already provided access to mobile apps and they didn’t want to lose their customers.
The limitation of a web-only platform is a challenge that spans various industries. However, it may be especially harmful to the marketplaces and online shops. In these businesses, quick sales notifications and immediate access to revenue data become essential requirements.
Creators and influencers using platforms like Payhip are typically absorbed in innovations and daily activities, making the efficiency and immediacy provided by mobile access a critical component of their operational success. This need for mobile accessibility highlights a broader trend: the shift towards mobile-first strategies across digital services. After all, people go everywhere with their phones.
Want to widen your digital channels?
Tell us about your challenge, and let's get the ball rolling.
Solution
A cross-platform mobile app MVP
Payhip decided to build a mobile app MVP dedicated to the sellers, who will be able to quickly check the revenue, and stats and be quickly notified about new orders.
They wanted to start with the MVP to quickly fill the gap they recognized, featuring instant sales notifications, light/dark mode options, and streamlined access to sales data and comprehensive order lists. Payhip didn’t have an internal mobile development team, so they decided to cooperate with experienced cross-platform mobile developers to speed up the process and build an app that would be easily scalable in the future.
Business Implications of Building a Mobile App
Higher Customer Engagement and Retention: By providing real-time sales notifications and on-the-go access to revenue data, the mobile app significantly improves user engagement. Sellers can now respond more swiftly to sales, cultivating a sense of immediacy and connectivity with the platform. It's crucial for customer retention, as it meets the direct needs of sellers seeking efficient and immediate access to their sales performance.
Competitive Advantage: The introduction of a mobile app places Payhip on a more level playing field with its competitors, many of whom already offer mobile applications. It helps retain existing customers who might have considered switching to platforms with better mobile support but also attracts new users looking for a comprehensive e-commerce solution that includes mobile accessibility.
Market Presence and Brand Visibility: Launching a mobile app widens the Payhip market presence and brand visibility since mobile users will be able to find their app on App Stores.
Customer Loyalty: The mobile app has opened new ways for customer engagement through personalized experiences, notifications, and rewards. This direct line to customers not only boosts engagement but also fosters loyalty by offering a convenient and efficient service platform, encouraging repeat business and positive word-of-mouth.
Operational Efficiency for the Users: The app allows sellers to manage their accounts more effectively, reducing the time and effort required to access sales data and order details compared to the web platform. This efficiency can lead to increased seller activity on the platform, potentially driving higher sales volumes and engagement.
Satisfaction Criteria for the mobile app MVP by Payhip:
The app is available for iOS and Android smartphones.
Real-time notifications for every sale.
Light/dark mode support.
Easy access to sales data (daily, monthly, all-time).
Comprehensive order list view.
Choosing the right technology: React Native vs Flutter
The customer was challenged with the choice of the best framework for his project. He knew that the right technology had to be flexible, scalable and cross-platform (to cut the development cost and time and cover two platforms with one codebase). He wants to further develop the app in the future, to finally provide the users with the mobile version of the full functionality available in the web application.
Once he dived into the various frameworks he discovered that two of them are most interesting for him: React Native and Flutter. For us, a React JS and React Native dev agency, the RN synergy with React JS, efficient OTA updates, the utility of Expo, and rich community support, combined with our long-standing use and expertise in React Native, make it the most efficient and strategic choice.
But for our customer, what we find very interesting the most important criteria that excluded the choice of Flutter for the development was a limited number of Flutter agencies available. React Native is much more popular, which of course influences the number of developers and agencies available on the market. This also makes it a go-to choice if you want to create a mobile app that will be further developed in the future and may need assistance maintenance in the future.
Cross-Platform Development with React Native
In the development of Payhip's cross-platform mobile application using React Native, the project scope was defined from the outset. This clarity in objectives and expectations paved the way for a streamlined development process. The dedicated team comprised a Project Manager, two React Native Developers, and a QA Tester, all of whom played pivotal roles in ensuring the project's success.
Our choice of technologies and methodologies was tailored to match the project's specific requirements and goals. The technical ecosystem centred around React Native, supplemented by a selection of tools and practices, is arranged to foster a seamless, efficient, and scalable app development process.
Delivery Process
Initial Works
Login
Notifications Feature
Order Details Screen
Analytics Screen
Analytics Screen
Initial Works
INITIAL WORKS
Set up environment
Backlog
Prepare basic components
Prepare navigation structure
Sentry integration
Login
Login
As a seller, I can see a Splash screen
As a seller, I want to log into the Payhip mobile app so I can access my account on the go.
As a seller, I want to log out from the application.
Notifications Feature
Notifications Feature
As a seller, I want to receive instant notifications on my phone when I make a sale so that I can stay updated in real-time.
Home Screen
As a seller, I want to quickly view my total sales revenue from the Home screen so that I can keep track of my earnings.
As a seller, I want to see a list of all my orders on the Home screen so that I can manage my sales efficiently.
Order Details Screen
Order Details Screen
As a seller, I want to view details of individual orders when I select them so that I can have detailed information on each sale.
Analytics Screen
Analytics Screen
As a seller, I want to access Analytics of my sales so I can make informed business decisions.
Analytics Screen
Analytics Screen
As a seller, I want to access Analytics of my sales so I can make informed business decisions.
How did we make the development frictionless?
To ensure smooth further development and scalability, we recommended a tech stack based on proven technologies, prioritising your future growth and adaptability needs.
Despite incorporating extra features beyond the initial scope, we successfully delivered the project on schedule.
We suggested additional features that enhanced the app's user experience.
To avoid unnecessarily increasing the app's size and potentially affecting its performance, we custom-coded the stats screens instead of relying on heavier libraries.
We implemented a unique “shake-to-open Storybook feature”, accessible until launch, enabling you to easily test UI components in a real environment.
Project Management: Agile
Agile is our choice in most of our projects, because of the focus on iterative development and continuous feedback, which is perfectly suited to the dynamic nature of software development. This approach allows the whole team to quickly adapt to changes, incorporate feedback, and deliver incremental improvements, ensuring the final product closely aligns with user needs and business goals.
And Agile, once again proved to be perfect and allowed us to smoothly adapt to a couple of unexpected modifications which appeared during the development process.
Agile Methodology in Action
As we started the development, both our team and the client identified several areas for improvement and additional features that were initially overlooked. These insights came from a deep dive into user experience (UX) considerations and functionality improvements that occurred as essential to meet user expectations fully.
Better UX with Refresh Functionality: A powerful addition was the implementation of a pull-to-refresh feature, an intuitive mechanism for users to update their sales data manually. This one, not initially considered, became apparent to enhance user engagement and ensure data currency.
State Preservation on Home Screen: Another helpful feature we implemented was the app's ability to remember the last-viewed statistics type upon returning to the home screen. It greatly improves the user experience by providing a personalized interaction with the app.
The iterative sprints and feedback loops characteristic of Agile allowed our team to identify, prioritize, and implement these changes efficiently. And it was crucial in adjusting the evolving scope of the project without compromising on the delivery timeline. The Agile approach improved a dynamic development environment where adjustments and feature additions could be made swiftly, ensuring the project remained on track and aligned with both the technical and user experience goals.
Additional improvements
Quick access to Storybook
Till the release version of the app, we enabled the customer to quickly evaluate the designs by the additional feature - once he shaked the phone he could switch to the Storybook to confirm that all of the elements are aligned with the designs and they work as expected. We wanted to enable the customer to quickly confirm that the app meets all of the requirements and he could do this in no time instead of checking everything on the separate desktop device (which in fact doesn’t show the components exactly how the mobile device does).
Tablet’s version without designs
The customer wanted the app to be available and responsive for iPads. And usually, we need separate designs for that. But taking into account that the MVP was limited to only a few screens we built the code so responsive, that the app looked just perfectly on tablets and the customer didn’t have to pay for the additional designs.
Higher Security with Proof Key for Code Exchange (PKCE)
To strengthen the app's security, we've integrated Proof Key for Code Exchange (PKCE) for login and authorization, utilizing the Expo AuthSession library. This method, employed by major apps like Spotify, leverages PKCE to add a crucial security layer, protecting against unauthorized access and ensuring the integrity of the authorization flow. PKCE works by having the app create a unique code verifier for each authentication attempt, which is then transformed and matched against a challenge sent to the authorization server, making the flow more secure. By adopting this approach and using Expo's trusted library, we align with industry standards and inherent security assurances from Expo, a trustful technology provider.
Avoid unnecessary size increases of the app
We created the charts using the react-svg package, which was already used in the project. Of course, we could use a library dedicated to designing and displaying charts like react-native -chart-kit, but we decided they were too big for such an application. We didn’t want to increase its size unnecessarily (by installing a whole library just to use one of its functions) and negatively influence the app’s performance.
“Before deciding to use ready-built component libraries, we always consider the complexity of the problem. Using these packages is usually cost-effective, but it can influence the size and performance of the app. So if the task is an easier one, we evaluate the tools that are already available in the projects and if that’s possible, we’re using them to resolve the problem instead of installing one more library.”
Kornel Kwiatkowski,
React Native Developer
Communication Plan
Also, throughout the whole project, we followed a communication plan that we prepared before the development process, making sure the customer is always up-to-date and has access to our devs if needed.
Technical Highlights
Primary Framework: React Native
React Native stands out as the primary development framework due to its unique ability to allow code reuse across iOS and Android platforms. It influences the development timeline and ensures consistency in-app behaviour and appearance across devices. React Native's component-based architecture improves the app's scalability and maintainability, crucial for supporting Payhip's evolving business needs.
Additional Tech Stack
Since any of the technical requirements didn’t require special tools to meet them, so we chose the best tech stack available on the market right now - the one that we find proven, reliable and flexible enough to encourage the customer for further development (if he wishes to do this in the future). Read our article about the best tech stack for React Native apps.
Expo
Selected for its rich set of tools and services that streamline the development, deployment, and iteration processes for React Native apps. Expo takes away much of the complexity associated with native development, providing a managed workflow that includes pre-configured components, which significantly accelerates the development process. Its ability to push updates directly to devices (OTA updates) is especially advantageous for rapidly addressing bugs and releasing new features without the delays associated with app store approvals.
TypeScript
Integrating TypeScript introduces strong typing, which greatly influence code quality and developer efficiency. It reduces the potential for runtime errors by enabling type checking at compile time.
NativeWind by TailWind
By incorporating NativeWind, we used TailwindCSS's utility-first styling approach within the React Native environment. This enables faster UI development with consistent styling across the app, aligning with the project's need for a polished and user-friendly interface.
Storybook
Storybook is employed to develop and test UI components in an isolated environment, speeding up the UI development process, ensuring component reusability, and maintaining design consistency—key aspects in delivering a high-quality user interface.
React Query
Chosen for its powerful data fetching, caching, and synchronization capabilities, React Query optimizes data management within the app. It ensures efficient and smooth data updates, and allows providing users with real-time sales data and notifications.
CI/CD
GitHub Actions
This CI/CD tool automates the software release process, from code integration to deployment, ensuring that every code change is automatically built, tested, and prepared for release, which aligns with the need for a high-quality, continuously evolving app. We enable the customer to see the changes and improvements regularly and share a new app version with him every few days.
Expo Application Services (EAS)
EAS offers advanced build and release services tailored for Expo and React Native apps. It supports the development team in managing the lifecycle of the application more effectively, from building binaries to updating apps on the fly.
Results
In just 5 weeks, that were estimated during the project charter creation we developed a cross-platform mobile app MVP using React Native. The app is now available on the app stores (both Android and iOS) which means that it was prepared according to the high shop requirements. It also received first feedback from real users, and Payhip is working on further improvements to meet the users' requirements.
“Looking good so far!! It would be lovely if we could eventually write our blog posts and add products too”
“Nice to get notified of sales in this way and to view analytics.”
“This is awesome! I see the app is very basic at the moment but this is a good start. Looking forward to future updates with more features.”
“I can see the email address of the buyer but can't see the name of the buyer. It will be better to include the name and show the name on the main screen instead of the email address.”
That’s why choosing to build the MVP with basic features first is great. Thanks to that, the app providers may cover the real users’ needs while further developing the app instead of guessing, which features may be the most important.
Payhip is extremely happy with the results and how the app works and looks. He admitted that we were a great partner because of the creativity, communication and quick reactions.
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
I got the sense that the Pagepro team have a tremendous amount of experience managing projects and everything went smoothly like a well-oiled machine.
The team were very sensitive to our needs and always went the extra mile to accommodate us. All the deliverables along the way were on time, and they often raised ideas I never even considered before.
Kahin FarahCTO, Payhip
Have a project?
Let's talk about it!
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
Tell us more about your project
Please provide detailed information about your challenge, and our tech team will promptly review your submission. Expect to hear from us within 24 hours with tailored next steps and insights based on your request.
Book a Meeting With Our CEO
Upon receiving your form, we typically recommend a briefing meeting with our CEO to explore the specifics of your project. Schedule your meeting now to kickstart a tailored approach.
Chris Lojniewski
CEO & CGO