Greenerly Home

Task

Create a design system for Greenerly Home, an eco-friendly home product company.
They want the design to communicate their commitment to sustainability and also resonate with customers who prioritize social and environmental consciousness in the purchasing decisions.

5 people holding the Earth surrounded by eco friendly imagery

Planning

  • Want a nature based color palette - greens and browns

  • Good amount of spacing in order to not create overwhelming visual

  • Soft corners, “gentle” design

  • Easy to understand language

Atomic Design

Atomic Design, created by Brad Frost, is defined as “a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner”

  • Serve as the foundational building blocks that comprise all our user interfaces

  • Simple groups of UI elements functioning together as a unit

  • Complex UI components composed of groups of molecules and/or atoms and/or other organisms

  • Page-level objects that place components into a layout and articulate the design’s underlying content structure

  • Specific instances of templates that show what a UI looks like with real representative content in place

Atoms

  • Green text that reads "Greenerly Home" with a plant sapling with a sun icon

    Logo

    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

    1/10

  • colors used in the design system. greens are primary actions, tans and grey are secondary actions, reds are error messages, golds are warning messages, white is background, and black is text and borders

    Colors

    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

    2/10

  • button designs for default, secondary, and tertiary buttons and their default, hover, selected, and disabled states. Design of header tabs in default, hover, and selected states. Underline in selected and hovered states for use in nav bar and links

    Buttons

    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

    3/10

  • Fonts for design system. "Logo - Playpen Sans, Always use for logo," "Primary - Open Sans, Always use for body text," "Secondary/Decorative - Oxygen, use for product names, sections names, and other headings" Each shows an example of the font

    Typography

    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

    4/10

  • The font size for different levels of text in the design system ranging from Heading 1 at 64px and body text at 18px

    Font Sizes

    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

    5/10

  • Icons used in the design including icons for the header, checkout, forms, and miscellaneous elements

    Icons

    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

    6/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. It also shows the checkbox in the selected and unselected states

    Input Fields

    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

    7/10

  • The design of the different containers. Product images are shaped as a square with pointed corners. UI elements have a radius of 15 for slightly rounded corners and hex code of 909583

    Container Layout

    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

    8/10

  • A progress bar for the checkout process including the steps shipping, billing, review, and complete. Each step is also denotated by an icon. There is a bar between items that is green for steps that are done and tan for those still needed

    Checkout Progress Bar

    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

    9/10

  • a set of 3 buttons that allow users to increase/decrease item they are manipulating. The 1st is for changing the page the user is on while the 2nd and 3rd are for item quantity. the product page buttons are narrower than the ones on the product cards

    Increase/Decrease Buttons

    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

    10/10

Molecules

  • A grouping of the search bar and header icons, including a cart, heart, and person icons

    Search & Header Icons

    Purpose: Allows users to search for products and navigate to their personal pages for cart, favorites, and profile

    Usage: At the right side of the header at the top of the page

    1/7

  • the original and updated design for the product room filter. the new design has a border around it

    Rooms Filter

    Purpose: List of different categories within the shop/products page which helps user filter results based off type they’re looking for

    Usage: At the top of the products results page

    Changes Made Post User Feedback: Added a background and border around the collections nav bar to help it visually stand out so users will be more likely to use it

    2/7

  • The original and updated design of the product filter. the updated version got rid of icons and has more spacing

    Product Filters

    Purpose: Shows the user their location within product pages as well as allows them to search for specific products within different categories

    Usage: Use on product results pages

    Changes Made Post User Feedback: Removed icons and edited spacing to help make less visually overwhelming (also got rid of collections filter (not shown) since it was redundant from the room filters on top of page)

    3/7

  • A series of input fields and buttons that make up the address form of a checkout

    Address Form

    Purpose: Fill out address info to ship product to buyer

    Usage: Address info during checkout

    Changes Made Post Usability Test: Made fields shorter to allow space for order summary, lengthened the address line and shortened the city line to account for typical address/city field lengths

    4/7

  • the original and updated versions of the product cards. both include image space, title, price, add to cart, and favorites button. the updated includes a quantity button

    Product Cards

    Purpose: Allows users to view image and basic info over product and lets them favorite or add to cart

    Usage: Use on any page that shows product results or related products

    Changes Made Post User Feedback: Added a quantity button to the product cards so customers could add multiple to cart without needing to go to individual product page

    5/7

  • the original and updated versions of the product rating stars. the first has the stars with a light green fill and dark green border, while the updated ones have the dark green throughout the whole star

    Product Rating Stars

    Purpose: Shows the average feelings of what other buyers thought of a product

    Usage: Use on product pages or pages with a review section

    Changes Made Post User Feedback: Made stars filling darker to help make more visibly noticeable for people with vision impairments

    6/7

  • A grouping of links that would make up the footer

    Footer Links

    Purpose: Allows user to navigate site and find pages such as their policies

    Usage: Use at the bottom of every page

    7/7

