About
NutriAI is a company that provides SaaS products that heavily rely on AI. Their main business is to target rising food influencers, hence their followers' subscription to a personal app that publishes recipes.
I was brought into varies of their project when they saw the need of adding a designer on top of AI-generated websites/App. This project with NutriAI developed into a full-stack work-from logo, color, image recommendation to sales page, waitlist page, and a branded web app.
Info
Year:
2025
Category:
E-Commerce
Client:
NutriAI
Tools:
Framer, Figma
Length:
Ongoing
Role:
Designer
Adding a human touch to an AI product
The way NutriAI worked before “Design” joined the picture was to build a somewhat stable framework. The team managed to generate standard sales pages and apps and applied basic graphic elements. They got a few customers who focused on the functionality of the service they provided, but as they progressed to bigger clients, presentation became the roadblock.
What AI couldn't do is create uniqueness in visual presentation. High-quality creators are looking for higher-quality visuals to match the content they already have on Instagram, YouTube, etc.
AI can do a pretty decent job in terms of building a basic structure (and most businesses only need that), the design jobs are more challenging as they need to add on to the existing framework and add more impact, it needs to look "Special, not AI-ed"
First step: create the personal brand
The most obvious approach to add a human touch to the product is to apply a personal brand that looks intentional and familiar to the followers.
I don't directly talk to the creators, so my approach to creating a personal brand was to scan through the creator's Instagram, the book they published, their style, their background, etc, and piecing together evidence to predict what the creator's message is.
I normally would pick something that resonates with me and create a brand based on that. This project for the Client - an TV character and a cool mum, I initially went for a style that matches the brand she uses - Rhode, Sporty&Rich- then extended the image research to two major directions: one is bold, warm, and modern, while the other one is more barn-style, sophisticated. I generated 2 brand directions for reference.
Style integration
The client herself is also at the stage where she has a considerable amount of followers but not having thought about branding herself, that made the process both challenging and interesting- the landing page for the client's website went through drastic changes, moving on, as the client suggested several different approaches, opposed to the brand direction she originally chose-for that, I aimed for a more general approach with rapid prototyping.
As I showed more work to her, I got more feedback to narrow the direction, eventually adjust the brand direction to more concrete visual elements like choice of font(mostly serif+Italic) and color (Tupac but also feminine), and picture style(barn, nomadic, boho style).
Setting visual language
One of the things that helped with the process was to find reference websites, as the client found more and more elements she liked from the websites I provided, we both had a better idea of what to include and what to avoid.
Gradually, I was able to build a design system that can articulate the client's preference more precisely. We described the style as "Editorial", elements include layered pictures to create visual hierarchy, 2 mixed serif fonts as titles that add femininity and sophistication, picture rather than product-based showcasing to indicate more lifestyle vibe than functionality...and small details like sharp edges of the picture and smooth scroll & loss layout to give breezy & curator feelings to the page.
Inheriting the style of the APP
NutriAI‘s App is built on Cursor with no design file, so the visual is purely defined by the code base. For clients like Ferne, the App's visual had to be built on an existing "skeleton" design system. I wrote about the process of building the design system here.
As for Ferne, I transferred the same visual element from the website to the app.
Mobile actually opened more opportunities vs the website as it not just showcases, but holds functions like a calendar, recipe, and grocery list. The primary interaction is not only scrolling, but also touching. Hence, I used the visual element, focusing more on the functionality.
The card system
I used a small card system nested in the whole big system to solve most of the display functionality, as for website & MKT materials, cuz the screen size and the showcasing nature it didn't call for too much discipline, but when it comes to mobile app, where it focuses on lists, using different sizes of cards can be helpful.
In the card itself, I added more flair- extra gradient and background blur to give the app a more polished, modern look, and added more mobile-appropriate interactions for better user experiences.
