Background

Instashop is a fictitious grocery franchise based in the United States. Although their customer satisfaction ratings have remained relatively constant over the last 4 years, their market shares have been decreasing by 8% each year. Many customers prefer shopping from their desks, homes or in line at the coffee shop. Instashop believes that if they allow their customers to shop and buy their products online they can expand their customer base and market share. They plan to design and release a pilot program in New York and San Francisco, iterate based on what they learn and then expand the product to other cities around the country.
 

The Design Process

There are 5 stages of my design thinking process: User Research, Experience Strategy, Interaction Design, Testing and UI Design.  

User Research

Primary Research - Individual Interview

To identify the potential user, I interviewed with 4 people who are from 19 - 70, all of them have different habits of buying grocery. People who are above 50 have to feel the food in-store but younger people don't mind to buy the grocery from the internet as long as the quality is good. There are some interview question, I would like to ask them:

1. Is there the only store where you buy the grocery? Why?

2. What do you concern the most when you are shopping for the grocery?

3. Why do you buy the grocery on the internet?

4. Is there any difficulties when you shopping online?

Competitive Research

Compared with HKTV Mall, Parknshop, Oisix, I found which feature I should keep and some of them I can enhance. For example, Parknshop has the recipe ideas that inspires me to develop the page of recipes.

Persona
After the observations and interviews, the users are mainly cook for their family and young, so young couple would be the target.

Experience Strategy

Site Map with Wireframe 
Based on the research, I developed the site map with wireframe and show the whole structure of the website.
View Feature Matrix 

Interaction Design

Design Patterns

Wireframe

Testing

Prototype

I asked 3 people to do 1 task for the testing and I could observe them the whole process, for example, Find the vegetable, Add to cart, Proceed to checkout, Checkout process.
View Usability Testing

Purchase Vegetables
They comment that they used to proceed to checkout after reviewing all the products and different users have different habit for Registration. 

Solution

UI Design

Branding

Responsive Website

I would like to target on young couple with higher income as their purchasing power should be stronger so my design is tend to high-end design. I use less icons and really clean layout design with dark color. It takes lots of time to find the artistic food photos but the overall feeling is trendy.