Greenerly Home

1/10 - Logo to be used for Greenerly Home site. The text is in a playful font in order to give a friendly look to the company

2/10 - Colors to be used on Greenerly Home site. Greens represent primary actions, tans represent secondary actions, reds represent errors, gold represent warnings, background is white, and black is for text and element borders. The company is designed in greens and browns for the main colors in order to hit home the nature feel

3/10 - Design for buttons and other clickable elements in the design system. Shows designs for primary, secondary, and tertiary buttons, which are green, tan, and plain text respectively, as well as showing tabs for the navbar and underlines for links and the header. Each element is shown its different states including default, hover, selected, and disabled

4/10 - The fonts used in the design system. The logo is written in Playpen Sans, in order to give a playful and friendly feel. Body text is written in Open Sans. Headings, decorative text, and other secondary text is written in Oxygen. Both Oxygen and Open Sans are sans serif fonts, which are easier to read as well as being more friendly to users with dyslexia, due to the letters being clearer and less distracting to read

5/10 - The font sizes for the different levels of text in the design system, ranging from the largest being Heading 1 at 64px and the smallest being Body Text at 18px. The different sizes for different headings will help with the visual hierarchy of the text and help readers naturally read in the order they are meant to

6/10 - The icons used in the Greenerly Home design. Icons used include icons in the header, checkout process, forms, favorites and ratings, and other miscellaneous icon uses. The icons are simple and easily recognizable symbols to help users use visual clues to help them navigate different parts of the experience easier

7/10 - The design for the input fields in the site design. It shows the different states of the input fields, including the default, disabled, selected, and error states. The error state for the input field is colored red with a red error triangle to help draw the users attention to the error location. It also shows the checkbox in the selected and unselected states. It is important to include placeholder text that gives the user more information over what they should enter, to help reduce the users cognitive load when filling out forms

8/10 - The product images will always be in a square design. Other UI elements, such as product cards, will be given slightly rounded corners with a corner radius of 15, to help give a soft and nurturing look, while using a hex code of #909583 so it can visually stand out against the white background

9/10 - The progress bar is available at the top of the page during the entire checkout progress in order to help the user keep track of how far into the process they have gotten and how much is less. By showing the user their point in the process they will be less likely to get frustrated by not knowing how much is left, as well as be motivated to finish due to the interaction design principle of users being more motivated as they become closer to completing a goal

10/10 - The designs for the buttons that allow users to switch to another page, or change the item quantity before adding a product to the cart. The buttons for the product cards are wider than the ones for the product page in order for them to fill the width of the product card and make it look visually neater by filling the whole space