Owndays Front-End Redevelopment

We Were Hired to Redevelop the Legacy Front-End After the Enterprise Buyout

About Owndays

Owndays is a Tokyo-based company founded in 1989, offering a wide selection of over 10,000 sunglasses, frames, and eyeglasses. Their products are available in more than 100 retail stores worldwide. The company was later acquired by Lenskart, a multinational optical prescription eyewear retail chain with over 2,000 retail stores.

Why Owndays Hired Lengin Front-End Developers

After Lenskart acquired Owndays, they wanted to transform the website to a newer version with a brand new design and updated technologies, as it had a lot of legacy code and outdated solutions.

Having assigned a team of 4 backend developers, frontend and backend tech leads, testers, and a designer, the company was looking for 2 experienced React developers who could quickly join their team. They underlined the importance of developers being self-driven and result-oriented persons.

Here are some key requirements they had:

  • A minimum of 5 years of frontend experience, with at least 2 years at React
  • Strong experience with HTML5, CSS (SASS), and JavaScript. Next.js, Typescript, Babel, and jQuery.
  • Knowing how to build entire React apps and implement React components in big non-React sites.
  • Experience working with Marketing libraries: GA4, FB Pixel, TikTok Pixel, etc.
  • Full English proficiency

This is our forte; JavaScript technologies are our specialty. As a result, two of our developers excelled in the interviews and tests, seamlessly integrating into Lenskart’s team within a matter of days. Owndays management particularly emphasized the significance of rapid onboarding and robust development, given the tight deadlines set by stakeholders.

Technologies Behind Owndays

Figure
Next.js
Figure
React
Figure
Node.js
Figure
TypeScript

Front-end Technologies:

  • HTML5 and CSS (SASS): HTML5 is used for structuring web content, and CSS (SASS) is employed for styling and layout of web pages.
  • JavaScript: JavaScript is a versatile programming language that enhances the interactivity and functionality of websites.
  • React: React is a popular JavaScript library for building user interfaces and web applications.
  • Bootstrap and Material UI: These are front-end frameworks that provide pre-designed components and styles for creating responsive and visually appealing websites.
  • Next.js: Next.js is a framework for building server-rendered React applications with enhanced performance.
  • Typescript: TypeScript is a superset of JavaScript that adds static typing and other features for safer and more maintainable code.
  • Babel: Babel is a JavaScript compiler that allows developers to write code using the latest language features and compile it to browser-compatible JavaScript.
  • jQuery: jQuery is a JavaScript library that simplifies HTML document manipulation, event handling, and animation.
  • Redux: Redux is a state management library used in React applications to manage the application’s state.
  • Redux Saga: Redux Saga is a library used for managing asynchronous actions in Redux, such as handling data fetching and side effects.

Back-end Technologies:

  • Java: Java is a versatile and widely used programming language for building robust and scalable back-end applications.
  • Node.js: Node.js is a server-side runtime environment that was used for building custom siderendering server.
  • SonarQube: SonarQube is a code quality and security analysis tool that is used to assess and maintain the quality and security of code in a software project. It is often applied to both front-end and back-end code.

Scrum for Development

The project is usingscrum methodology, aimed to provide a transparent and flexible development process. Scrum emphasizes iterative and incremental development. It breaks the project into small, manageable parts, with each sprint resulting in a potentially shippable product increment.

It is based on empirical control, meaning that decisions are made based on the current state of the project rather than predictions. This allows for continuous improvement. The development team is encouraged to be self-organizing, taking ownership of how they work and make decisions.

Our front-end department consisted of a tech lead and designer, provided by the client, and two of our React developers. For project management we used Jira.

The key components of our approach included:

  • Daily meetings
  • Sprint plannings
  • Estimations
  • Sprint reviews
  • Retrospectives

Developing the Front-End and Functionality

