Constructing an accessible e-pharmacy giant: the marriage of React and Magento 2

As a public service provider, Estonia’s leading pharmacy chain Apotheka needs to comply with WCAG accessibility guidelines in its digital channels. Introducing new accessibility features also created an opportunity to migrate the store’s entire frontend from Magento to React.

The digital pharmacy built for Apotheka by Opus several years ago has served the chain well. However, as times change, so do the needs placed on any e-commerce solution. By the time this project kicked off, Apotheka had decided to refresh its web channels’ designs, implement all of the features required by the WCAG 2 AA standard, and offer even more features to its customers in several different markets.

To achieve these goals, Apotheka turned to its long-time development partner Opus, who was to work alongside Apotheka’s design partner Trinidad Wiseman to flesh out a new WCAG 2 AA compliant digital storefront that would also satisfy all of the needs related to the overall design and features.

“Having recently married React and Magento 2 for Apple’s Premium Reseller iDeal, we decided to go with the same approach here as well,” explained Tanel Särgava, project manager responsible for Apotheka’s development. “Whilst the old Magento front-end could have probably been salvaged, it made a lot more sense to start off fresh with an approach we knew would work better in the long run.”

The design work for the new frontend was handled mostly by Trinidad Wiseman, who was tasked with figuring out how to combine Apotheka’s visual identity and feature needs with accessibility requirements. This meant that the entire layout of the site had to be easily accessible to screen readers, as well as offer varying contrast settings for people with partially impaired vision.

“This means that at most meetings where new features were discussed, the main question was “How can this be made compatible with WCAG?”. In most cases a solution was found, however, several ideas had to be scrapped as implementing them within this framework would not have been feasible budget or time-wise,” said Särgava.

Opus’s team was tasked with implementing the new design in practice, using a combination of Magento 2 and React to do so. However, due to the nature of the project, the backend of the online store was expected to be left more or less alone, meaning that the React frontend had to be added on top of it with minimal time spent tinkering with Magento itself.

Särgava noted that because Opus had built the original Magento 2 backend itself, the implementation went quite smoothly, with only minimal adjustments needed to make the solution work. “Of course, if there was the option to leave the back-end alone and offer a lesser experience in the front-end, or implement a quick update for Magento and deliver a flawless front-end experience, we chose the latter,” he added.

Alongside a lot of accessibility features that had to be translated into code and implemented by Opus’s development team, a large emphasis was also placed on the mobile experience. While Magento 2 and React both play very nicely with a wide array of screen sizes and devices, some fine-tuning was needed to offer premium quality in all instances. All of this was complemented by the usual mix of UX improvements, performance upgrades, and future-proofing.

But why React?

Magento is known for being an excellent all-around platform, offering plenty on the backend and being decent on the frontend as well. So why would one stick React on top of that? Well, as usual, there are several reasons.

Särgava explained that using React in conjunction with Magento 2 opens up a whole world of possible future upgrades, updates, and enhancements that would be costly and time-consuming with pure Magento. On the one hand, React is evolving rapidly, offering more options every single day. On the other hand, there are simply more skilled React developers out there than Magento developers.

“This means that any future developments can be carried out more efficiently, as there are more resources available,” he said. “We’re also seeing great performance from the React-Magento 2 marriage, something that’s paramount given the number of people visiting Apotheka’s digital pharmacy each and every day.”

The use of React also enables advanced prototyping: all of the components can be created with React, reviewed and verified by the client, and then moved to the build pipeline. This gives the client a clearer overview of what they’d actually be getting and, by avoiding miscommunication and costly unnecessary iterations, cuts time-to-market and development costs.

While all of this might make it sound like React is the star of the show here, Magento 2 manages to punch above its weight as well. As Apotheka operates all over the Baltic states, it needs to offer an excellent multi-language and multi-storefront feature set, which enables customised and easily adjustable experiences for shoppers from any country.

This party trick came in extremely handy in Lithuania, where Apotheka used to have just an informative website, but can now sell non-prescription drugs via its online store as well. “To achieve this, we had to build a custom chat feature with robust data security to enable patient-pharmacist live communication,” explained the project manager. “Other pharmacies in the country have opted for speaking to the patients on the phone, whereas Apotheka’s live-chat solution, untied from all external servers, offers a user experience that’s leaps and bounds ahead of the competition.”

The new solution, now live, delivers a much-improved user experience, greater performance, and top-notch accessibility. “Not to mention the fact that Opus’ team has once again shown that there is no challenge it can’t conquer.”

Want to join our team? Take a look at our open positions. We’re looking forward to hearing from you!

Can we help you as well? Get in touch with us! We’d love to talk.