EZLynx
EZLynx Mobile
The EZLynx web platform that I inherited when I joined the company was not responsive i.e. it was designed to work on desktop only. There was a mobile version of the code, so engineers had to maintain two copies of the code, one for the desktop version, and one for mobile. It was becoming increasingly difficult to maintain feature parity between the two. Over time, the mobile version had started to develop a lot of bugs that made it harder and harder to update.
I spent over a year making a business case to the executive team to update the front-end design. I presented a number of advantages including:
- Make the web app responsive from desktop to tablet to mobile phone.
- Removing the need to maintain a separate mobile code base.
- Enable theming, something that was not possible in the legacy platform due to the complexity of the code and the length of time required.
- Give the developers a design system with a shared component library.
Creating a design system would offer additional advantages:
- Speed up development.
- Reduce tech debt.
- Ensure platform wide design consistency.
EZLynx 5: The New Design System
Once I got buy in from the executives and the development team, it took many more months of hard work to build the design system. I used Material 2 as a foundation for the design system as it came pre-packaged with a fantastic library of fonts, icons, and a beautiful color palette, and a deeply researched and thoughtful set of guidelines on how to create an amazing customer experience.
At the time I was acting as both a design leader and an individual contributor, managing 9 scrum teams, coordinating between 6 product managers, and building up a small design team. I was always looking for any good design decisions that could save me time and help my team be productive.
The new design system was called EZLynx 5.
Screens
I started ideating on the mobile responsive screens after I had put the finishing touches to the desktop and tablet responsive screens. Based on my past experience doing responsive design, I knew that I had to tackle the designs for each breakpoint separately.
Shrinking the new EZLynx 5 desktop screens to mobile ended up being a massive effort. A typical EZLynx screen has dozens of fields. I had to make a lot of adjustments to the flow, spacing, font sizes, and layout to fit them on a smaller screen, and ensure that the touch targets were still big enough to reduce frustration.
Below are a sample of the mockup from my experiments to squeeze the incredibly complex app into a mobile device.
Conclusion
EZLynx 5 was the biggest responsive design project I have worked on. I ended up working with three (and eventually four) scrum teams across two geographic dispersed locations — Dallas (Texas, USA) and Bangalore (India).
I worked closely with the front-end team to ensure the mobile tweaks to the code were integrated and tested thoroughly before they went to production, which happened just a month before the pandemic hit. Despite launching such a major change at a very anxiety inducing time for our customers, I'm proud to say that we had almost 97% positive feedback on the new design. I consider that a rousing success.
So, How can I help you?