Balancing Consistency and Adaptiveness
Elevating Grocery Shopping with Speed, Convenience, and Visual Delights
Project Background
At Natuno, we’re passionate in helping our partners to enhance their digital experiences through our expertise in UI/UX design.
That's why we were excited to collaborate with Primaro, a commerce company focused on delivering high-quality and fresh groceries. Their goal was to optimize the ordering flow for users, ensuring a delightful experience throughout the process of ordering goods.
Through this collaboration, we refreshed Primaro’s look, streamlined the ordering process, added new exciting features, and developed a comprehensive style guide.
Our Approach
Our approach to the Primaro revamp project was to strike a balance between consistency and adaptiveness. As Primaro already had an original brand image and design, our goal at Natuno was to refresh and refine the app while staying true to the existing brand identity.
We aimed to help Primaro maintain the consistency of their design, while also delivering a flexible and responsive app that meets the changing needs of their customers.
Consistency is a crucial aspect of branding, as it helps to create a recognizable and memorable image.
For Primaro, we approached this by reorganizing its style guide. This guide outlined the use of color, typography, and other branding elements, providing a clear and consistent visual representation of the Primaro brand.
Our goal was to ensure that every piece of element produced for Primaro would be immediately recognizable and authentic to the brand.
What We Do
Improving Figma’s Organization & Assisting with Style Guide Consultation
When Primaro approached us, their Figma file which stored their design elements, such as colors, buttons, icons, and illustrations was still in disarray. Additionally, the visual design within the app was inconsistent and had yet to be standardized in several aspects.
Our initial step then was to reorganize this file in line with Natuno’s standards, categorizing each screen or page. To maintain consistency, we also reorganized its style guide in Figma by gathering their prior design work and providing clear documentation for future reference.
Guidelines for logo usage, color, and typography
Component library for ease of use and consistency
Usage guidelines for illustrations and icons within components
Easing Checkouts with Credit Card Payment Option
Primaro wanted to improve its payment options, as offering multiple payment methods has become crucial for online businesses. Limited payment options are one of the reasons why online shoppers abandon their carts without following through on a purchase. So, the Primaro team asked Natuno for help to develop a new feature for credit card payment methods.
Our strategy centered on establishing a smooth payment flow. It began by outlining a low-fidelity design for credit card payment process that considered various scenarios like managing multiple cards and handling errors. Through ongoing dialogue and collaboration with the Primaro team, we ensured our solution met their needs and expectations.
Boosting Conversion through Primaro's Checkout Page Revamp
The checkout page is the final step in the user’s journey, thus it’s necessary to make it as smooth and effortless as possible to boost conversion. The previous checkout and order detail page of Primaro needed to be improved on some parts, such as the call-to-action (CTA) buttons which were not as visible as they should have.
We made the CTA buttons more visible and added essential information, such as delivery time, delivery fee, and payment method selection to ensure users have a complete understanding of the process.
Simplifying Navigation with Contextual Icon Use
Previously, the uniformity of icons in the FAQ section posed challenges for users to quickly scan, differentiate, and locate the information they needed.
To address this challenge, we introduced contextual icons as a solution. We categorized the questions in the FAQ section, and assigned each category a unique icon.
Crafting Eye-catching App Banners
As Primaro prepared to launch its product and service, it lacked app banners to showcase on the Appstore and Playstore. The app banners serve as the first impression for users, so it was crucial to accurately reflect Primaro’s quality and values.
To address this, we created graphical content that includes screenshots of the app and copy highlighting Primaro’s features and values.
