Often we as humans do very little good to mother earth. Do you remember the last time when you planted a tree🌱 or even taken public transport🚎 or switched off your charger when not in use? These things may sound very obvious but create a great impact. At the same time, even a minor change in your lifestyle does matter to tackle the world’s alarming global warming rate.
One thing that we can do is to turn Eco-Friendly. Many NGOs and major brands like Amazon, Apple, Beyond Meat, Adidas, and many more have remained environmentally sustainable. Even many Indian startups have been striving to make difference overcome climate change.
What is Eco-workx?
Eco-workx is one such platform striving to promote eco-friendly products. It is a company based in Bangalore that supports innovators whose products truly are eco-friendly and also sells such products on its platform to individual customers and consumers.
🚀 Our vision is to inspire and enable people to go the eco-friendly way to create more sustainable lifestyles.
Eco-workx has a great business model, thereby connecting the buyers and sellers on a single platform. But the major drawback was their website. It had several issues. Let’s now break down the website and redesign it.
often redesign is necessary to keep our users safe🤣
Why redesign?
The reasons are pretty common like:
- Increase in conversion rate
- Improve the outdated website
- Educating the users about the difference they can create
- Great experience for both the buyers and sellers on a single platform.
Getting Started!
Wait, before getting starting let's have a look at the newly designed website:
User Insights
I asked customers to complete a few tasks and also asked a few questions on what was their experience across the platform and their knowledge about such kinds of products. This helped me know how the user base is thinking about his website and its products. Here are some of the insights gathered:
This website has quality products but the experience is dreadful.
when I landed on the page I didn't know where can I navigate to buy the product, It was pretty confusing to figure out where the buy now button is. It took a lot of effort.
I love their product and service, but it would be wonderful if they enhance the purchase flow.
User Pain points
Validating the user pain points regarding the existing website helps in improving the whole experience of the site (based on inputs from users)
- Absence CTA (no CTA to buy products)
- Use of carousel (creates confusion if the website is for buyers or sellers)
- Excess text and image clutter
- Very poor design
Laws that should be kept in mind for this redesign are:
1.Aesthetic Usability Effect (elegance of the website enhances the quality of the product too)
2. Fitt’s law (Reduce the duration to buy a product is necessary to improve the purchase experience i.e by adding a buy now CTA)
3. Jacobs Law (website should be similar to the existing e-commerce websites to help users easily achieve their goals)
4. Peak-End Rule ( this helps in conveying the user that they can both buy and sell products over here)
Redesign of website
First, let's see the structural differences in Information architecture between the old and the new website:
I made changes based on prioritization of each section over the other to fulfill the ultimate goal of the site i.e promote sales, encourage eco-friendly sellers, educate users, and create an impact in society.
- I have broken down the Buyers, sellers, and bulk buyers section in the old design to form 2 new sections called eco-inventors(sellers) and offers(bulk buyers) to provide a clear understanding.
- I also removed the categories section and brought the bestselling products section a step ahead to make users know about the products sold in the first instance.
- I prioritized testimonials over the blog section because often users give value to user reviews/feedback for any brand or website.
Hero section
The very first thing to always remember while designing the hero section is not to put lots of information at once in the hero and also not to put less and irrelevant information either. Then what's the right way?
- Never use a carousel (1,2,3,4 in the old design placed as a carousel)in the hero section. This is because it hides content that the user may skip off as the users scroll vertically using their mouse scroll wheel which is easy. But Horizontal scrolling involves more effort since users typically have to move their mouse pointer to a specifically designated area on the screen and drag or click. So never make your user scroll horizontal😅. Avoiding the use of carousels is my choice.
- Often a CTA guides users through the buying journey. So the new design has an appropriate CTA to drive the users to accomplish tasks, while the old design lacks CTA. An effective CTA will do wonders at drawing users’ attention.
- As the website is selling products in a few categories only I decided to display them in the hero section, helping users quickly identify what the website does.
- As per our first law (Aesthetic Usability Effect) I have tried maintaining a minimalistic and elegant look for the website, to make products look and feel premium to the users🤩.
- I have narrowed down the navbar (if possible)by integrating and removing some sections. Often proving minimum choices reduces the duration of users' decisions/actions(Hicks Law).
Overall the hero section must be designed in such a way that the user can immediately know what the website does and how can it accomplish the user's need.
Product quality
Any ECO-friendly product must have passed through several tests to be certified as products that can be reduced, reused, recycled, and replaced at times. The user generally checks for these kinds of information (certifications) while shopping for such eco-friendly products So it becomes essential to provide proof for the maintenance of quality products on the website(as there are other sellers also on the website).
- Never makes websites text heavy🏋🏻 when it can be represented more clearly using photography/iconography.
- Always maintain consistency throughout the website.
Best Selling
- keep Images product specific. Don't use busy images, that distract users' eyes.
- Try eliminating secondary information📑 about the product like the seller, features, type, unrated stars, etc. Emphasize primary data (user required data) like price, discounts, quantity, rating(if any), etc.
- Always try Shortening the purchase process, as you can see we can directly buy the product by using the buy now CTA, whereas the old design does not have any sort of CTA ( this is a major drawback), making it difficult for the user to identify his next step.
Customer motivation
Motivation is something that really drives Human Behavior. If a person is motivated to complete a goal or task then he/she tends to do it, this is all based on the motivational psychology of humans🧐.
If you are more enthusiastic about motivation-human behavior visit: https://positivepsychology.com/motivation-human-behavior/
So, I have created a progress line indicating the sale of masks which has benefited the underprivileged in these covid times. Thereby making every buyer feel that their purchase has helped others survive. An act of Humanity.
Eco-Innovators
Since the website is for direct buyers/household buyers they need not contact. while I created a separate section for Eco-innovators💡 who are interested to sell their products online here and bulk buyers(covered next).
Bulk Buyers
Here I have combined the festive sale on the website with the bull buyers category to provide exclusive deals on bulk purchases for the festive season.
Testimonials
The first thing addressed in this section is the legibility and readability of text and excess blank space. Coming to the new design I increased the background contrast and also the font size(for readability) and changed the typeface (for legibility), further I included two testimonials to use the excess free space.
To know more about legibility and readability visit: https://creativepro.com/legibility-and-readability-whats-the-difference/
Blog
I have reduced the text since it's the platform that is product-specific. so I have made this section Blog specific. It has a dark mode and video content too. It's pretty simple and straight forward.
Footer
For the footer, I have separated the newsletter and the footer section. No major changes have been made except some minor content changes and removal of redundant text.
Here is the full preview of the old and new design:
Outcomes
- The new one is more user-centric.
- User Interface depicts the visual brand identity🌏.
- It is more functional and less text-heavy.
- The website is more focused on product selling and User retention🙇🏻.
- Overall it serves both the buyers and sellers👥.
Figma Preview link: https://www.figma.com/proto/PaKNOksaqXSJ6NYcUJjEBm/eco-workx?node-id=35%3A18&viewport=123%2C-142%2C0.25&scaling=scale-down-width
Project Learnings
- The very first thing is it's always a better option to create two separate portals for the buyer and seller. This makes the work less confusing and also makes things much defined and easy to access.
- Always keep the website focused on our potential target audiences🎯. Do make your website for specific users(either buyers or sellers).
- When building an e-commerce website try displaying your products right in front with a CTA, This helps in grabbing the hurry/busy customers. Always use CTA with appropriate text and in an appropriate place, This can make magic🔮.
- I also understood that redesign is necessary for every business to keep going with the changing trends.
This is a self-initiated project and this is my first redesign project.
You have made it to the end of my Re-design project🥳.
Hope this was insightful🤓, and if you like the new design do let me know in the comments and shower your greeting by claps here on your left👈🏻. If you have any awesome ideas that can improve the design do let me know😊.
You can Dm me either on LinkedIn:https://www.linkedin.com/in/shivani-bai-9a89381aa/ or on Instagram: shivani_design05.
