Saptak Portfolio 2024

Pincode Topical UI Campaign

Product & Visual Design

Winter Carnival Homepage Achieves 20-23% CTR Performance

The Business Objective

To boost Average Order Value (AOV) and promote category items, the goal was to enhance discoverability on the app's homepage. Insights from past data showed increased shopping activity during festive and special occasions.

The Solution

The solution focused on visually engaging designs to showcase a wide selection of items. To leverage this trend, we strategically implemented "topical campaigns" to enhance category discoverability within the app.

Team Members

Product Managers, UX Designers, UI Designers, Illustrator, Business Growth Team, Copy Writer and Engineering Team.

Timeline

1.5 weeks for research, ideation, implementation and execution.

Challenges

Given the current development framework, technical constraints, and a tight 1.5-week timeline until the next sprint, we leveraged existing UI widgets (more about this below) to execute the campaign. By strategically combining Design System widgets in varied ratios, we efficiently delivered the entire campaign.

My Contribution

My contributions included campaign ideation with the business and product teams, UI and visual design, lo-fi wireframing, campaign strategy, S2 title bar guideline updates (widget ratio fixes), style guide updates, design system implementations, motion design, and UI review.

High Demand Items and Wide Selection

Based on previous data, we identified high-demand products on the app and planned the selection of products and brands for this UI campaign. (skin care, tea, soups, veggies etc…)

To showcase a wide range, we introduced "Native Pages" accessible from the app homepage. This screenshot of the excel sheet demonstrates how we effectively sorted items and brands while mapping them to existing UI widget types (on the left).

Based on previous data, we identified high-demand products on the app and planned the selection of products and brands for this UI campaign. (skin care, tea, soups, veggies etc…)

User Flow & IA

We planned a simple and user-friendly flow, utilizing the homepage to highlight top-demand items with a visually appealing theme. Users were redirected to native UI pages to explore a wider selection of products. The final item selection and their respective native pages is shown in the screenshot diagram below.

Wireframing, Grouping items and Existing UI widgets

Once the user flow was finalized, we moved on to designing the wireframe. The focus was on effectively showcasing high-demand items, grouping similar products together (e.g., tea and coffee, followed by milk-based items like cheese and paneer). These groupings were mapped out as shown in the screenshot below.

We ensured the wireframe utilized the existing UI widget framework already built by the dev team for quick deployment without creating new components. For example, the "Grids" widget, a UI component supporting images and text labels, offers multiple layout options such as 2-grid, 3-grid, and 4-grid layouts. Additionally, the "Section Header" widget, an edge-to-edge image or Lottie component, was used. The "Item Carousel" widget pulls catalog item information directly from the store and includes an "Add to Cart" button for quick and seamless item addition.

Using these widgets, we crafted a visually appealing theme that seamlessly connected the narrative from the homepage to the native pages.

Section Header and Grids in App Homepage

For the homepage, we chose a combination of a section header and 3-grid layout. This setup was ideal for highlighting the top three high-demand item categories while ensuring minimal space usage, as the app homepage already contains numerous UI components.

Various Other UI widgets used in the Native pages

We discussed the importance of each category and item with the product and business teams to determine which should be promoted on the native pages, displaying them with the appropriate UI widgets. The screenshot below illustrates the various UI widgets with various ratios available for specific use cases.

Title bar Component

To establish the context for the native page, we used a Title Bar component to display the "hero image." I was also responsible for discussing the acceptable specifications for these components and sharing them with the team.

Visual Design Direction

With the structure finalized, we focused on creating a visually appealing theme to connect the promoted items and the narrative. We chose the "Winter Carnival" theme, which aligned well with high-demand items like skincare products, tea, soup items, and vegetables. For the visual direction, we opted for a frosted blue-ish glass look, strategically differentiating it from the Christmas campaign already running on the app homepage, which featured a red theme and a prominent title bar.

Visual Design Explorations - Homepage

As shown in these explorations, we began "filling in" the wireframes with visually appealing themes and micro-animations. Based on previous data, we incorporated branded product images, as users prefer them. We pulled in item category brand images and infused the "winter" theme to create a cohesive entry point for the native pages.

Visual Design Explorations - Native pages

As shown below, the same Winter theme is carried forward and applied to the Native pages and their respective grids, creating a seamless context. The visual theme is a combination of strong copy that complements the design. We always discuss the top items (Lotus face wash, Nivea cream etc…) from each category to ensure they are displayed with maximum visual appeal. In cases where branded images are unavailable, we use generic images. (Chikki, Til, Oil & Ghee etc…)

Motion Design

Given the high impact of this project, we ensured it was prominently emphasized on the app homepage. I also created the micro-animations for the homepage section header, which supports Lottie. Here's a preview of how I layered the design, incorporating a particle system snow effect.

Try the Prototype

Click the link above to preview the prototype of the entire user journey.

Impact

On the Winter Carnival homepage grids, the "Veggies" category performed the best, achieving the highest CTR despite having the same format as the Food and Non-Food categories. This indicates a preference for grocery/vegetable items over other categories.

The CTR for the three grids on the homepage ranged from 20-23%. Additionally, we learned that a more compact grid design and animated section headers outperform static ones.