Redesigning HydroPeptide's Shopify Theme

Transforming Online Presence in Skincare Retail

...
I revamped Hydropeptide's landing page from cluttered to captivating, enhancing user engagement and visual appeal through streamlined redesign.

Roles and Responsibilities

I led the project, assuming the Senior UX Designer role. From client interviews to educational initiatives on Shopify design tools like the combined use of Figma and Builder.io, I played a crucial role in creating comprehensive mockups and wireframes. Collaborative efforts within the team were fundamental to the project's success.

Client/Company:

The project was undertaken for HydroPeptide, a leading skincare brand seeking a website revamp to align with its innovative vision.

Timeline

Days 1-3: Insightful Client Interviews:
    • Conducted remote interviews via Microsoft Teams, using the Observational User Interview Approach for efficient, unfiltered insights into user perspectives.
  • Days 3–4: Artifact Gathering & Walkthroughs:
    • Gathered client artifacts with screenshots for contextual understanding. Conducted formal walkthroughs to enhance comprehension.
  • Days 5–9: Strategic Research & Theme Presentation:
    • Explored the Shopify Theme Store, aligning themes with HydroPeptide's vision. Presented findings and theme options strategically.
  • Days 10–25: Comprehensive Design Development:
    • Developed low-fidelity mockups, user flow diagrams, style guides, design systems, and component libraries. Iteratively crafted high-fidelity wireframes, impressing the client with successful deliverables.
  • Days 26–30: Reflective Retrospective & Industry Exploration:
    • Conducted a project retrospective, proposed improvements, advocated for visual collaboration tools like Zeplin, and deepened understanding of Shopify theme design and liquid themes, gaining expertise in a new industry facet.
  • Project Summary:

    The main objective was to modernize and enhance the HydroPeptide website, aligning its virtual identity with the cutting-edge products that define the brand.

    A. Existing Challenges:
    • The current HydroPeptide website lacked a modernized and responsive layout, hindering the brand's representation online. User experience issues were observed, impacting navigation and potentially deterring engagement with the brand.
  • B. Project Objectives:
    • The primary objective was to modernize and enhance the HydroPeptide website by redesigning its Shopify theme. Alignment with the brand's vision of innovation in skincare was crucial to ensure a cohesive online representation.
  • Problem Statement:

    The existing HydroPeptide website faced challenges – an outdated design and a non-responsive layout that hindered the brand's representation. This impacted user experience and posed potential threats to online objectives. The project's scope involved efficient planning and execution within a one-month turnaround, addressing challenges in remote collaboration and industry knowledge gaps.

    A. Specific Issues:
    • Outdated Design: The existing Shopify theme did not reflect the contemporary image of HydroPeptide's innovative skincare products. Non-Responsive Layout: The lack of a responsive design hindered user experience across various devices. User Engagement: Potential challenges in user engagement were identified, necessitating a more intuitive and visually appealing design.
  • B. Constraints:
    • Limited Timeframe: The project faced a one-month turnaround, requiring efficient planning and execution. Remote Collaboration: Coordinating team members across time zones presented challenges in daily standups and communication via Microsoft Teams. Industry Knowledge Gap: Limited knowledge of the skincare industry required quick familiarization through user interviews and blogs.
  • ...
    Presenting the proposed Shopify theme moodboard to Hydropeptide, showcasing a modern and sleek design tailored to elevate their online presence and captivate their audience.

    Solution:

    The journey encompassed project planning, client interviews, research, mockup creation, and high-fidelity wireframes. The systematic and service-centric research approach involved defining goals aligned with project objectives. Tangible outcomes included high-fidelity mockups, style guides, and positive client feedback, showcasing the transformative impact on HydroPeptide's brand identity.

    Process:

    I led the creation of low-fidelity mockups, defining basic page layouts and the user flow diagram. The research involved client interviews using the Observational User Interview Approach, guiding users remotely via Microsoft Teams. Methods included context studies, the user pain points exploration, and competitive audits. Formal walkthroughs and prototype testing with stakeholders and their current website validated the proposed solutions.

    ...
    Introducing the redesigned layout component library, infused with new features and enhancements, aimed at providing Hydropeptide with a more versatile and intuitive theme customization experience.

    Presentation and Communication:

    Strategic decisions in presenting findings involved tailoring communication to resonate with stakeholders and the board, utilizing Microsoft Teams and PowerPoint for seamless collaboration and impactful presentations.

    ...
    Transforming the product page: A side-by-side comparison showcasing the modernized and responsive redesign that enhances the overall user experience, elevating Hydropeptide's online presence.

    Conclusion:

    In conclusion, the HydroPeptide Shopify theme redesign stands as a testament to the transformative power of UX design. Improved user experience, enhanced accessibility, and the implementation of a robust design system all contributed to elevating HydroPeptide's online presence.

    Key Takeaways:

    Defining a component library early in the design process was pivotal. Leveraging tools beyond Microsoft Teams enhanced project communication. Emphasizing user interviews and blogs for quick industry familiarization was crucial. Reflective practices and project retrospectives are essential for continuous improvement. Exploring the design of liquid themes expanded my expertise in the industry.

    Conclusion:

    In conclusion, the "LegalLens" project resonates through heightened transparency and efficiency in legal workflows. Key takeaways underscore the power of collaboration, adaptability, and the unwavering commitment to a user-centric design philosophy. The journey continues, with these insights poised to shape the future landscape of UX design.