Agrimac — ECommerce Website for Agricultural Machinery & Products
UI / UX Case Study
The Farmer works the Soil, The Agriculturist works the Farmer.
— Eugene F. Ware
Agrimac is an easy name that flashes in my mind for my project, which I named from terms Agriculture and Macho.
Macho Meaning : Macho is the word used to describe men who are very conscious and proud of their masculinity.
I personally felt, Agricultural Macho senses like Farmer and I felt it is apt for my project.
Why this Project?
On 9th Feb. 2019, I am in 3rd year of Engineering. I participated in a 24 hours Web Marathon conducted by Smallbee Technologies on an E commerce Website for Agricultural Machinery & Products.
We all know that E commerce Websites are broad to undertake, and I have very short time to design. So, I have to use my time wisely to design the project and to get selected.
And I started working on my project.
Challenges
Yeah! Design is the challenging part of UI/UX, because we have
- to attract the user,
- to make the user spend onsite for a long time and
- to make user interaction very simple and playful with our Design.
Research
I did quick, simple, and rough research, on user requirements by browsing different websites and from user reviews.
I gathered some points to design my project,
What I Observed ?
- Most Agricultural E commerce sites have the same way of webpage orientation.
- Lack of all agricultural requirements in the same site.
- Unable to locate stores around them.(Most of the agricultural E commerce sites didn’t include this feature.)
- Lack of direct interaction with the dealer for negotiations.
- Heavy and quite clumsy web designing.
Goals of My Design :
- I want to design a site with all agricultural requirements in this site, so farmers can easily shop in one place for their needs.
- I want to add a feature where users can search the stores nearby.
- I want to add store owner contact for direct interaction and negotiations.
- Make a lite website with little comic way for simple understanding.
Information architecture
Here’s how the entire project design flows, (Information Architecture of my project).
Wireframes
The sketching stage of designing website, is called as Wireframes, are the most important and interesting face in my entire designing process. I feel more drawn on the sheet than in wire-frame software’s.
Here are the some of my low fidelity wire-frames,
Designing
In my opinion, first if we drew proper Information Architecture and just in the same way Wireframes…finally the design will become simple, it’s like a person traveling with a Map in hands.
Basically, I like minimalism in design, but it’s a pity to say that my Agrimac website is not so minimal. As I said before, it’s in little comic look for better interaction.
Platforms and Tools :
Color Palette and Typography :
The task of compiling colors and fonts was the first step when I started designing on xd. I liked the blue color scheme but it’s not apt for this project, but I felt that it needed to be refined and have a contrasting color for Call to Actions and defining elements. That color is #5ECA9F, Puerto Rico (Medium Aquamarine), hue is Blue, I used #374957 as my secondary and #FFFFFF ,#F1CF69 as my Tertiary Colors.
Font was Ebrima is an Opentype font used for bolded areas and standard text. This font was easy to read, softer, and held up well to resizing.
With theme, font, and colors picked out, I was ready to start working towards the final product.
Design Presentation :
Now, let me present to you the process of my project Agrimac, how it flows step by step…!
Main Home Screen :
Main Home Screen was designed with Header Section, Page Navigation bar, Responsive Sidebar Navigation Menu and Hero Section. I want the first home screen to look Simple and Playful.
Elements in Homepage :
Navigation bar Scrolls to sections in the same home page like, New Arrivals, Our Categories, and Our Brand Partners.
New Arrivals contains the newly released products of the month with highlighted tags for user quick reference.
Our Categories section, classifies all the available categories, in two sections Machinery and Seeds & Plant inputs.
Few of Our Brand Partners who have collaborated with us for development of our Agrimac. And the Home page ends with the Footer section.
Our Stores Screen :
Our Stores is an additional feature, where you can find Our Agricultural stores around you, it’s a most desirable feature you can easily visit our local stores. And to make more easier, we added a side filter bar to locate required stores around you.
Our Categories Screen :
- In Our Categories categorized similar items together under different groups and subgroups of the available products, where if user tap on the product which directs to the Item List page.
- In the Items List page, we can find the different branded items belonging to the particular category with different features.
- And If we select the item, It will again direct to the Item Description Page. Here we can read the description and features of the Item and we can contact the seller for more details and negotiations.
Here I designed the common description page like High fidelity Wireframe, to connect prototypes for all items in the project with a single Item Description page.
Efforts I made to make shopping User Friendly
- To Make Shopping Easier for Customers and users, Items list page is designed with clear and visually appealing images.
- Here we can see the Recent Searched Items and More Similar Items for users to shop better and easier.
Contact Us Screen :
Contact Us Screen was designed with 24/7 Customer Services, like
- Contact with Toll Free Number,
- Chat with Tessa, and
- Write your quarry to our technical support.
Our Team Screen, shows information of our technical developers to serve better.
Signup & Signin Screen:
After successful compilation of Sign up, and just in the same way Sign In, you will directly takes you to profile page to edit your personal details and to Add Stores.
Editing Address in Profile Page :
Add Stores and Remove Stores in Profile Page :
In the Profile page we have two options, Settings and Logout. On clicking on Settings we go to the Settings page.
In the Settings Page we can edit Passwords of both Profile and Store Passwords.
Edit Passwords Screens in Settings :
Conclusion :
Yeah!, I hope you found it interesting.
As I said before, this project is a Web Marathon, I did this as a part of a marathon, within the entire 24 hours of the marathon, I designed the basic part of every element of the project. After completion of Marathon I redeveloped every element.
Unfortunately It’s my first personal project, I made every experiment while doing this project. I tried so hard to design this site to make enough, within a short time.
There is a lot more to develop in eCommerce sites but I just made this for my personal experience in designing UI/UX.
If you want to talk about design or UI/UX, you can feel free to reach me through Facebook