Picky Chickpea

Developing a unique food blog experience

Role  UX designer & Web developer
Timeframe  May - Apr 2021
Picky Chickpea is a food blog business that creates inspirational recipes for healthy-minded people

Design a unique and pleasing blog with better usability compared to the competition, while handling the business needs of building an audience and monetizing the site.

What the client asked:

  • Unique blog design, clean and to the point
  • Better site navigation
  • Monetization and community building

A clean and well-structured layout was the key to improve the user experience, and the use of Webflow, allowed me to have complete control of the design in developing the final product.

My role

I was responsible for the entire project, from start to end. Conducting UX research, wireframes, prototypes, user testing and iterating insights along the process. Finally, I built the whole website using Webflow.


I initially defined the business mission by conducting a brief sprint session with the client, to then proceed using a design thinking process that gave me a better understanding of the customer's needs while accounting for the business goals.

Tools used
Google form tool iconMiro tool iconFigma tool iconMaze tool iconWebflow tool icon


Empathize process icon
Define process iconIdeate process icon
Prototype process iconTest process icon


If you ever referenced a food blog, you probably share the same frustration as I do. An infinite amount of distracting advertising banners all over the place, ingredient list all the way at the bottom of the page, making your thumb numb by the time you start cooking 😆, and from a designer point of view with OCD, an unpleasing layout.

As a frequent user, I had an idea of the issues, however, the discovery phase helped me to better understand, clarify and clearly define the user’s needs and pain points.

Questionnaire summary diagram

The initial questionnaire gave us great insights to start with, uncovering the user’s pain points and defining the most important information a user needs while sorting a recipe.

User persona
User persona

From the questionnaire results, I could compose an aggregated empathy map, on which I synthesized the main user persona as a guide for the design process, reducing personal biases.

Define the problem

From the initial research, I then prioritized the following problems:

  1. HMW structure the recipe page layout in a way that the user can easily scan through the most important information
  2. HMW provide all the information the user needs to make a decision selecting a recipe from the article preview
  3. HMW help the users filtering through multiple recipes
  4. HMW position ad banners without annoying or distracting the user
Emily is a busy mother who needs a clean and simple food recipe layout to reference from because she has no time to search for the main information skipping through the unnecessary content

Ideate solution

Competitive analysis for the food blog
Competitive analysis

Comparing direct and indirect competitors, helped me consider features and best approaches that I could consider or improve.

Things that were considered:

  • How competitors filter their content
  • Design & layout
  • Recipe preview information
Card sorting preview
Card sorting

To help the client visualize and structure the site map, I used the card sorting technique.

Paper wireframes


Sketching wireframes was a breeze once I had a clear vision of the business goals and users needs.

It always helps to focus on quantity when drawing the initial paper wireframes, to then refine the idea by compiling the best parts, just like Lego blocks 😉

Low fidelity wireframes of the desktop and mobile version

Usability study & Insights

The low-fidelity prototype was tested by asking 11 participants to perform 2 tasks and respond to 8 follow-up questions.

The result didn’t report any major usability issues, however, there was room for improvement.

Low fidelity prototype

Improved features from insights

  1. The search bar on the recipe page.
  2. Recipe preview card layout, information & interaction.
Search filter

The search icon next to the main recipe category tabs wasn’t visible nor natural. When asked to find a specific recipe from the recipe page, the majority of users clicked on the search icon from the top navigation bar.

Placing a more visible search input below the headline with a tagline to encourage the user, should lead to a more natural interaction.

Recipe preview card

A current theme was observed when asking the users, “what would help them decide while comparing or choosing a recipe in the preview page”. Excluding the information already there, the majority of participants wanted to see the ingredient and difficulty.

Since the original design could include only the main 3 ingredients, I’ve added more hidden information by making it visible while hovering on the card.

Preview of the approved design, desktop and mobile version

UI Design & High fidelity

To maintain consistency, I developed a design system, to help me stay in line with the brand guideline. This allowed me to quickly update changes to the whole mockup.

😉 Psss! Do you want to know more about how I branded Picky Chickpea? 👉 Check out the case study.

Design system preview of the color palette and typography scale
Design System
A preview of the recipe page template
Recipe page layout
Design system preview, with iconography, tabs and cards
Design System
Recipe card


To bring the site to life I used my preferred tool of choice Webflow, which allows full control over the design and can also be easily implemented with custom code.

Once the design was approved, building the layout was a breeze and I was able to set in place the main 8 pages and 3 collection databases within 5 days.

It required more days to make the layout fully responsive testing it and optimize the site.

Development site structure

Site structure and BEM naming

The challenge
presented itself when building the complex filter function on the recipe page. This was my first time implementing a dynamic filtered database, and I don’t easily give up on approved design, so I had to find a way.  

Writing a custom javascript function seemed to be the best solution but required some extra time and research to make the filter work as desired.

Visit Picky Chickpea website
The client was amazed to see the project live, and how easy it is to add new blog posts.


I will review the KPI in 3/6 months and evaluate what could be improved.

Here are some performances I will take into consideration:
Email Subscribers, Social share, Time on page, Pageviews, Returning visitors and Organic traffic.


Working on this project let me polish up and practice some Javascript. It made me realize even more the importance of having some knowledge of the code.

Every designer should know how things work in the back end to better communicate with the team and understand what could be feasible.

As designers, we are guilty of designing things that are a challenge to built, disregarding the work that comes after us, but knowing how things get built will make the team stronger and more efficient.

I will try to learn more about development on every occasion I can.