UX & UI / RESEARCH / DESIGN CONCEPT
PROJECT : INSTASHOP | DATE : SUMMER & WINTER 2016 | CLIENT : DESIGN LAB
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.
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
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.
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.
I had 5 people volunteered to help sort out these cards, and on average this is what the cardsorting looks like.
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.
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.
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.
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.
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.
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.
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.