We helped Argen see the need to make their app mobile-friendly and introduced a seamless mobile experience across all devices.
Argen has been a trusted client of ZEAL for several years. As Argen began to implement QR code features and noticed increased mobile traffic, ZEAL proactively took the initiative to perform a site audit. Our aim was to comprehensively evaluate the current state of Argen's web application in terms of mobile responsiveness and design.
Ensure that Argen's web application offers a seamless experience across all devices.
We initiated the project with a comprehensive audit of the web application, which revealed a majority of pages needing mobile design adjustments. We then proceeded to create an application map, methodically designing the mobile version for each page. While adjusting all desktop designs to the smaller viewports, we stressed the importance of accessibility and improved color contrast, a minimum of 44px touch targets, and a mobile menu that is a joy to expand.
To bring the improved mobile designs to life, we employed SCSS for styling and used BEM syntax to stay organized. Adopting a mobile-first design, we set styling breakpoints for tablets at 768px and desktops at 1024px. ERB was used to construct the pages, with “partials” ensuring modular and reusable code, particularly for elements like contact forms. Integration of viewport meta tags ensured optimal display on mobile devices. This addressed previous issues where desktop versions were scaled down to fit smaller screens, compromising readability and navigation.
So far 80% of the pages have been redesigned and made fully responsive. The direct collaboration between Argen's Product Manager and ZEAL's team ensured alignment throughout the project and a smooth process in publishing the mobile version of the app. Soon, Argen.com will be 100% mobile-friendly and available for its customers from all devices.
Through regular weekly stand-ups and efficient handoffs between our design and frontend development teams, we reinforced the importance of constant communication in achieving desired outcomes. The unique background of our frontend developers in design further ensured a quick and smooth transition from design to implementation. Regular design and code reviews delivered quality results to our long-term client.
Working with ZEAL is a game-changer for us at Argen.com. In the past couple of months they made our site mobile-friendly and much more accessible. Working directly with the designer and developers on the team makes the process swift and easy. Highly impressed with the results!
