Website Redesign for a Supplement Company:
A Case Study
Summary: I redesigned Trimspa's website to give it a modern design and to make it more informative so that it builds trust with users. I also integrated a secure shopping cart that allows their team to manage sales, customers, and marketing campaigns.
View The Final Design Images
Use the links below to see a larger version of each image. View the live website at: https://www.trimspa.com
The rest of this page will discuss my strategy for designing these pages.
About The Product
Trimspa® X32® is a dietary supplement that helps people lose weight.
The Problem with the Existing Website
Outdated Design
The original website had an older design that wasn't mobile friendly and represented a direct response approach. Trimspa sought a modern design that would more accurately reflect their brand and fulfill visitor expectations.
Inadequate Information
Trimspa wanted to include customer testimonials, more information about the ingredients, and also showcase what the company had been up to in the media. The goal was to move away from the direct response layout to a more complete website by providing comprehensive information about the company and its product so a visitor would have all the information they need to make a purchase decision.
Lack of a Content Management System
The original site was built using single HTML files. Because Trimspa wanted a new, larger site with room for expansion, I recommended that the new website be built using a content management system (CMS), which makes adding content and modifying the site design easier and more efficient.
Old Shopping Cart
The original shopping cart was hosted on Trimspa’s server, which meant software updates and maintenance had to be carried out by the company itself. To save Trimspa time and money, I recommended switching to a third part shopping cart that would offer new features for more marketing opportunities and also handle software updates, security, and PCI compliance. This would allow Trimspa to focus on growing their company.
My Role
I was the UX designer for this project and communicated with the company’s management. My responsibilities were to:
- Redesign the website to convey a persuasive, modern look
- Make the website mobile friendly
- Incorporate customer weight loss stories, brand accomplishments, and product details
- Implement a new shopping cart
The Solution
I chose the following solutions based on the project requirements, research-based UX guidelines, and design principles and patterns.
Redesign The Website Using Figma
I first met with Trimspa's management to reviewing the project requirements and brand guidelines. I then used Figma to redesign their website so it has a modern look, reflects their brand, provides important information, and builds trust with visitors. I designed both a desktop and mobile version.
I first met via Zoom with Trimspa's management team to review the project requirements and their brand guidelines. I then used Figma to modernize Trimspa’s website design in a way that clearly reflects their brand, provides all essential information, and builds trust with visitors. For this website redesign I created both a desktop and a mobile version.
My goals for the various pages of the site were as follows:
Home Page
An effective home page should introduce visitors to the company, its products, and to the website itself.
- Show what is for sale - Trimspa’s site is an ecommerce website, so I wanted to make it clear what is for sale on their site. I achieved this by showing the product's bottle and box image, inserting an "order now" link in the menu, and highlighting Trimspa’s money-back guarantee.
- Make options clear - When a visitor arrives on the home page, it should be clear what they can do on the website, why they should want to take these actions, and what the high-priority tasks are. I achieved this on Trimspa’s site by displaying or linking to the product's nutritional facts, a relevant clinical study, customer testimonials, the product guarantee, and an order link. From this redesigned home page, a visitor can now understand all of their options and access the information needed to make a purchase decision.
- Build trust - it's important that your website build trust with its visitors if you expect them to invest their time and money into your products. I achieved this by using a modern and consistent design layout and including a phone number, product guarantee, testimonials, clinical study on the product's effectiveness, facts label, and other informative links. These items build trust and reduce the anxiety a visitor might otherwise have about making a purchase.
A good home page will not leave a visitor wondering about the company’s products. Instead, effective home page design anticipates customers’ questions and makes clear how visitors can use the website to achieve their goals.
History Page
This goal of this page is to show that the company is established and to provide social “proof” to visitors of the company’s credibility and that their products work. I did this for Trimspa’s website by listing success stories from people who had lost weight using their product and by generally showcasing what the Trimspa brand has accomplished. This included:
- Celebrity testimonial - This highlighted Trimspa’s success with a Hollywood TV star and model.
- Brand accomplishments - I included here that Trimspa has participated in NASCAR #30 and #32 car sponsorship and has hosted a custom Trimspa OCC Chopper on Discovery Channel’s American Choppers.
- Before and after weight loss contest - Trimspa has held "before and after" weight loss contests, so to showcase their success stories, I used Adobe Photoshop to design "before & after" graphics for each person (including their name, a quote, # of pounds lost, and another image of the person next to the graphic). I also linked each person's graphic to their complete story, which was used as a magazine advertisement.
Formula Page
The goal of this page is to educate the visitor about Trimspa’s product in an engaging way. To this end, I incorporated high quality images of each ingredient in Trimspa’s supplement. Doing so not only modernized the page design but also provided a more well-rounded, compelling description of the product, given the well-known power of visuals to engage users. This would also further serve to build trust with the potential customers.
Order Page
The goal of this page is to make it easy for the visitor to confidently make a purchase. I used Adobe Photoshop to create three different graphics, each representing an order option. I also made sure to display all the information a potential customer would want to know before ordering, including the guarantee, clinical study, facts label, and recommended uses of the product. At the bottom of this page I provided a required FDA statement and disclaimer.
Build the Website Using WordPress
The old website was built using static HTML files, which meant that managing content and making design changes at scale was slow, as each file had to be changed one at a time. For the new website, Trimspa wanted to be able to make changes quickly.
I achieved this by using WordPress to code my new Figma design. WordPress is a proven and reliable website building platform that powers 43% of all websites.1 Most importantly, WordPress allows for seamless ongoing management of content and design at scale.
I also incorporated use of the Beaver Builder page builder, which makes it easy for people without training in web design to make page changes via "point and click" instead of having to know HTML.
Integrate Shopify Shopping Cart with WordPress
Shopify is a leading multi-channel commerce platform and shopping cart that powers over 500,000 businesses. 2
It is traditionally used as both a website builder and shopping cart. Although WordPress proved to be the more appropriate website builder for Trimspa’s purposes, the client still wanted to use Shopify as their shopping cart. I accomplished this integration of WordPress and Shopify by connecting their PayEezy payment processor, setting up shipping, and creating custom-buy URLs that I linked to each WordPress buy button on the order page.
Other improvements included:
Fulfillment Center Integration
Shopify now communicates directly with Trimspa's fulfillment center. This means that every time a customer makes a purchase, their order is automatically sent to the fulfillment center so the order can be promptly packed and shipped to the customer.
Security and Compliance Maintained by Shopify
Shopify is hosted on their own servers. This means they handle the software updates, security, and PCI compliance, thereby freeing up time and resources for Trimspa to focus on growing their business.
Ability to Manage Sales, Customers, and Marketing Campaigns
Shopify's features allow Trimspa to manage their sales, customers, and marketing campaigns in ways that weren't possible with their old shopping cart.
The Outcome
These are the benefits Trimspa gained from their newly designed website and shopping cart.
Increased Sales
Trimspa already had garnered considerable traffic from previous marketing campaigns. With this new website, they have been able to convert a greater portion of those visitors into customers
Easier Website Managment
Having a website built on WordPress lets Trimspa’s team make website changes quickly without having to rely on a programmer.
More Marketing Opportunities
Using the Shopify cart along with its marketing integrations offers Trimspa marketing opportunities they didn't have with their old shopping cart. These opportunities include connecting to InfusionSoft CRM, email marketing, and upsells.
Challenges
Using Disclaimers
The Trimspa team had to ensure that the proper disclaimers and FDA labels were appropriately formatted and inserted in the correct places on the website. This applied to all claims and testimonials.
Observations
Customer Anxiety Is a Barrier to Purchase
Customers want to know if a product will actually deliver on its promises. Is it safe? Will it work? How is it to be used? Such questions, if left unanswered, create anxiety that forms a barrier to making a purchase. Therefore, it is essential to reduce purchase anxiety by providing the customer with all of the information they need to make a buying decision. Figure out what the customer’s concerns are, then eliminate them by offering clear information and strong design.
References
1 - https://wordpress.org/about/features/
2 - https://www.shopify.com/press/releases/shopify-now-powers-over-500-000-businesses-in-175-countries