iVoyant's Website

introduction

This case study explores the development and implementation of an e-commerce website for a leading healthcare provider. The project aimed to create a user-friendly platform for selling prescription glasses, sunglasses, and contact lenses while empowering the business side to manage content without the developer intervention. The initiative focused on enhancing marketing reach, increasing product availability, boosting product sales, and providing a streamlined process for customers to buy vision essentials online, along with the improvisation of customer experience, increased operational efficiency, and leveraged cutting-edge technologies to create a robust and flexible e-commerce solution.

problem statement

Absence of a modern web solution for company’s customers to be able to buy their eyeglasses/contacts online.
Lack of a dedicated e-commerce platform for selling prescription eyewear and contact lenses
Customers were forced to go to the physical branches of the company to order their glasses, even after they have gotten their eye exams and prescriptions.
Lack of online marketing. Dependency of a technical resource existed whenever content had to be changed by Sales and Marketing teams.
Exhausting phone calls and emails load for physical branch personnel that delayed other works.
Product must be in-store for customers to buy at the company’s physical branches.
Lack of delivery services.
Absence of an online way for customers to see prescription measurements and access their personal information for company related services.
Absence of a comprehensive pricing engine to handle complex insurance, promotions, discounts, and employee pricing rules
Requirement for a scalable and performant solution to handle large datasets and user interactions

No items found.

analysis

The existing architecture for ordering vision essentials, managing patient prescriptions, managing available products, prices, and make-ability rules, the competitors’ ecommerce experiences, the marketing opportunities, the automatization opportunities for updating the product catalogue, gathering users’ measurements, customizing lenses, ordering and checking out, were all taken into consideration during the study process.

implementation

Developed a React-based frontend with a pixel-perfect implementation of Figma UI designs
Scaffolded the project with React, Gatsby, Tailwind, ContentStack, Husky, and Jest.
Developed responsive interfaces using HTML, Tailwind, TypeScript, and created reusable react components. All done while matching the Figma designs received from the UX team.
Created content models and entries in ContentStack and built logic around them to make multiple components, layouts, and pages customizable from the dashboard without having to change the code nor redeploy the app. Allowing the company content managers to make these changes without depending on the DEV team.
Built locale logic with ContentStack and i18next to show region specific marketing and labels to improve user conversion.
Built a Lens Wizard that takes care of guiding the user through lens customization, making sure that their available selections are only the ones that match their measurements and makeability requirements. Options are linked to Commercetools and ContentStack to keep them dynamic. Business rules for what to show, how to present them, etc, are predefined on a configuration file.
Built a structure to gather and transform data from multiple existing services into the format that Lens Wizard expects. This allows the company’s region teams to update their catalogue and Lens Wizard will automatically update with it.
Built a Pricing Engine that takes care of analysing user data according to predefined requirements, and running a set of rules to get the correct price of the product the user is trying to buy. This applies discounts and savings plans to the default price to account for user and employee benefits.
Connected to third-party PD measurement tool to allow users to get an online PD measurement.
Built Catalogue Manager microservice to get the data feed of products from the existing system and populating it into Commercetools for the web app’s consumption.
Created a structure for the products to be displayed as a catalogue with functionality to browse and filter lenses by multiple parameters like shape, color, brand, etc.
Built User Manager microservice to handle user data business logic.
Created unit tests to improve code quality and reach a minimum of 80% code coverage.
Implemented Agile Methodology: Organized development into time-bound iterations, fostering collaboration and delivering incremental results. Conducted regular iteration planning to prioritize tasks and daily stand-ups for alignment. Held thorough iteration retrospectives for continuous improvement.
Optimized performance through techniques such as virtualization, pagination, and memorization
Implemented Zustand for efficient state management across the application
Documentation
- Third-party integrations with ContentStack, Commercetools, PD tool.
- Region-based differences in content, labels, data flow, test users and other related information.
- Complex implementations like Lens Wizard and Pricing Engine.
- Data flows at different stages of the user’s journey: login, adding to cart, checkout payments, etc.

technologies used

React for frontend development

Express.js and NestJS for backend services

GraphQL for API development

Contentstack as a headless CMS

Tailwind CSS for rapid UI development

Jest and React Testing Library for testing

Zustand for state management

Node.js as the runtime environment

Swagger for API documentation

ESLint for code quality and consistency

TypeScript

Gatsby

Commercetools

PostgreSQL

Azure

Husky

Jenkins

No items found.

outcomes & benefits

Successfully delivered a fully functional e-commerce website for prescription eyewear and contact lenses
Improved customer experience through an intuitive and responsive user interface
Dynamic link between existing systems and the newly developed architectures for the web application were developed.
Products, prices, availability rules were automatically updated when the existing data feeds were updated.
The company’s content managers were able to modify marketing banner, tiles, notifications, page layouts, component options, etc, and the web application reflected the changes instantly without further intervention from the DEV team.
Maintainability and Scalability. All the code was created with an agnostic mindset, making important pieces of code be able to be “plug and play”.
Very high code quality and reliability, as well as thorough documentation.
Streamlined online experience for users to be able to see their prescriptions, manage their personal information, browse through available products, use their prescriptions to customize and order their eyeglasses or buy contact lenses, and get their necessary PD measurement online.
Responsive experience in all areas of the web application.
Implemented a robust pricing engine capable of handling complex pricing scenarios
Enhanced overall system performance and scalability to handle large datasets and user interactions

conclusion

This case study underscores the significance of adopting an integrated approach that combines customer-centric initiatives, technical innovation, and continuous development to thrive in the competitive landscape of human capital management. The implementations mentioned in this case study were done with the effort of both teams in the company’s Vision project. We have successfully gathered requirements and created separate but connectable architectures that link to existing systems and third-party tools to bring a streamlined user experience that is dynamically updated and can be maintained easily as per the requirement. The company has witnessed the conception of a new product that will technologically revolutionize their current way of selling vision essentials, once it’s ready for production.

Vision Essentials Ecommerce Website for a Leading Healthcare Company

introduction

problem statement

analysis

implementation

technologies used

outcomes & benefits

conclusion