Tools and timeline

Figma
3 Days

Benefits

• Saves time / Reduces  building time

• Consistensy thru out the deisgn

• Get everyone on the same page when working in a team

• Better collaborations between designers and developers
  

I had to conduct a visual audit and content analysis of the Mossy Earth website before I could begin creating the design system. This made the design concepts and best practices easier for me to comprehend and communicate.

This case study consist of:

Brand
Design system
- Components
- Form design
- Typography
- Iconography
- Color
- Images / cards
- Logo
- Grids, Layout, Space
Design principles
Add ons and things that needs a fix

Design purpose and shared values

Mossy Earth demonstrates its work and mission by adding value to its product. This is accomplished by educating and encouraging/converting users to become paying members in order for them to also help and have a positive impact on climate change and wildlife.

.

Design Principles

Mossy Earth is dedicated to restoring ecosystems, supporting wildlife and biodiversity, and combating climate change by educating and engaging others to join them.

Their primary goal is to help restore, protect, and enhance a wide range of important and threatened wild ecosystems in a transparent and enjoyable process for their partners and members.

Brand language and identity

Their mission, to fight for wildlife and the environment, is represented in everything from the logo to the yellow and green colors that represent the attention they seek and nature, organic and animalistic shapes, icons, images, animation that gives insights into their work and of famous experts who share their values, + social proof from other members. This is communicated consistently on their websites.

Color

Well-utilized colors, in harmony with the design, enhance user experience while effectively communicating the brand. They have the ability to evoke meaning and emotions for the user. When applied thoughtfully, colors can be a powerful tool.

Green is employed to convey messages or used on primary buttons, while yellow highlights specific areas or captures the user's attention with essential information. This can be achieved by using it as a background for text and icons or as a subtle 'brush of paint' beneath sentences or words, effectively breaking up sections or dividing subjects.

In contrast, red is reserved for error responses, indicating potential issues or alerts.

Follow these guidelines to organize content on the page properly, to get a nice alignment and structure. Do not place components or content in the gutter and allow white space in between so the elements can breathe. Make sure elements that do not belong have enough space, and those that belong together don't have too much space apart so they seem associated.

Divide content so it's easy for the user to read and create overall harmony and elegance to the page. If the chosen spacing doesn't fit, go up or move down on the scale till the appropriate size is found.

Color

Color is representing the brand consistently throughout the web pages. Primary colors are used in text, highlights, buttons, logo, forms, where ever it's possible, it is important to not overdo it and keep it clean and professional at the same time.
Colors are representing the brand, green associated with nature and stability and yellow highlights important area and promote enthusiasm.

Proximity and Space

Group items that belong together, create great white space in between elements that do not belong to each other. Each section is presented in a tidy way to guide the reader's eye while they read. This is done by creating a visual Hierarchy to create nice readability for the user. Follow the principles of alignment, and spacing and use a grid to achieve the best results.

Contrast

Color contrasts complement each other and create a harmonic feel. The same font size is used with adjustments to size and thickness/boldness. Following a visual hierarchy will add contrast to the text and give a better reading experience. The user will easily see what is important. This can be done by using the right size on the heading and body text size and highlighting important text with a stroke of yellow. Repeat this pattern throughout the pages to create consistency no matter where the user is on the page. It's important to communicate Mossy Earth's vision and mission efficiently.

Consistency & Repetition

To give the user a great flow keep I consistent and repeat the same elements throughout the webpage. Unify the design from the main pages to the subpages, Following all the design principles will help to create a cohesive design.