Organisms

  • The header for greenerly home made up of the logo, search bar & icons for cart, favorites, and profile, as well as the tabs for the different sections of the site

    Header

    The header for the Greenerly Home website, which consists of the logo, search bar and header icons, and the different navigation tabs

    1/6

  • log in design with 2 input fields and a back and log in button

    Log In

    Group of input field and buttons that make the Log In feature design

    2/6

  • A group of 3 product cards that have images, favorite button, item quantity, and add to cart buttons

    Product Cards

    A group of 3 product cards that would be shown on the search results page. Each card shows the user a picture of the product, as well as the item name and price. It also allows the user to favorite the item and to add a certain quantity of the product to the cart

    3/6

  • A group of two filters, one the filters by rooms products are for, and the other that refines results based on price, product type, materials, and brand

    Search Results Filters

    The filters that are used on the product results pages that help the users filter products by room and refine the products based off of what they are wanting, such as prices, sustainability practices, materials, or more.

    4/6

  • a review section that includes the average rating for a product, and the breakdown of how many ratings each 1-5 stars has, the option to sort reviews and write a reviews, and an example of a review

    Reviews

    The review section is made up of the average product rating as well as the breakdown of each rating and how many reviews it has, as well as the ability to sort and write a review

    5/6

  • Footer links enclosed on a green background

    Footer

    Footer links enclosed on a green background to help them stand out from the rest of the page

    6/6

Template

template of page that lists all the products without any of the product images

First Prototype

The first prototype of the Greenerly Home site based off the design system. Pages shown include product results, individual product page, and checkout

Changes Made After User Feedback

Color Contrast

Added darker borders and darker colors to elements to help them contrast against the background making it easier for customers with visual impairments to see elements

Product Page Filters

Removed the collections filter since it was redundant due to the room filters at top of page & removed icons and edited spacing to make less visually crowded and less visually overwhelming

Item Quantity Button

Added an item quantity button to the product cards so customers could add multiple of an item they know they want without needing to go to the individual product page

Order Summary

Added an order summary to the checkout page in order to allow users to visually see their current cart price all throughout checkout, rather than making them remember how much it was

Final Prototype

The final iteration of the Greenerly Home prototype based off the design system after it was updated from user feedback

2 people watering a tall plant

What I Learned

Usefulness of a Design System

Having a design system helps make sure that your design is consistent when you have multiple pages or multiple designers working on a project, as well as helps the designer replicate elements quicker and more efficiently

Design For Ease of User

When designing a site it is important to make sure you are designing in a way that makes the task at hand easier for the user to achieve. In this project, the iterated design helped make the site easier for the user to use by adding an item quantity amount to the product cards, so users who knew exactly what they wanted could add items to their cart from the search results, and by keeping the total of the cart in view of the user throughout checkout so they did not have to remember it on their own

Vectors from Freepik [1] [2]