Ooma

Problem Statement

As Ooma's product line expanded, the company faced problem with the inconsistent user experience across its different applications. This was due to the use of different frameworks and libraries in the development of each product, which led to a disjointed look and feel. This inconsistency made it difficult to scale the products and maintain them effectively. Also, supporting multiple themes for white-label partners became difficult

Solution

Although all the problems cannot be solved at once, the goal was to improve on the following

• Build a stronger Brand Identity
• Improved & Consistent User Experience across all Ooma applications
• Platform Agnostic i.e.web, mobile (web), tablet
• Improved accessibility of all applications
• Ability to support multiple themes
• High velocity

With the above goals in mind, the Ooma team came up with a new design system called Brio. Brio was designed to be used across all Ooma products and to provide a consistent, cohesive user experience. It is based on material design principles and uses the Material-UI (MUI) library as a component library. This helps to create a uniform look and feel for all Ooma products, with minimal customization required.

Saeloun is currently helping Ooma migrate some of its products to Brio. One of the first products to be migrated is the Meetings app, which has already seen significant improvements in terms of usability, accessibility, and overall aesthetics. The migration to Brio has helped to create a cleaner, more modern look for the Meetings app.

Why Material design?

• Material is a design system provided by Google. Google maintains Material Design and keeps extensive documentation for how to use and implement it.
• Material Design was built on a mobile-first sensibility, which makes sense considering its original purpose was for designing Android apps.
• The material design allows more room for creativity.
• Adapts well to all screen sizes
• Creating components from scratch and coming up with a custom UI library was not feasible. So the Ooma team decided to use the existing library Material UI as a component library which is based on Material design.

Saeloun’s Contribution

By collaborating with Saeloun, Ooma was able to take its Office product to the next level, making it more user-friendly and efficient for its customers. This is just one example of how Saeloun has helped Ooma to improve and enhance its products, and we will likely see similar successes in the future as Ooma continues to work with Saeloun to improve and evolve its product line.

• The team migrated the old UI for meetings and guest experience to Brio and it was done in a couple of months.
• Earlier Ooma had different components for web and mobile. With the usage of Material UI, now they do not have to create different components to handle web, mobile and desktop applications. This reduced a lot of development effort.

• The team upgraded the packages and removed redundant packages. Also, the bundle size was reduced significantly.
• Once the team got familiar with Material UI, the development speed improved by 30-40%
• After migrating the first phase to the new UI, Ooma received an amazing response from the customers. Everyone loved the simple, clean and new UI. This helped to increase user engagement.
• The team is helping Ooma migrate the rest of the applications from the old UI to the new one with Brio.

Final Thoughts

In conclusion, Ooma's adoption of the Brio design system has helped the company to overcome the problem of inconsistent user experience across its different products. By using a common design language and component library, Ooma has been able to create a cohesive and consistent user experience, while also improving the scalability and maintainability of its products.