BMFnutritionandsafety

Creating a more effective content & marketing strategy, & website redesign

 BMFNutritionandsafety is a website owned by a retired veteran entrepreneur and personal fitness trainer. I was approached to volunteer for the UX of their website by the project manager, who was also a volunteer.

The website is being used as an e-commerce platform for their exclusive product, Stay Alert Bluetooth Safety Device.

The device is a Bluetooth headset with sensory abilities that vibrates, chirps, and flashes a red light when the user seems to be falling asleep or getting drowsy.

  • ROLES

    • Content Strategy

    • Marketing & Branding Consultant

    • Visual Design

  • TOOLS

    • Zoom

    • Figma

    • Pen, paper.

THE PROBLEM

The contact details have been concealed for privacy of the client.

 

It was clear that the basic problem was that of branding, design, and content strategy.

The end-user has to be able to understand clearly what the website is offering. If the content strategy doesn’t position itself with the users' needs, motivations and expectations then it will not meet its goals, or reach its target users. The name of the website created a different image in the user’s mind and they did not expect to find a Bluetooth safety device for sale there.

The website design was a little overwhelming for the users. Too much information in the form of text and an overall confusing layout needed to be rearranged.

The first thing I noticed, was the disconnect between the website domain name and the product it was selling. 

My marketing and branding background immediately wanted to suggest a complete rebranding strategy. Still, I was aware of the limited resources and time and decided to focus on the website and its usability, to begin with.

 

THE RESEARCH

Running a usability study was the first step here. I conducted unmoderated usability studies with a small participant group just to test the overall navigation and flow of the website.

Tools used -

  • Zoom

  • Interview with some open-ended questions after the completion of the task (the task here was browsing and exploring the website and its flow)

The target users of this kind of product would be long-distance drivers, truck and taxi drivers, transport companies, etc.

Since I did not have the resources required to access that demographic, I tried my best to include participants who had longer commutes and were regular drivers.

 

Here are some of the insights from the usability study- 

  • “Why is the site called bmfnutritionandsafety?”

  • “I think this might be a good headset to have but why would I need an annual subscription to this? Is it not durable enough?”

  • “Some of the videos on the website are a little too scary, it feels like a government infomercial.”

  • “There is too much information on the website, too much text to read.”

  • “The checkout page feels like a completely different website.”

  • 70% users were frustrated with the amount of text on the pages.

  • 80% users felt doubtful of the quality of the product because of the suggested annual subscription during checkout.

  • 90% users could not associate the website name with the product and felt confused.

  • 35 % users did not think so many videos were necessary.

  • 65% users did not like the navigation scrolling to the bottom for some tasks and were unable to complete the flow.

Based on these insights I decided to use the 5 Why’s to clearly define the problem faced by the users.

 THE SOLUTIONS

Content & Branding

  • I believe the first step would be changing the domain name, again hypothetically. If that is not possible, maybe the client should use this domain to represent his fitness and trainer services and include the Bluetooth safety device as an additional product. This would make more sense given the current domain name.

  • The text and video content needed to be edited and rearranged.


  • The content strategy should be centered around the user (drivers, transport companies)  and their needs, removing all other distractions and just highlighting the product and its features. This would reduce friction and thereby reduce confusion.

  • The website also needed a redesign, making the content look more organized and clear. Improving the checkout flow and making sure the pages all look consistent and like part of the same site.

Marketing Solutions

  • Since the product is a new launch, I suggested registering as a seller with Amazon. This would give the seller access to one of the largest e-commerce platforms along with the inbuilt infrastructure provided by Amazon to its sellers.

  • One step would be to contact local transport companies, and organizations through email by attaching product highlights. 

  • The next step here would be to try and get appointments to give short presentations to the concerned departments about the product and its advantages, positioning it as a safety and communication device, that the organization could use across their network. We could emphasize and promote this as an initiative taken by the companies for employee safety and well-being.

THE REDESIGN PROCESS

Section 1

Before


  • Homepage1

  • Homepage 2

After

 

