FROM INSTAGRAM TO FULL FLEDGED E-COMMERCE WEBSITE

FROM INSTAGRAM TO FULL FLEDGED E-COMMERCE WEBSITE

Role

UX/UI Designer

Research

Usability Testing


Tools

Figma

Miro

Shopify


Overview

Lavish Arrangements started as a small business on Instagram, leveraging its social media presence to sell beautiful, custom flower arrangements. As the business grew, the company wanted to transition from a purely Instagram-based model to a professional website where customers could browse products, place orders, and explore services more efficiently. My role as a UX/UI designer was to create a seamless, user-friendly, and visually appealing website to serve their evolving business needs while preserving the brand’s unique identity.

Role

UX/UI Designer

Research

Usability Testing


Tools

Figma

Miro

Shopify


Problem

The client’s primary challenge was to transition from Instagram, which primarily served as a platform for showcasing products and receiving orders through direct messages, to a full-scale e-commerce website. The key issues to address were:

Limited E-Commerce Functionality

Instagram's DM-based ordering system was inefficient and lacked key features like product catalogs, easy checkout, and secure payment options.

User Experience Consistency

The brand’s Instagram presence, while visually appealing, didn’t offer an optimal browsing experience. The transition needed to ensure continuity in the brand's identity and customer experience.

Mobile Responsiveness

As the majority of the client’s customers interacted via mobile devices, ensuring a mobile-first design was crucial.

Research and Discovery

To lay the foundation for the design, I conducted thorough research:


User Interviews: I interviewed a sample of Lavish Arrangements' loyal customers, Instagram polls, to understand their expectations and opinions for the new website.


Competitive Analysis: I examined competitors in the floral industry and other small businesses transitioning from social media to websites. I analyzed their e-commerce features, product presentation, and overall user flow.


Brand Analysis: I reviewed Lavish Arrangements' branding elements on Instagram, including colors, typography, imagery, and tone of voice. I worked closely with the client to ensure the website retained the personality and values that made them successful on Instagram.

Instagram Polls

Wireframing & Prototyping

The design process began with low-fidelity wireframes to visualize the structure of the website. I mapped out key pages, including the homepage, product catalog, individual product pages, and contact page. After gathering feedback, I created high-fidelity prototypes with more detail on colors, typography, and imagery.

Responsive Design

I implemented a mobile-first design, ensuring the website was fully responsive across all devices, with a particular focus on a smooth experience for mobile users, who made up the majority of the client’s audience.

UI Design

I aimed to create a visual design that aligned with the brand’s identity on Instagram while offering a more refined, user-friendly experience. Key design elements included:


Color Palette: I used soft, natural tones of beige, pinks, and whites to mirror the colors seen on the Instagram feed.


Typography: Clean and elegant typography, reflecting the classy and artistic nature of the flower arrangements.


Imagery: High-quality, vibrant images of flower arrangements took center stage throughout the site to inspire and captivate visitors.

Key Features Implemented

E-commerce Functionality: Integration of a shopping cart, product catalog, and secure payment system (e.g., Credit Card or PayPal).

Customizable Product Pages: Clear descriptions, prices, and the ability to choose from multiple color schemes and add-on options.

Gift Guide & Recommendations: Personalized suggestions based on seasonality, events, and popular trends.

Frequently Asked Question Page: A page compiled of common inquires customers have so they can find answers independently and to reduce the burden on customer support

Key Features Implemented

E-commerce Functionality: Integration of a shopping cart, product catalog, and secure payment system (e.g., Credit Card or PayPal).

Customizable Product Pages: Clear descriptions, prices, and the ability to choose from multiple color schemes and add-on options.

Gift Guide & Recommendations: Personalized suggestions based on seasonality, events, and popular trends.

Frequently Asked Question Page: A page compiled of common inquires customers have so they can find answers independently and to reduce the burden on customer support

Challenges & Solutions


Challenge 1: Balancing e-commerce with the brand’s visual identity.

Solution: I worked closely with the client to ensure that the e-commerce features didn’t overwhelm the design. We focused on a clean, minimalistic approach that highlighted the flowers’ beauty without cluttering the interface.

Challenge 2: Optimizing for mobile while maintaining functionality.

Solution: I used responsive design principles to ensure that all features, from the product catalog to the checkout process, worked seamlessly across various screen sizes.

Challenges & Solutions


Challenge 1: Balancing e-commerce with the brand’s visual identity.

Solution: I worked closely with the client to ensure that the e-commerce features didn’t overwhelm the design. We focused on a clean, minimalistic approach that highlighted the flowers’ beauty without cluttering the interface.

Challenge 2: Optimizing for mobile while maintaining functionality.

Solution: I used responsive design principles to ensure that all features, from the product catalog to the checkout process, worked seamlessly across various screen sizes.

Results & Impact

Conclusion

This project allowed Lavish Arrangements to seamlessly transition from Instagram-based sales to a full-fledged online presence. By focusing on user experience, brand consistency, and mobile optimization, the website successfully addressed both the business’s and customers’ needs. The end result was a beautiful, functional site that helped the company grow its customer base while retaining the personal, artistic touch that made them popular on Instagram.

The transition to an e-commerce platform is projected to result in a 15% increase in sales within the first month after launch.

The transition to an e-commerce platform is projected to result in a 15% increase in sales within the first month after launch.

The website successfully maintained the vibrant, creative spirit of the Instagram page while offering an elevated, more professional user experience.

Thanks for checking out my case study!

Thanks for checking out my case study!

Mobile traffic is projected to be increased by 30%, with users spending more time browsing and interacting with the product pages.

Mobile traffic is projected to be increased by 30%, with users spending more time browsing and interacting with the product pages.

The website successfully maintained the vibrant, creative spirit of the Instagram page while offering an elevated, more professional user experience.