Steve Le
Raw 1.png

Instashop

 
Intro.png

 

UX & UI / RESEARCH / DESIGN CONCEPT

PROJECT : INSTASHOP  |  DATE : SUMMER & WINTER 2016  |  CLIENT : DESIGN LAB

 

Overview

With the continued advancements in technology and convenience, Instashop believes there is an opportunity to change the way people shop for groceries by providing a way to do grocery shopping online. Our goal is to better understand who our target market is and how to make Instashop appealing to customers.

 

 

Methodology

Questionnaires: First we will need to gather quantitative and qualitative data to understand whether this is a need across a variety of different demographics or if it is a niche demographic that we should be focusing on.

Interviews: Conduct interviews to understand what pro-online shoppers would want to see for online grocery shopping, and understand what is preventing those wary of online grocery shopping from trying it out. During these interviews, we will also learn about what each interviewees’ shopping habits are.

Participants: College student, working professionals, and stay-at-home mothers

 

 

Personas

Based by interview and Survey I have narrow down this particular persona, Someone I'm sure will make usage of the concept of ordering fresh grocery.

 

Sales Manager 

 

 

Business Goals

My thought process on what I think are key ingredients to making a business successful and not successful. With the help of the people I interviewed, and surveyed they're also factor this chart. 

 

Business Goals .png
 

 

Cardsorting

I had 5 people volunteered to help sort out these cards, and on average this is what the cardsorting looks like. 

 

 

 

Sitemap

Putting a lot of thought into this sitemap, making sure every direction align with one another. More importantly making sure everything is clear and concise before I tackled down the next approach. 

 

Sitemap_1 (3).png
 

 

Wireframes

This is a rough sketch of what the final output may look like, with the wireframes I did incorporate a lot of things that the user wants to see in a product. Not all the ideas will go thru, but at least it gives me some sense of visual of what it will look like in the end.

 

 

 

Moodboard

These are few of the inspiration pictures that got me thinking about what would Instashop website would look like. My initial take is to keep the urban feel but at the same time brush up and make the website cleaner, and keep it modern and updated.

 

 Artwork by:  Yammie's Noshery

Artwork by: Yammie's Noshery

 Resource from:  Joomla Templates

Resource from: Joomla Templates

 Found on  Pinterest

Found on Pinterest

 Resource from:  Shutterstock

Resource from: Shutterstock

 
 Found on  Pinterest

Found on Pinterest


 

Responsive Web Design  I  Homepage

Here's what the final layout looks like,  for the Home Page it was based per the Mood Board I want to use low light pictures, it brings out that seriousness, dramatic and raw feel. The colors I chose are primary to align with the pictures seamlessly. And any little highlights that stands out are hints for user to go to the next step. 

 

Shop Page

 

Product Page 

It was important to put enough content in this page, I don't want the user to be overwhelm but enough to grasp everything they need know before making the final decision.  And if thats not enough I incorporate a simple recipe down below that will go well with the product. 

 

Time and Date

Entering in the shipping address will help find the closest time and date based by your location. As for the design aesthetic I was juggling either to have a calendar or input a modal window. I came to a conclusion that this works better than I originally plan for. And if the user were using this product on mobile phone or tablet I wanted to make this page interactive.  

 


 

Prototype

This is the prototype version of what it may look like it if was LIVE! Please feel free to play around with the interface to get a feel of the user experience.

 
 

 
 

Next Step

With the UI being completed, surely there's always room for refinement and improvement. Especially for the prototype I feel there should be some animation only on the small key things for the users to take notice. And then going back to the stakeholders, let them entail and how it perform. Let them see it for themselves and take notes on what needs area needs to be brush up on.