Balancing Consistency and Adaptiveness
Elevating Grocery Shopping with Speed, Convenience, and Visual Delights
The Context
Primaro is an commerce company focused on delivering high-quality and fresh groceries. Their goal was to streamline the user ordering process for efficiency and error reduction, and to implement features that engage and retain users on the site.
Through this collaboration, we refreshed Primaro’s visual identity, simplying the ordering flow to reduce errors, introducing new features to retain users, and creating a detailed style guide for consistent branding.
The Challenge
In facing the Primaro revamp project, our challenge was to strike a balance between consistency and adaptability. Despite Primaro's established brand image and design, improvements were still needed.
This is where Natuno came in, undertaking the task of refreshing and refining Primaro's app while remaining true to their existing brand identity.
The Process
Consistency is a crucial aspect of branding, as it helps to create a recognizable and memorable image.
What is the solution?
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. So, if any extension occurs in the future, Primaro could use the style guide easily.
Our goal was to ensure that every piece of element produced for Primaro would be immediately recognizable and authentic to the brand.
The Solution
Solving Design Problem:
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.
