Branding | UX/UI E-Commerce App & Desktop Design
About Earth Ethic.
Earth Ethic is an E-Commerce OUtdoor EQUipment manufacturer with its main focus is raising awareness of harmful products being made in most waterproofing materials, and selling only high quality and smart alternative products.
Drawing inspiration from trails and organic forms in nature and paired with a bold typeface and the opportunity to work with the double E’s in the name, this logo gives an informative and clean voice to a quality and purposeful outdoor manufacturer.
Nearly all participants did not know outdoor equipment companies manufacture gear with chemical perfluorinated compounds, (PFC for short), which is used for inexpensive waterproof material, but is a recently discovered carcinogen, and extremely pollutant to the environment, people, and animals in it.
To create and brand an e-commerce company in an informative approach, reaching mid to older age audiences and their families.
To design a mobile app and website with great usability for the best e-commerce experience, and raise awareness of the harmful PFC chemicals being made in most outdoor gear.
Identifying a need.
what do users need in e-commerce browsing and shopping?
How MIGHT I raise awareness of PFC being made in products?
These are some of the questioned I asked myself in the planning phase of the project.
To begin, an online survey was conducted and over 90% of participants did NOT know about PFC chemicals in most waterproofing gear, or if there were alternative sources to purchase instead.
Additionally, 81% of participants answered yes to paying a little more for outdoor products if it meant keeping the environment safer!
-social media seems likely outlet for raising awareness and using as a marketing technique. Possibly a rotating featured user section on website/mobile. #earthethic; #wheresyourearthethic
-I started researching user based design decisions for best practices for e-commerce companies, and online ordering to help me create the best experience possible for the user.
I created some personas of fictional users that would help me formulate an idea of how to tackle some of the problems for this project.
Initial Prototyping + User testing.
Early prototyping + testing shown some problems, but room for opportunity. Based on user feedback:
Add to cart feature was overwhelming user
Viewing product on product page as a silhouette would be difficult to view the the actual item
silhouette feature dividing space is too busy and distracts the user
Solutions + Features.
Based off feedback, a more subtle UI element of a silhouette was added throughout the desktop and mobile. A sleek ‘add to cart’ feature that animates to the right of the screen and gives a cleaner experience for the user.
A bold typeface, Poppins, that is easily legible on various screens with high resolution images, sharp, and full. Appropriate for the informative values behind Earth Ethic.
Based on colors in nature, organic and rich variety of colors like charcoal to vibrant oranges that help drive the adventurous spirit of the brand.
Homepage mockup + full page below.
The goal for following solutions are to maintain an informative, but modern and approachable tone. The products being sold are made with a new science in formulating an alternative to PFC textile finishes, so there is a sense of refinement and quality that needs to come through the design.
Category page mockup.
Product page mockup.
‘Added to Cart!’ function mockup.