keen.com | UI Migration + Zoom SDK & Payments Integration

Over nine months, we managed the complete frontend migration of Keen.com (a subsidiary of Ingenio LLC) from Ember.js and ASP.NET to Next.js achieving improved scalability, optimized performance, modern architecture, and an enhanced user experience.

Tech Stack used during Development 💻 Frontend : Nextjs, Redux Toolkit, TypeScript Other Tools : Zoom SDK, Swagger, GraphQL Communication : Zoom, Slack Feature/Issue Tracking : Jira

Who is Keen? 🤔 Keen.com is an online platform that connects individuals with a network of spiritual advisors, including psychics, tarot readers, and astrologers. Founded in 1999 by Karl Jacob, it operates as a brand under Ingenio LLC.

The platform offers services such as love and relationship advice, life path guidance, and mediumship readings, facilitating over 35 million conversations worldwide. Keen operates majorly in US and European Market. Check them out ⬇

Strategy 📝 To develop Keen.com, we adopted a collaborative and structured strategy. The design team provided images and Figma designs, which were carefully reviewed and rectified as needed to ensure alignment with the platform's vision and user experience goals. We engaged closely with product managers to discuss and refine the user flow, prioritizing clarity and functionality. These discussions shaped our strategy, focusing on seamless navigation, engaging aesthetics, and optimal performance. With clearly defined roles, iterative design improvements, and strategic alignment across teams, we ensured that Keen's development was streamlined, user-centric, and met the overarching goals of providing meaningful and intuitive experiences. Ready? Set? Go! 🚀 Our first step was to get all the website related contents like static images, Figma Designs, text content. Review them and understand the complete Flow. Since this was a long project it took us couple of weeks to iteratively review the flows, figma designs and content with Designers and Product Managers. Once this was done, we then started the development of the project using Next.js and Typescript. We then Integrated Zoom SDK for seamless video calls, allowing users to initiate, join, and manage video conferences directly from the Keen.com. After this the final step was to integrate PayPal and major credit card processors which contributes to the 90% of total revenue, ensuring secure and efficient transactions that comply with industry standards (PCI-DSS).

We then reviewed the code continuously for few days once the complete code was done. Testing of the Flow took another couple of weeks and was rigorously tested to detect any missing edge cases. Once all this was done, we then released the product to the client on staging website to review it. After their review and confirmation, the features were deployed on production and were released to the client. Yaay!! 🎉

Advisor Dashboard : Dashboard which displays all the information related to advisor their transactions, call records, meetings, listings and etc.

Advisor Details Page (ADP) : This page displays detailed information about advisor their specialities, skills and their pricing

Listings Table Page : This page displays advisor listings in tabular format.

Ping Page : This page displays all the past and active conversations advisor is going through. Basically it's a Direct Message (DM) page.

Tax Documents Page : This page displays the tax documents of all the previous years.

Payment Call/Chat Page : This Flow lets the user to add and edit credit card/paypal as a payment option just before initiating a phone call with the advisor.

Arrange Call/Chat Page : This Flow lets the user to schedule a phone call with the advisor. It also has feature to to add and edit credit card/paypal as a payment option.

Appointment Booking Flow : This Flow lets the user to schedule a Video Call with the advisor.

Call Status Page : This is the page which shows up when advisor in a call with the user.