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:
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.
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.
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.
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.
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.
From the initial research, I then prioritized the following problems:
Comparing direct and indirect competitors, helped me consider features and best approaches that I could consider or improve.
Things that were considered:
To help the client visualize and structure the site map, I used the card sorting technique.
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 😉
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.
Improved features from insights
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.
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.
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.
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.
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.
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.
