Constructing an Accessible e-Pharmacy Giant: The Marriage of React and Magento 2

Being a public service provider, Estonia’s leading pharmacy chain Apotheka needs to comply with WCAG accessibility guidelines when it comes to its digital channels. Introducing new accessibility features also opened up the possibility to migrate the entire front-end of the store 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 every and all features required by the WCAG 2 AA standard, and offer even more features for 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 front-end was handled mostly by Trinidad Wiseman, who was tasked with figuring out how to implement Apotheka’s CVI and needs for features whilst also being in compliance with accessibility requirements. This meant that the entire layout of the site had to be easily accessible by 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, it was expected that the back-end of the web store would be left more or less alone, meaning that the React front-end had to be added on top of it with minimal time spent on tinkering with Magento itself.

Särgava noted that thanks to the fact that Opus was the one who had built the original Magento 2 back-end, the implementation went quite smoothly with minimal adjustments being made 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’ development team, a large emphasis was also placed on the mobile experience. Whilst 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 futureproofing.

But why React?

Magento is known for being an excellent all-around platform, offering plenty on the back-end and being decent on the front-end 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, it’s no secret that there are 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, where all of the components can be created with React, reviewed and verified by the client, and then migrated to the build pipeline, as such giving the customer a clearer overview of what they’d be actually getting, and with that slashing the time-to-market and development costs, thanks to avoiding any miscommunication and costly unnecessary iterations.

Whilst 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 is operating all over the Baltic states, it needs to offer an excellent multi-language and multi-storefront feature set, which would enable customized and easily adjustable experiences for shoppers from any country.

This party-trick came extremely handy in Lithuania, where Apotheka used to just have an informative website, but can now sell non-prescription drugs via its web 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.”

All in all, 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.