A Recipe Sharing Desktop Website
Introduction
CoooKing is a Delightful Recipe sharing website, which was designed by me in one of the course project. The website allows users to search Recipes, passionate cooks and food enthusiasts can share their favorite recipes, valuable cooking tips, and all things food-related. CoooKing will allow the users to explore the world of flavors with features like recipe categorization, ingredient-based search, user profiles to follow, and the power to rate and review recipes.
I have allowed the user to personalise his/her account according to their taste which will prompt the website to give them recipe/ food related suggestions according to their preference and dietary choices. Delve into this study to know more.
Problem Statement-
Create a website where people can share their recipes, cooking tips, and food-related content.
Tool Used In this Project-
Scope of the Project-
-
Competitive Research & Best Practices
-
User Research
-
Wireframing
-
Design Elements & Styles
-
Final UI
Competitive Research & Best Practices
Competitive Research
For this part of the research, I conducted a competitor analysis to gain insights into the features and solutions offered by competitors in the recipe-sharing website market. I identified both direct and indirect competitors in the market but chose to focus solely on direct competitors. This approach aimed to uncover the key features they are known for and the common problems they address.
I selected four competitors for this analysis: All Recipes, Yummly, Epicurious, and Food.com.
During the analysis, I observed that all these websites feature advertisements, which, while a common practice, can sometimes clutter the user experience and potentially lead to user distraction and website abandonment. Additionally, none of these websites provide personalized recipe recommendations. However, they all boast user-friendly interfaces and offer users the ability to create profiles and upload their own recipes. It's worth noting that there is no specific option for users to upload cooking tips, although general cooking tips and guides are available on all platforms except for Food.com.
Best Practices
For this part of the Research I decided to explore the best practices which are done in the recipes sharing websites, in order to create a user-friendly and effective recipe sharing platform. This research aimed to uncover the latest trends and industry standards that are followed by successful platforms. This research allowed me to gain valuable insights into aspects like user onboarding, personalization, robust recipe databases, community engagement, and more. By integrating these best practices into my design, I aimed to provide users with a seamless and engaging culinary experience.
Who uses this?
CoooKing, the delightful recipe sharing website, will cater to a wide range of users with varying interests and culinary backgrounds. The platform can be used by home cooks, chefs, and food bloggers who love sharing their recipes and connecting with food enthusiasts. People with specific dietary preferences, beginners looking for easy recipes, and those seeking healthy options also find value here. Food critics, event planners, travellers, and health-conscious individuals use CoooKing for inspiration. Teachers and culinary instructors benefit from this platform for sharing knowledge.
I have crafted a user personas to better understand and serve for this diverse community, ensuring their goals and pain points were given proper attention which helped me to craft the main flow of the website.
User Persona
With the help of the persona, I derived a user story and built a user flow out of it, both of which are displayed below.
User Story
Over the years, Priti has discovered various new recipes and her cooking tips are always helpful for others who have got her tips. She always have tried to share her recipes to a broader audience through social media or other cooking sites but always had problem on understanding its complex functioning and limited features.
So now she wants a website where she has the ability to upload her cooking tips and recipes, where people can share, appreciate and rate her cooking skills because she thinks it is useful to do this with a particular community rather then showing to a whole mix world. She also wants to follow other people like her and discover various cuisines.
The website should be with an intuitive interface, which is easy to navigate and has different categories and features in it which eliminates her bad past experience with other websites.
Wireframes
Here, I presented the wireframes of the website's interface with the help of the user flow I had created. They serve as the foundational blueprints that outlined the placement of elements, such as buttons, menus, and content, on each page of the website. I created them in a schematic way to present the functionality of the website, which the user will go through throughout the flow. It includes the home page before (default) and after sign-up/sign-in, the sign-up and personalization process, the Add a Recipe page, and the Recipe page.
The Primary purpose of creating these wireframes was to see how the website will look as I said earlier, in a schematic way before it goes through the designing phase. Notably, I emphasized on the Personalization process of the website, along with the choice given to users to ask what they would like to post to enhance the user experience. Additionally, it allows users to use tags when creating a recipe post, making their recipes easier to discover by others, along with other functionalities.
As I moved to the next step these wireframes played a vital role in guiding the design of the website, providing a clear roadmap for implementing the design elements and user interactions I've envisioned.
Design Elements and Styles
Logo
The logo for CoooKing was personally designed by me, using animations on Figma. It prominently features the name 'CoooKing' in the playful 'Lemon' font, which adds a touch of whimsy to the overall design.
What makes the logo truly unique is the subtle yet delightful animation incorporated into it. Instead of a conventional dot over the letter 'I', I've cleverly replaced it with an animated egg.
Colour Palette
For the website's colour styles, I've carefully selected a colour palette to enhance the user experience. The primary colour palette revolves around various shades of yellow, employed in a monochromatic scheme. This choice of yellow is intended to harmonise with the website's logo, which prominently features an egg as a symbol.
To balance this warm and inviting primary palette, the secondary colour palette focuses on different monochromatic shades of blue. The use of blue serves as a complementary colour to yellow, creating a visually appealing and cohesive design.
Additionally, the colour palette incorporates neutrals to maintain readability and a single warning colour for important notifications.
Iconography
The icons featured in this project have been sourced from Google's Material Design Kit. These icons were chosen to maintain a consistent and modern visual style, aligning with the principles of Material Design, which emphasizes clarity, simplicity, and intuitive user interfaces. Additionally, a few of these icons were customized and redesigned to better align with the unique needs and aesthetics of the website.
Typograghy
The fonts used in the CoooKing website were carefully chosen to give it a distinct look and feel. "Lemon" is the main font, used for titles and the logo, adding a friendly touch.
The secondary font, "Quickstand," complements Lemon and is used for subtitles, labels, and text, ensuring a clean and modern appearance. These fonts together create a pleasing and easy-to-read design for the website.
The Final UI
Home Pages: Before vs. After Sign-Up/Log-In
The home pages of the website undergo a transformative shift before and after sign-up/log-in, offering an exclusive and personalized experience for registered users.
While the default home screen provides a glimpse of the platform's features, the post-registration screen unlocks a wealth of unique content and features. Simply click on the image below to zoom in for a closer look.
Header Navigation & Dropdowns
Seamless navigation experience with menu options that reveals detailed sub-menus when hovered. Accessing search, notifications, saves, and the user profile's dropdown made easy
Sign-up & Personalization Made Easy
The sign-up process is a breeze, making it quick and hassle-free to join the community. Once registered, the user can personalize their profile by sharing their favorite cuisines, preferred ingredients, dietary restrictions, and more, tailoring the experience to their unique tastes
Add a Post
When "Add a Post" CTA is selected, users are presented with the choice to contribute either a new recipe or a valuable cooking tip, making it easy to share their culinary expertise with the community.
Other Important Pages
Explore other key screens of the CoooKing website with the interactive screen gallery below. Simply click on any image to view it in full screen and zoom in for a closer look. These images showcase the Add a Recipe pages, as well as posted recipes and regular recipe pages, giving a comprehensive glimpse of the user experience.
