
Green Corner
Designing E-commerce site for local grocery store
Overview:
This is a contextual project that was assigned. The goal of the project is to redesign and add a new feature to the website of a local grocery store to help them compete with other e-commerce grocery firms.
Role:
Product Designer
(User Researcher, Interaction, Visual Design, Prototype & Testing.)
Background:
Green Corner is a local grocery store in Brooklyn. The store has been in the market for over 25 years and would like expand it’s presence through ecommerce. They mainly focus on providing fresh quality products to customers.
Understanding the Problem:
The e-commerce created by GreenCorner was created without any usability testing and had little or no consideration of the customer's experience using the website.
Identifying the opportunities:
Based on user research data provided I came across top frustrations users experienced while purchasing online which mainly focussed on:

-
High Prices: Users experienced that the prices of products tend to be high while purchasing online when compared to personal shopping.
-
Unable to Negotiate: Since prices are high there is no option for users to contact the vendors to negotiate or compare prices with competitors to decide whether to continue to purchase the product.
-
Complicated Description: Users also faced challenges in understanding the descriptions of new products and found it challenging to connect with the store to understand what exactly is the purpose of the product.
User Persona:
Based on the research conducted, I identified the type of customer base and created a persona using their pain points and motivations.

Defining Problem Statement:
After gathering the findings from the research, I worked on defining the problem statement.
Problem Statement:
Users need an online grocery shopping where they can compare and buy the product at the store price because groceries are purchased regularly and customers would like it if they could purchase it at a cheaper cost.
Scenario: While purchasing groceries at the store, customers tend to check the cost out and try to bargain as it is purchased on a regular basis. But if the groceries are sold on the website customers tend to avoid purchasing online as the prices tend to be high and cannot compare the prices of the competitors and purchase at a lower price. Hence Green Corner enables an opportunity for customers to compare their product prices with competitors and decide where to purchase the product.
Creating Sitemap
After working on creating the sketches of the website based on the problem statement, I decided to create a Sitemap. I believe the sitemap would help in showing what pages are prioritized, linked, and labeled.
Below are the buttons on the global and local navigation bars of Green Corner.



Wireframing the solutions:
Based on the above problem identified, I worked towards addressing those pains by coming up with a potential solution:
-
Have an option to compare the prices with competitors.
-
A page to connect with the shop directly.
I quickly mocked up some basic wireframes to gather feedback from Product, Engineering and the users on the overall layout and structure of GreenCorner. This involved establishing a standardized visual hierarchy and layout for the Green Corner component.
Design Decisions:
Home Page:
This is the homepage of GreenCorner, the users will be brought to this page when they find our website. The purpose of the page was to encourage users to shop online and also get to know the services provided.
Design Decisions:
-
I chose the color green in order to connect with the users; as users associate the color with the environment.
-
Clutter-free design: This is a theme I’ve maintained across my screens, ensuring there is low clutter.
-
CTA (Call-to-Action) to shop is placed on the screen to ensure easy access to shop online so that users don't have to search through the page to find the e-commerce site.
-
In order to make it more understandable, I decided to caption the CTA button "Shop Now".
-
-
I decided to have CTA buttons on the top Navigation bar so users who prefer to directly jump into the respective page can directly click on the option.

E-commerce Site:
This is the shopping screen of Green Corner.
Design Decisions:
-
In order to encourage users to out new products, I decided to have the options of recommended products by green corner.
-
Clutter-free design: This is a theme I’ve maintained across my screens, ensuring there is low clutter.
-
CTA (Call-to-Action) buttons are made sure they are easily clickable and not too small for users to click on.
-
Users can also search the products by searching in the search bar or by clicking on the categories.
-
Based on the research I decided to provide an offer button on the navigation bar so that users don't have to search for discounted products and can easily click on the button and check the offer products.
-
Users can even check prices of the product without even clicking on the product to check the cost.

Product Information:
When users click on a product on the e-commerce site, they are redirected to this page.
Design Decisions:
-
Users can read a detailed description of the product and check the prices of the product.
-
I decided to have an option for users to check the prices of the competitors by clicking on the real-time price comparison option.

Real-Time Price Comparison:
When users click on real-time competitive price on the product information page, the comparative price screen pops up like this for users to compare the prices and decide if they want to purchase a product.
Design Decisions:
-
Users can click on the option, compare the prices and decide if they want to purchase the product from us.

Hi-Fi Prototype:
Validating the design:
I conducted usability testing sessions with our primary users to validate whether the new designs would solve their problems. I wrote a script including a scenario asking to select a product and find competitors' cost comparisons and decide whether to buy or not.
During the session, I observed how they interacted with the prototype and timed the task. The usability session revealed that it was less arduous and easy to navigate through all the pages. They really liked the new feature of comparing prices but felt the feature could be designed in a better way.
Results and Takeaways:
Some key takeaways from this project are:
-
Create a strategic plan to launch an MVP. This helps deal with out-of-scope requests that could potentially derail the project and help deliver a quality product in time.
-
User testing doesn't end after development. Design is a constant iteration of improving the experience for the end-user. Always find ways to collect and listen to your user's feedback.