Role
Solo UI Designer & Developer
|
Category
Responsive Web Design
|
Approach
Laws of UX & Usability Heuristics
|
Duration
3 months
|
Tools
HTML/CSS, Javascript,Figma
|
For my Front End Development II & User Interface II classes at Kennesaw State University, I designed and developed a recipe website to showcase my original recipes. For this project, I wanted to focus on delivering a seamless responsive design between mobile, tablet, and desktop resolutions. I iterated on the design by starting with rough sketches, then transitioned my ideas to Figma to develop wireframes and eventually high-fidelity prototypes. Using my prototypes as a guide, I wrote the HTML, CSS and Javascript to bring my designs to life.
What is Syd's Recipes?
I have always been passionate about food. Before venturing into the world of UI/UX, I was once a culinary student with dreams of becoming a Food Scientist. I graduated from UGA with a degree in Consumer Foods and had worked in many different restaurants and bakeries trying to make my way into the industry. Though I was held back by my abysmal skills in chemistry and severe disinterest in doing the dishes, I came out of those experiences having developed many of my own recipes. These recipes are some of my favorites to make at home and I love sharing them with my friends and family. I decided to create this website to easily share my recipes with my loved ones while also giving myself an opportunity to showcase my skills in UI design and development.
Identifying The User
Before beginning any design work, I considered who might be the primary user for this website and what goals they might have. I myself am an amateur chef who regularly references other recipe websites, so I used my prior knowledge to make assumptions about what I would expect the user's wants and needs to be. Modeling my potential userbase after my own experiences led me to identify the primary user as amateur chefs/home cooks who are looking for recipes online. This user should already have some level of experience in the kitchen and be familiar with reading recipes. After identifying my primary user, I then developed a list of goals I would expect this user to have when using the website:
User Goals
- Find and filter recipes – users want to easily search and discover new recipes based on ingredients, meal types, type of cuisine, and dietary requirements.
- Ingredients list – users want a list of ingredients required for preparing a recipe.
- Step-by-step instructions – users want clear and concise instructions for preparing a recipe.
- Nutritional information – users with dietary restrictions or health goals want access to nutritional information such as calories, fat content, protein content, allergens, etc.
- Adjust serving sizes – users want to easily adjust the serving size of a recipe to suit the number of people they are cooking for.
- Ingredient substitutions – users may want suggestions for alternative ingredients if they have dietary restrictions or if they don’t have a particular item on hand.
- Feedback and contact – users should have an easy way to provide feedback on a recipe or contact me, the author of the recipes.
- Reviews and ratings – users appreciate reading reviews and ratings from other users to get an idea of how the recipe will turn out or if any modifications should be made.
- Print recipe – some users may want a physical copy of the recipe to use while cooking.
- Device accessibility – users want the website to be mobile friendly, as they might access it from smartphones or tablets while working in the kitchen.
Initial Sketches
Once I had identified some potential user goals, it was time to brainstorm ideas for the design. I began by sketching some layout ideas for the navigation bar, recipe pages, and the home page. My plan was to use a blog-style format, with an emphasis on advanced search and filtering functionality.
Initial Sketch - Navigation Bar
Initial Sketch - Filter and Search
|
Initial Sketch - Home Page
|
Sketch Iteration & Wireframes
Before transitioning to wireframes, I received from feedback on my sketches from my classmates which helped my iterate on my design. I decided to pivot from a blog-style format and move towards a more minimalist design. I made this decision because I wanted the focus to be on the recipes, rather than myself. However, I still made a point to include an about page and a contact page, just to give the site some personality and offer some information about me if the user wishes to know more.
Sketch Iteration - Desktop Filter and Search
Sketch Iteration - Mobile Filter and Search
|
Sketch Iteration - Home Page
|
Wireframe - Desktop Search
Wireframe - Desktop Sort
Wireframe - Desktop Categories Filter
|
Wireframe - Mobile Filter
|
Wireframe - Mobile Search
|
Wireframe - Mobile Home
|
Wireframe - Tablet Home
|
Wireframe - Desktop Home
|
Style Guide
I established a design system for my prototype before beginning any prototype work. I focused on creating a minimalist design that would make my recipes stand out on the page while also cutting out any fluff that would be distracting for the user. To achieve this, I chose a monochromatic color scheme for all page elements except for the recipe images. The recipe images are bright, colorful, and taken from a bird's-eye-view to create visual symmetry between different recipes. The images I used are all real photos I took of my recipes, not stock images.
Style Guide
Recipe - Teriyaki Rice Bowl
|
Recipe - Coconut Banana Muffins
|
Recipe - Garlic Knots
|
Final Prototype
From the wireframes I created, I had a pretty clear vision of how I wanted to design the final prototype. However, I decided to scale back on many of the functionalities I originally wanted to include.
I removed the search functionality as well as the sorting option for most-viewed and most-liked. I came to this decision because the scope of my website is very small. Only starting out with roughly twenty recipes on the site meant that all the available content was viewable on one page. Thus, I felt that it did not necessarily need a complex search system. Instead, I decided to include a filter-by-category option. This feature provides a simpler way for users to filter the recipes by their dietary wants or restrictions, such as for vegetarian dishes. As the scale of this site increases over time, I may go back and expand upon the search functionality.
I also removed the portion-size adjustment feature. I would like to include this feature eventually, but at the time of building this site, I am unsure of how to develop this feature with Javascript. I would like to implement this functionality into my site after I improve my front-end development skills. Stay tuned for more updates!
I removed the search functionality as well as the sorting option for most-viewed and most-liked. I came to this decision because the scope of my website is very small. Only starting out with roughly twenty recipes on the site meant that all the available content was viewable on one page. Thus, I felt that it did not necessarily need a complex search system. Instead, I decided to include a filter-by-category option. This feature provides a simpler way for users to filter the recipes by their dietary wants or restrictions, such as for vegetarian dishes. As the scale of this site increases over time, I may go back and expand upon the search functionality.
I also removed the portion-size adjustment feature. I would like to include this feature eventually, but at the time of building this site, I am unsure of how to develop this feature with Javascript. I would like to implement this functionality into my site after I improve my front-end development skills. Stay tuned for more updates!
Mobile Prototype - Main Menu
|
Mobile Prototype - Home
|
Mobile Prototype - Categories Menu
|
Desktop Prototype - Home
Development
With the prototype of the design complete, I started the development process. I had originally written all of my recipes as .txt files, so it was relatively simple to transfer them to HTML. I then began transferring the styling from my prototype to CSS. I paid close attention to the responsiveness for mobile, tablet, and desktop views. From my prototype designs, I knew I wanted the recipe cards on the home page to display in rows of one, three and five columns, respectively. Next, I created a responsive nav bar with javascript interactions for the "categories" filter. Each recipe card on the home page includes a series of tags that tell the browser which cards to display and which cards to hide, depending on the filter option selected.
Website - Desktop View
Website - Filter by Category
Application of Design Principles
Tesler’s Law
The interface is consistent across different devices. The desktop, mobile, and tablet interfaces have similar feel and function.
|
Mobile
|
Desktop
|
Tablet
|
Hick’s Law
The number of navigation options are minimized to reduce the user’s decision-making time and cognitive load.
|
Navigation Bar
|
Signaling Principle
A contrasting hover color serves as a visual cues to draw the user's attention to the option currently selected in the navigation menu.
|
Drop Down Menu - Hover Effect
|
Coherence principle
The layout and content organization makes logical sense for the user. For example, the ingredients list appears before the instructions.
|
Recipe Page
|
Law of proximity
Related elements are grouped together to visually indicate their relationship. For example, within a recipe card, the recipe title is grouped with its respective image.
|
Recipe Cards
|