Customizing Online Store at SalonInteractive

The problem

Beauty professionals faced a fundamental disconnect with their online stores. These creative individuals saw their digital storefronts not as a reflection of their unique identity but as a generic, one-size-fits-all solution.

• Limited customization led to a disconnect between beauty professionals and their online storefronts, impacting user satisfaction.
• The lack of customizable options placed SalonInteractive at a competitive disadvantage in a market valuing personalization.
• A clear business imperative to enhance the online store experience to strengthen the connection between beauty professionals and their digital presence, thereby boosting engagement and platform growth.

Before diving into the data and conversations, I established clear goals for my research. Here are the key goals I set:

• Identify key customization features valued by beauty professionals.
• Benchmark industry standards and trends in online store customization.
• Assess technical comfort levels among beauty professionals regarding online store management.

Competitive Analysis and Industry Trends

I examined industry leaders like Shopify, BigCommerce, Ecwid, Mailchimp, and Square, noting a strong trend towards offering a range of customizable templates, drag-and-drop interfaces, and integration with high-quality image sources. These platforms commonly emphasized ease of use, allowing users with minimal technical expertise to create highly personalized online stores.

• Diverse selection of customizable templates to cater to various business needs and aesthetics.
• The integration of drag-and-drop interfaces simplifies the customization process, enabling users to intuitively arrange elements and personalize their online stores without extensive technical expertise.
• Platforms prioritize integration with high-quality image sources, ensuring users have access to visually appealing content to enhance their online stores' appearance and appeal.
• Across the board, platforms prioritize ease of use, focusing on intuitive design and user-friendly interfaces to empower users of all skill levels to create highly personalized online stores effortlessly.

Beauty Professional Tech Interaction

Beauty professionals often lack the time for complex website customization, preferring intuitive tools that offer significant visual impact with minimal effort. Their primary interaction with technology revolves around efficiency and effectiveness, highlighting a gap in existing solutions that offered limited personalization capabilities.

Key User Insights

1. A strong desire for creative freedom within the confines of easy-to-use tools.
2. The importance of high-quality imagery and simple yet impactful customization options like themes and hero header adjustments.
3. Older designs and features previously considered but shelved had potential value if updated to current user expectations and technical standards.

Moving into the Define phase, the focus shifted to deciding what features should make it into the first iteration. The card sorting exercise with stakeholders was instrumental here, helping to categorize features into Must Have, Like to Have, and Phase 2.

Must Have

• Theme selection inspired by successful salon branding.
• Hero header customization for layout, copy, and images.
• Options to upload images or select from a high-quality library.
• Features for showcasing categories, brands, products, and new arrivals.
• Integration of social media links for broader online presence.

My initial vision encompassed a wide array of customization options to cater to the creative aspirations of beauty professionals. However, recognizing the need to balance ambition with the project's scope and technological constraints, I honed in on core modifications.

Crafting Themes

Creating the five distinct themes for the online store was a substantial endeavor. Each theme required a unique color scheme, and overall aesthetic, effectively translating to crafting five different online store designs. This process was challenging, not only in terms of the sheer volume of work but also in maintaining simplicity and usability across each theme.

To expedite the design process for the five unique themes, I developed a comprehensive design system within Figma. This system allowed for consistent yet flexible design elements across themes. Leveraging the 'Themer' plugin, I could swiftly switch designs among the themes with just a click, significantly enhancing efficiency and ensuring a cohesive user experience across different aesthetics. This approach not only streamlined the design phase but also enabled a robust framework for future expansions and iterations.

Curated Image Library

Opting for the image library Unsplash instead of allowing user uploads was a strategic decision to streamline the customization process. This choice mitigated the risks associated with image quality control and copyright issues, ensuring that all available images were of high quality and legally compliant. By integrating a curated library of professional, license-free images, we provided beauty professionals with a diverse selection of visuals to enhance their online stores. This approach simplified the customization experience, enabling users to focus on personalizing their stores without the complexities of sourcing and uploading images themselves.

Real-Time Preview

A key decision was to implement a preview feature, allowing users to see their changes in real-time before finalizing their store's look. This choice sidestepped the need for a more complex inline editing tool, simplifying the customization process for our users.

During the implementation phase, I focused on testing the components developed from my design system. This hands-on approach allowed me to evaluate how well the new features aligned with user needs and the technical realities of implementation.

Recognizing the importance of meeting our development timeline while maintaining high usability, I made tough decisions to cut or simplify features. This not only expedited the development process but also ensured we were delivering a streamlined and effective user experience.

Post-launch

My attention turned to analyzing user interactions with the new features. Through in-depth examination of user session recordings, we uncovered specific areas for improvement:

• Identified challenges with navigation within the hero header, particularly in accessing different customization options.
• Noticed usability issues with text fields, such as unclear labeling or insufficient guidance on input requirements.

In response to these findings, we swiftly implemented targeted adjustments to address these issues. . These refinements not only improved the overall usability of the platform but also demonstrated our commitment to continuously enhancing the user experience based on real-world feedback.

The implementation of the new features resulted in significant success metrics for SalonInteractive. Within just five weeks of the rollout, over 1,400 salons enthusiastically embraced the opportunity to update their online store branding. This surge in user engagement not only reflects the platform's enhanced usability but also underscores its growing importance as a valuable tool for beauty professionals. The substantial uptake of the new features reaffirms SalonInteractive's position as a trusted partner in empowering salon owners to elevate their online presence and drive business growth.

What I learned

• Balancing Ambition with Feasibility. Ensuring that my design ambitions align with practical implementation, recognizing that just because I can add numerous customizations doesn't guarantee user adoption.
• Iterative Testing & Refinement. Continuous iteration based on user feedback is essential for fine-tuning the user experience and driving meaningful engagement.
• Understanding User Dynamics. Deepening our understanding of user behavior and preferences is paramount in shaping future product initiatives and driving sustained success.