CASE STUDY
Vivonet SaaS Product Suite Redesign
Revamping the entire SaaS product suite with a new design system and key UX improvements.
TL;DR
ROLE
Sole Product Designer,
Front-End Developer
TEAM
1 Product Manager, 2 Back-End Developers, 1 QA
SKILLS
UX, Visual Design/UI, Design System, Research, Front-End Dev
PROBLEM
-
Business Problem: Vivonet's strategic shift to the Enterprise market requires rebranding its legacy SaaS platform to align with the newly rebranded POS as the next-gen product suite.
-
User Problem: The legacy platform has numerous usability issues and inconsistencies across the product suite, leading to customer frustration.
SOLUTION
Create a new design system to be applied across the product suite, with a clean and modular front-end code to enhance scalability. Additionally, address high-impact, low-effort UX issues.
OUTCOME🚀
Launched EMv3—A modern product suite with significantly improved consistency and usability.
-
Over 80% of users opted to stay in the new experience during the beta launch.
-
Significantly improved consistency, usability, and scalability across the product suite.
-
Ultimately contributing to the company's acquisition by Infor one year later.
🎬STORY BEGINS
What is 'Vivonet Enterprise Manager (Now Infor POS EM)'?
-
A B2B SaaS platform for food service management enterprises to configure settings on the Vivonet cloud-based restaurant POS.
-
It includes a product suite for managing menu items, POS buttons, employees, discounts, taxes, inventory, reports, and more.
The Backstory
It started with a marketing rebrand...
When I joined Vivonet, the company had already hired an agency to design a new logo and POS UI.
However, its SaaS products were left without rebranding.
The legacy UI
The ask: "Just make it pretty."😂
As the first and only product designer hired, I was tasked to rebrand the entire SaaS product suite.
Discovery: Should it just be a facelift?
To fully understand the goals and challenges, I started some discoveries:
Meet with stakeholders
Finding: The company aims to position this as a next-gen product suite targeting large enterprise clients.
Meet with devs
Finding: We don't have front-end developers, and the messy legacy HTML and CSS hinder improvements.
Heuristic review
Finding: There are many obvious usability issues, some seemingly easy to fix.
Meet with marketing
Finding: Marketing doesn’t have any branding guidelines or assets for the web product UI.
Interview with users
Finding: Poor usability is a much bigger concern than the outdated & inconsistent UI.
Component audit
Finding: Numerous UI components and templates from these legacy products can be consolidated and reused.
Solution (Part 1): Modernize the UI with a new design system
Strategy:
-
Design a unified look and feel for all products.
-
Create a design system to be reused across the product suite.
-
Refactor the outdated HTML and CSS.
New design system
Created a style guide and built a web component library for all the UI elements with HTML5, SCSS and Angular JS.
New icons
Designed modern icons for each module & product.
Responsive layout
Got rid of the annoying horizontal scroll bar, every page is now responsive and mobile-friendly.
Refactored the messy front-end code
-
Upgraded to HTML5, converted CSS to SASS
-
Modularized the files for scalability.
Solution (Part 2): Fix the high-impact low-effort UX issues
Strategy for identifying and prioritizing UX issues:
-
Gather the top UX issues from user interviews and heuristic evaluation.
-
Invite the team to rate each issue by UX impact, business impact, dev effort.
The UX enhancements
The revamped product suite
A modern, consistent look and feel across ALL products, with enhanced maintainability, scalability, and usability.
Outcome🚀: Over 80% of beta users chose to stay with the new experience during the transition, leading to the successful acquisition of the product suite by Infor just 1 year later.👏
💌THE END
NEXT
🚀Launched in 6 months, achieved 270% client growth in the 1st year, secured additional government funding.