What I did

  • I kept the heading as STAY ALERT, emphasizing the device brand. I still kept the parent logo of BMF on the left, intending it to be used for navigation to another page where the bmf content related to the clients’ fitness and nutrition services can be showcased.

  • I kept the color palette the same as used on most of the website. I consolidated all the information into one home page. I changed the font size and type to Fira Sans Condensed, with varying sizes for headings and body.

  • I included a “Learn more” option on the hero image, and changed the text of the CTA from “Ensure your safety” to “ Shop now”. This made the purpose of the website clear to the user and also gave them an option to learn more about the product without having to scroll and search for the information.

  • I created more white space by rearranging the content on the header and footer. I kept the first-tier navigation such as About and Shop on the header and moved the other links such as Contact, Blog, and Reviews to the footer.

  • I maintained the intended tone and message the client wanted but edited the content to make it sound more friendly and neutral.

  • I included a Floating Action button for Contact,(a fixed button on all pages)  making sure the user has a way of communicating with the seller without any hassle.

Section 2

Before

  • About Section

  • About continued

After

Popup overlay

 

What I did

  • The homepage had a long scroll that led to the ABOUT section and a contact form below that. So when the user clicked on the ABOUT or CONTACT links on the header, the page would long scroll all the way to where that information was. This scroll was not a very pleasant experience for the user. 

  • I created a new page for About, making the transition quick and smooth. I included all the technical information about the product there, and again used the new font and more white space to create a defined layout.

  • I included a CTA button with the text “Make your driving safer now” encouraging the user to move to the buy phase.

  • There was also a disclaimer about the device under the ABOUT section that I removed and decided to include only in the SHOP section.

  • Since the client wanted to have some informational and educational videos, I included a video carousel on the about page so the user could get all their information in one consolidated place.

  • I also included a popup overlay on this page that appears in a few seconds offering a contact form to request a demo of the product. I believe this popup worked better here than on the home page where it originally was. I kept the design consistent with the branding.

Section 3

Before

  • Shop page

  • Shop page continued

  • Cart overlay

After

Cart overlay

 

What I did

  • The shop page had no color so I introduced a block of color and displayed the product images on a carousel. I edited the text content and reduced it to keep only the required information such as the ‘percentage donation to Alzheimer’s foundation’.

  • I removed the “annual subscription” option, as research showed that it was an unfavorable feature. As I had suggested in the marketing solutions, I included an Amazon logo with the information that the user could also buy the product on Amazon. Amazon makes people feel that the seller/product is legit and that is a great boost for a new product.

  • I included the product safety disclaimer on this page.

  • The “Add to cart” CTA opened the cart overlay. The original design had a different color palette that was not consistent with the brand, and the CTA on the overlay said “ View cart”.
    I used the brand colors and changed the CTA wording to “ Proceed to Checkout”, this reduced the number of clicks and made the process faster for the user.

Section 4

Before

  • Checkout page

  • Checkout Continued

After

 

What I did

  • The original website had a view cart page which then proceeded to the checkout page that I decided to omit, reducing the number of clicks for the user. 

  • The checkout page looked like again another color palette making it feel disconnected from the product website. This creates a feeling of uncertainty in the user. I maintained the consistent color and font style and included a larger image of the product in the order summary, making sure the product was highlighted.

  • The shipping details and delivery details had two different sections on the original website. I added a simple dropdown to select the delivery method in the section of shipping details to reduce the number of steps and simplify the process.

  • The flow ended with a popup confirmation of the purchase that I designed without any reference to the end of the user flow on the original website as I had no means to check that without making an actual purchase.

View the user flow with the redesigned prototype below

Thoughts

The Marketing & Branding solutions accompanied by the website & content redesign would position the product so that it would be more easily discoverable and enable users to experience an easy simple flow.

As this was a volunteer project, I could only suggest changes. The implementation of these would definitely help me realize how well these work in a real context, but that is not in my control.

I am grateful to the owner of BMFnutritionandsafety for allowing me to work on this project and use this as a case study.

Please feel free to reach out and connect with me via LinkedIn or Email

 Product Images are copyright of BMFNUTRITIONANDSAFETY. 
Some Images are from Unsplash