Description
Project Overview
The Goody Health Foods Blog project focused on creating a high-fidelity blog design for both desktop and mobile platforms. The goal was to craft a clean, calming, and user-friendly experience where readers could easily browse healthy recipes, wellness tips, and food-related articles. The blog needed two core flows: an index page showcasing posts in card format, and an individual blog post page highlighting new recipes, links, or updates. With a modern and approachable visual identity, the design aimed to encourage engagement while reflecting the values of health, balance, and simplicity.
My Role and Duration
I worked as the UI Designer over the course of three weeks, with a focus on styling, systematizing, and organizing all design components. My responsibilities included:
Developing a cohesive design system with reusable components and variants.
Ensuring typography, color, and layout choices aligned with a calm and health-focused brand identity.
Maintaining consistency across desktop and mobile experiences while meeting all submission checklist requirements.
The Problem
Health-focused blogs often fall into one of two traps: being too cluttered with pop-ups and visuals, or so minimal that they lose personality and warmth. The challenge here was to design a platform that feels calming yet engaging, with:
A color palette that evokes wellness and freshness.
A typography style that is readable, friendly, and clear.
A layout system that feels structured but flexible enough for varied content like recipes, reviews, and tips.
Through competitive research of similar health and lifestyle blogs, I identified common frustrations (overuse of ads, inconsistent layouts) and inspiration points (clean card-based previews, earthy palettes). This research informed my approach to building a design that feels healthy, organized, and inviting.
Goals
Create desktop and mobile designs for the blog’s index and blog post pages.
Build a user-friendly visual flow that encourages exploration of new posts and easy reading of individual articles.
Incorporate high-quality imagery to attract health-conscious users.
Establish a scalable design system that allows for consistent styling across future blog posts.
Design Process
1. Establishing the Design System
Built reusable elements (icons, buttons, cards, navigation) and stored them as components.
Created a dedicated style guide page with all components, text styles, and color palettes for consistency.
Selected an earthy and calming color palette (greens, neutrals, soft accents) paired with clear, approachable typography.
2. Designing for Desktop
Started with wireframe templates, then layered in color, typography, and imagery.
Designed the index page with card-based previews for blog posts.
Designed the post page with space for recipes, ingredient visuals, and links, ensuring an easy-to-follow reading experience.
3. Adapting for Mobile
Translated desktop layouts into a mobile-first experience.
Adjusted heading and body text sizes for readability without overwhelming the screen.
Tested readability and layout flow on different screen sizes to ensure accessibility.
4. Testing & Refinement
Conducted quick usability checks with peers to confirm readability and ease of navigation.
Made adjustments to spacing, font sizes, and image scaling for better mobile engagement.
Color Palette | Typography | Components | App Name & Branding
