Vita Sports
About me
15%
Brand Awareness
10%
Revenue Boost

Whether you need design or tweak some code, I have the skills and creativity needed to take your project to the next level.

View my projects
View my projects
the project
This is some text inside of a div block.
This is some text inside of a div block.
View live Site

At-a-Glance

VitaSports sought a holistic transformation for their online presence, expressing the need for a comprehensive redesign that would transcend their existing website. Their aspiration extended beyond a mere visual overhaul; they envisioned a digital space that would not only be more user-friendly but also radiate a contemporary aesthetic, aligning seamlessly with modern design standards. At the heart of their request was a desire to showcase their products in the most compelling light, recognising the pivotal role a visually appealing and intuitive website plays in enhancing brand representation and user engagement. The challenge was to craft a virtual environment that not only met but exceeded user expectations, providing an immersive and dynamic experience that resonated with their target audience.

15%
Brand Awareness
10%
Revenue Boost

The Problem ⚠️

Vitasports encountered a significant hurdle as their existing design fell short in effectively conveying the inherent brilliance of their products. The visual representation lacked the vibrancy and sophistication necessary to showcase the unique features and quality of their offerings.

The Solution ✅

In response to the challenge, our strategic solution involved a comprehensive redesign of the website, meticulously incorporating industry best practices for optimal user experience. The objective was not merely to enhance aesthetics but to create a holistic and visually captivating online environment.

The Process

Discovery Call - Introducing myself to the client and finding out their wants and desires for this project. Discussing budgets, timelines and other details specific to project.
Competitor & General Research - Building a case for the project to understand likes and dislikes. Researching trends in the industry as well as UX.
Start Wireframes - Building wireframes for website layout. Making sure the page follows optimal conversion rate optimisation [CRO] as well as User Experience [UX] best practises.
Designing - Adding all brand colours as well as content into designs to bring the concepts to life. This is where the client will give feedback and ultimately approve designs before development.
Development - Building the site in the chosen CMS, integrating content, setting up plugins, AB testing and more.
Training and further support - After the project was launched, we sent the client reports as well as trained them up to be able to use their easy to edit website.

Take a look at the before & after.

Take a look at the site.

User Journey Map

Websites Sitemap

Navigation Improvements

Wireframes [annotated for reasons why]


Design System

Typography

Buttons

Colours


Final Design [annotated for reasons why]

User Journey Map

Websites Sitemap

Navigation Improvements

Wireframes [annotated for reasons why]


Design System

Typography

Buttons

Colours


Final Design [annotated for reasons why]

Approach 🪄

  1. Data Analysis: We began by conducting a comprehensive analysis of XYZ Apparel's website performance, utilizing web analytics tools such as Google Analytics. This helped us identify key areas for improvement, including high-traffic pages with low conversion rates and potential barriers to purchase.
  2. User Experience (UX) Optimization: We conducted user testing and feedback surveys to gain insights into the user journey on the website. Based on this feedback, we implemented UX improvements such as simplifying navigation, streamlining the checkout process, and optimizing product pages for mobile responsiveness.
  3. Conversion Rate Optimization (CRO): We implemented A/B testing and conversion rate optimization strategies to refine website elements such as calls-to-action, product recommendations, and checkout flows. By continuously testing and iterating on these elements, we were able to identify and implement changes that drove higher conversion rates.
  4. Personalization and Recommendations: Leveraging data-driven insights, we implemented personalized product recommendations and targeted promotions based on user behavior and purchase history. This helped to increase cross-selling and upselling opportunities, driving higher AOV.
  5. Marketing Integration: We integrated the e-commerce website with XYZ Apparel's marketing channels, including email marketing campaigns, social media advertising, and search engine optimization (SEO) efforts. This ensured consistent messaging and a cohesive customer experience across all touchpoints.

Results 📊

  • 30% Increase in Conversion Rate: By optimizing the website for user experience and implementing targeted CRO strategies, we achieved a 30% increase in the website's conversion rate within the first three months of implementation.
  • 20% Increase in Average Order Value: Personalized product recommendations and targeted promotions led to a 20% increase in AOV, as customers were more likely to add complementary items to their cart.
  • 25% Increase in Online Revenue: The combined impact of improved conversion rates and higher AOV resulted in a 25% increase in online revenue for XYZ Apparel.
  • Improved Customer Retention: By providing a seamless and personalized shopping experience, XYZ Apparel saw an increase in customer satisfaction and loyalty, leading to higher repeat purchase rates and customer lifetime value.

Conclusion 📝

By focusing on optimizing the e-commerce website for user experience, implementing targeted CRO strategies, and integrating marketing efforts, XYZ Apparel was able to drive significant revenue growth and improve overall business performance. This case study demonstrates the importance of continuous optimization and data-driven decision-making in maximizing the potential of an e-commerce platform to drive sales and profitability.

User Journey Map

Websites Sitemap

Navigation Improvements

Wireframes [annotated for reasons why]


Design System

Typography

Buttons

Colours


Final Design [annotated for reasons why]