Introduction

Nautinati, a direct-to-consumer (D2C) brand specializing in kids' fashion, The goal of this project was to enhance the product's user interface and user experience, making it more engaging and ultimately increasing conversion rates. Our target is to achieve a secondary net sales value (NSV) of INR 35 crore, with an operating EBITDA margin of 4% and a total EBITDA margin of 11% for NautiNati. The redesign aimed to align with modern design trends while addressing user pain points and optimizing the shopping experience for parents, primarily moms, aged 25-40.

Role and Objectives

As a product designer, my responsibilities encompassed the redesign process, from research and wireframing to prototyping and user testing.

Objectives:

1. Improve User Engagement: Create an engaging and intuitive interface that captures and retains user interest.

2. Enhance Visual Appeal: Develop a visually pleasing design that aligns with Nautinati's brand identity and appeals to our target audience.

3. Increase Conversion Rates: Optimize the user journey to streamline the purchasing process and reduce friction points.

My Design Process

1. Research

   a. Primary Research
   Conducted interviews and surveys with parents (especially moms aged 25-40) to understand their shopping behaviours, needs, and pain points. Key insights revealed:

   • Preferences: Convenience, easy navigation, and quick access to information are crucial.

   • Challenges: Difficulty in finding specific products quickly, frustration with complex checkout processes, and a desire for personalised recommendations.

   b. Secondary Research

   • Analysed industry trends, competitor platforms, and best practices in e-commerce design.

   • Identified successful strategies such as intuitive filters, personalised shopping experiences, and mobile-first design.

     
     

2. Wireframe

   a. Initial Sketches

   • Developed low-fidelity wireframes to map out the structure and flow of the redesigned platform.

   • Focused on key user journeys, such as finding products, viewing details, and completing purchases.

   b. User Flow Optimization

   • Streamlined user flows to reduce friction points and enhance ease of navigation.

   • Prioritised features such as quick search, Studio section, Top and Inline filters, Add to bag from PLP page, Trust badges, How to take care of me, why mom's love us, Prioritised Price over the title, Introduced half cart for a quick checkout process and functionality of easily changing size and quantity in Cart and several growth hacks.

     
     

3. Setting Up a UI Theme

   a. Brand Colors & Typeface

   • Colours: Selected a colour palette that reflects the Nautinati brand while appealing to parents. Used soothing, soft colours to convey a sense of calm and trust.

   • Typeface: Chose a typeface that is both modern and readable according to a kids website , ensuring it complements the brand’s identity and is legible across devices.

   b. Design System

   • Softmorphism: Applied the softmorphism design trend, which includes soft textures, gradients, and subtle shadows. This trend helps create a visually appealing and comfortable user interface.

   • UI Elements: Designed buttons, cards, and other UI components with rounded edges and layered effects to enhance the tactile feel of the interface.

   c. Animation & Engagements

   • Integrated subtle animations to make interactions more engaging without being distracting. Examples include smooth transitions between pages and animated micro-interactions (e.g., button hover effects).

   • Storytelling Concept: Incorporated storytelling elements with mumma and a baby bear into the design to create an emotional connection with users. Used visuals and copy that resonate with the values and experiences of parents.

     
     

4. Page Design

   Homepage: Designed a clean layout that highlights key categories, Trust Badges, Seasonal sections, studio sections with fun elements of mumma and baby bears across the Home Page for a better interaction and product visibility. Added a prominent search bar and easily accessible Hamburger menu.

    

   Product Listing Page (PLP): Implemented an intuitive grid layout with a large and small product cards with Add to bag button in PLP Page. Introduced Top and Inline Filters for size, colour, and category to help users find products quickly.

    

   Product Detail Page (PDP): Focused on detailed product information, introduced Trust tags and sections like Why Mom's love us for building trust as it was a new brand. Also How to care of me section to guide the Mom's and made Add to cart button sticky for easily accessible.

    

   Cart: Introduced half cart for a quick checkout process and functionality of easily changing size and quantity in Cart and several growth hacks.

    

   My Account: Designed a user-friendly page for managing orders, personal information, and account settings, with easy access to order history and tracking.

    

   Post Orders: Improved the post-purchase and return/ exchange experience with clear order tracking, support options, and post-purchase recommendations.

    

   Static Pages: Updated blogs, terms and conditions, and FAQs to be informative and consistent with the overall design theme.

5. Responsive Design

   a. Mobile Optimization

   • Ensured that all pages and features are fully responsive and optimized for various screen sizes, from Mobile to Desktop

   • Focused on touch-friendly elements and simplified navigation for mobile users.

   b. Desktop Experience

   • Optimized the desktop experience to utilize larger screen real estate effectively while maintaining a clean and organised layout.

     
     

6. Design System

   a. Component Library

   • Created a design system that includes interactive components (buttons, cards, modals) and standardised UI elements for consistency across the platform.

   • Defined text styles, colour styles, and spacing guidelines to ensure a cohesive look and feel.

   b. Variables and Styles

   • Established variables for colours and fonts

     
     

7. Interactive Prototyping

   High-Fidelity Prototype

   • Developed a high-fidelity interactive prototype to showcase the redesigned platform’s look and feel.

   • Presentation: Presented the prototype to stakeholders including founders, brand and marketing teams, and product managers for feedback and approval.

     
     

8. Design Handover

   Asset Delivery

   • Provided developers with all necessary design assets, specifications, and documentation for implementation.

   • Support: Collaborated with developers to ensure accurate implementation of the design.

     
     

9. Design Testing

   QA Testing

   • Conducted comprehensive QA testing to identify and resolve any issues related to design consistency, functionality, and performance.

10. User Testing

    Internal Testing

    • Performed user testing among office staff to gather initial feedback on usability and design.

    • Iteration: Made adjustments based on feedback to refine the user experience.

11. Release & A/B Testing

    a. Phased Rollout

    • Released the redesign to 10% of users for initial testing and collected data on user interactions and performance.

    • A/B Testing: Conducted A/B testing to compare the new design’s effectiveness against the old one and make data-driven decisions.

    b. Full Deployment

    • Based on positive results from A/B testing, rolled out the redesign to all users within a few days.