Fit & Flourish: A health-focused food blog
A Website Redesign
BEFORE REDESIGN
AFTER REDESIGN
Project Overview
Redesigned the homepage and updated interior pages as needed for Fit & Flourish's website to enhance brand identity and streamline content organization, ensuring a more engaging and valuable experience for users.
My Role
Full UX process, from research to high fidelity prototypes.
June 2024 - Current
Stakeholder Interviews, Constraints, & Goals
Stakeholder Interviews
Stakeholder Interviews revealed concerns about poor user metrics including poor user engagement, high bounce rates, and low retention rates. Developing their brand identity was also a key focus.
Technical Constraints
Fit & Flourish operates on WordPress, built using a theme. Optimizations to the site were approved, despite potential changes associated with the theme.
Business Goals
1. Strengthen Brand Consistency and Identity: Ensure cohesive visual and messaging alignment across digital platforms, with a focus on evoking a meaningful connection with users.
2. Increase User Engagement: Implement interactive features and optimize content to boost session duration and page views.
3. Reduce Bounce Rates: Enhance landing page effectiveness through A/B testing and improve CTA relevancy.
4. Boost User Retention: Improve the company strategy in offering fresh, regular content to encourage repeat visits.
5. Streamline User Navigation: Simplify website navigation and key user flows to improve usability and task completion.
Major Insights from User Surveys
Full Original Homepage
1. Users are not immediately aware of Fit & Flourish's message, offerings, and overall mission. The brand identity at the top of the website is underdeveloped, failing to convey the valuable message that sets Fit & Flourish apart from other food and health blogs.
2. There are no clear options for users to stay connected with the company. The homepage lacks features for engaging or assisting visitors beyond their initial visit, such as subscribing to a newsletter or signing up for a service.
3. Lack of clear division between elements on the homepage leave users confused. With no space between the recipes, they run together down the page, causing difficulty in seeing where one recipe ends and the next begins.
4. Users are overlooking valuable content that is obscured among individual recipes. The section below the fold is cluttered and hard to decipher. In this area, two free weekly meal plans, which include shopping lists, recipes, and meal prep, are misplaced among links to individual recipes.
Design a homepage that strengthens the company brand, communicates its values and message, and engages users to understand the brand's relevance and value?
How Might We
5 Key Improvements to Homepage
1. Encouraged users to engage with the company by subscribing to the newsletter, which also served as an opportunity to communicate the company's mission, “Learn how to eat what you love, and flourish with a fit and healthy body”.
2. Redesigned the brand logo to evoke a fun and friendly vibe, aiming to develop a brand identity that conveys a sense of trustworthiness and enjoyment. Centering on the word 'Flourish,' I sought to find a text style that embodies its meaning—growth in a flowing and wild manner, akin to the growth of a flourishing plant.
Original Logo:
Redesigned Logo:
3. Added call-to-action buttons throughout homepage to motivate visitors to engage with the site.
4. Separated the 2-week meal plan from the list of individual recipes to ensure users could easily see, understand, and utilize the offering.
5. Reorganized the recipes on the page to make use of space on the homepage, while maximizing the potential for visitor engagement.
See it in Figma:
2 Key improvements to the “All Recipes” interior page.
Before
After Redesign
Before Redesign:
1. The “all recipes” page lacked call-to-action prompts, which limited the site’s ability to encourage user engagement.
2. Too few recipes were displayed per page, causing users to spend extra time clicking through additional pages of content.
Key Changes:
1. Call-to-action buttons were added to increase user engagement with site.
2. Added more visible recipes per page to allow users to see more content in a shorter amount of time with less overall clicks.
Example User Flow
Homepage
All Recipes
Hummus
Figma Prototype
Once fully developed on Wordpress, user metrics will be tracked to discover how users interact with the website, how long they stay, and which pages they visit.
Next Step in Redesign:
Future enhancements could further elevate user metrics, particularly through strategic branding and marketing modifications aimed at increasing user engagement. Conducting in-depth research into how competitors leverage their websites as marketing tools can provide valuable insights for optimizing user interaction and engagement.