Everything you see on the website was developed fully or mainly by Lengin devs. The old version we had to redevelop had an old, not user-friendly UX/UI and legacy front end, which caused poor performance (affected SEO) and a bad user experience that kept from getting more sales.

As the new company owner, they wanted to implement a modern design, making users comfortable to navigate and make purchases. We used React to build the entire front end with the help of Redux for sprint management and Redux Saga for asynchronous actions.

Catalog and Product Page

The store features a fairly standard implementation of the catalog and product card. The design is clean and lacks unnecessary details. The catalog incorporates a filter for swift product navigation and displays the available colors for each model.

On the product item page for glasses, you can virtually try on the model of your choice using your webcam. Additionally, there’s a 360-degree view of the model. When proceeding with a purchase, you can choose the desired lenses to accompany your selected frame.

Account Profile

Owndays has an account-client system, which makes shopping more convenient.

In addition to common order tracking and wishlist functions, it offers a custom membership program and the ability to upload prescriptions. This is particularly important in some countries where policies require prescriptions for eyeglass purchases.

You can also find the nearest store and book an eye test.

Results and Impact

Together with the client’s team, we successfully delivered a brand-new website with improved UX/UI design and an overall performance that is 2.73 times faster than the old version. The client appreciated the proactiveness and ideas our developers brought to the front end, sometimes improving the original design solutions.

Our collaboration has lasted for over half a year and is ongoing. When it comes to challenges and experiences, our front-end developers have gained valuable experience working with a large enterprise-level team and their project management approach. From the technical aspect – working with a microservices-like app infrastructure.

Play

“You provide the most stable and reliable team. The work with you shows a good Return On Investment. Communication is almost real-time and devs are vey adaptive.”

Paulo Almeida
CTO, Neso Brands
Map
View All Reviews
Video Interview
Paulo
CTO, Neso Brands
Interview insights
Why did you choose Lengin?

I’ve ended up interviewing some of your people on the UpWork platform. According to testimonials and references, you provide the most stable and reliable team.

Why did you work with Lengin instead of hiring a local specialist?

It always depends on how you want to see your strategic and operational teams. I’m a big fan of having a small internal team combining a big individual contribution made by freelancers. 

By using local talent, you’re basically limiting yourself geographically for absolutely no reason at all. 

Corporations and executives see the advantage of the hybrid model and have a tendency to be quite conservative. So it’s really tricky to convince them to recalculate how much better it is to have 20 people working for you across the world than having seven people come to an office. 

Hiring those seven people takes away a year, and hiring quality professionals across the world will take two weeks. I think that’s where freelancing and agencies can do a great job.

How can you describe the collaboration with Lengin?

It’s not one of those products where you can’t expect from the beginning to the end how it was gonna look, so there was a lot of experimentation. But the delivered quality is good as well as the speed. The team is quite reliable. 

Also, the price. The work with you shows a good Return On Investment.

How was the communication with remote Lengin devs?

It was almost real-time. We work in different time zones, but they are very adaptive. And even when I give them a task, if they have the slightest doubt, they test me in Slack. The communication was really quick and responsive. 

Would you recommend Lengin?

Definitely! I would recommend you for other projects we’re trying to build, too. 

I can’t estimate you on a scale from 0 to 10 because there are always things that we can improve, of course, but we recommend you for other projects and companies.

Contact us

Tell us about your project

    Thank you for contacting us!
    Post

    We are already processing your request and will contact you within a day. Meanwhile, check out our Blog about software development, business, and insights.

    What’s next?
    1 step Circle

    Our manager or tech specialist will contact you within one business day.

    2 step Circle

    We get to know you, your project, and the development requirements you have.

    3 step Circle

    We offer you the best-fit developers who can join your project in no time.

    Sales Manager at Lengin
    Tell us about your project

      Name
      E-mail or Phone
      Project details
      Thank you for contacting us!
      Post

      We are already processing your request and will contact you within a day. Meanwhile, check out our Blog about software development, business, and insights.