Digital Product Designer
website2.png

Instashop

Online Grocery Shopping

 
 
 

Project Background

Instashop is a moderately successful supermarket chain that has been around for several years. However they have been losing business due to new online shopping products, so the stakeholders are calling for research into how Instashop can also most it's offerings online.

 

Project Challenge

Instashop satisfaction ratings have remained relatively constant over the last 4 years, but their market shares have been decreasing by 8% each year. In about 2 years they could be forced to shut their doors. Through market user research, it was discovered that many customers now prefer online shopping and delivery to physical stores because they are faster, easier, and more convenient. Instashop believes that if they allow their customers to shop and buy their products online, that they can expand their customer base and market share. The pilot program will first take place in New York City and San Francisco, then expand to other cities after iteration.

 
 
 

Preparation

First I created a Project Brief, Research Brief, and an Interview Guide. These documents outlined methodologies, target demographics, and a full description of the problem and solution angles for the stakeholders. Then a Project Roadmap was set up with goals and dates of implementation, which was then mirrored over to a Trello board for convenient team access.

 

Research

Grocery_Shopping_Vegan.jpg

Top 5 Quotations from on-the-field research:

1. “Problem items people ask for - are ice (we don’t have), condensed milk (we only have seasonally), and almond meal for baking (it’s in the nuts section, not baking)" - Trader Joe's employee, Male, 35

2. "People who I help a lot - Those with long lists and carts looking confused, shopping for their boss. It could be maybe a nanny, an assistant, someone from Postmates or Instacart, but I am not sure. They are like any other shopper.” - New Trader Joe’s employee, Female, 22

3. “With Instacart I like how my person will text me like ‘hey they are actually out of that kind of bread but have this kind of bread.” and send a photograph. It’s really nice. I use them 1-2 times per month.” - Shopper, Single Mom, 45

4. “Don’t you just hate when you came into the store and forgot what you were going to buy? I will probably remember on the freeway and voice-text my husband to get it on his way home.” - Shopper, Chef's Wife, 33

5. “I’m scared that the food will be not as fresh if I order it from online, because all the photos are stock. I would rather buy in stores and farmer’s markets. Then I can select a banana and see if it is overripe or not - or if it is organic and non-GMO, these things.” - Shopper, Single Woman Engineer, 26

 

Synthesized Research

This was my first time making Personas, so I practiced making multiple based on the different individuals I interviewed, but learned that combining them into 1 for this narrow scope project would be best. So I chose Doris, and created both an Empathy Map and Storymap of her day. What surrounds Doris's day before and after she buys groceries? What is she thinking, doing, feeling, and where are there contradictions or interesting discoveries? I also created a document with the Summarized Research.

 

Feature Set

In order to determine a feature set, first I had to define the intersection of the business and user goals. Then I charted a competitive analysis feature matrix scatterplot from Amazon Fresh, Instacart, and Google Express. Based on this information, our business/user goals, and persona - I was then able to create a Provisional Feature Matrix document. 

 

Interaction Design

I performed a card sort in order to begin my site map with user flow. Now the information architecture and interactions are beginning to take shape.

 

Sketches

I sketched some key frames from the Amazon Fresh app to get a feel for the online grocery shopping mobile experience. Then I also have a sketch here for my own user flow, after I came up with the key features. 

 

Low to Mid Fidelity Wireframes 

There were dozens of iterations for the wireframes, that I continually made notes on and tested with users. One main feature I like that meets both the business and busy person's goals is a thermal bag that can be used to keep food fresh, and drop it at the door, even if the person is not home yet. Time windows help the person to plan when they should order the food, as the thermal bag is recommended as lasting for 3 hours. I found out the time frame by researching thermal bag products.

Here's a couple of my favorite screens from my Sketch Artboard while working responsively, where you can see my thinking process:

 

Usability Testing

I learned how to use VerifyApp, Usability Hub, inVision, POP app, paper prototypes, and to conduct research in person and remotely.

This was probably my favorite part of the project, and only some test screenshots are shown here: 

 

Conversational UI

Please view the inVision + UserTesting video to see my Conversational UI (chatbot) Facebook Messenger in action. This method of online shopping was requested during my research, and I tested it against the standard Responsive UI as well.

Even though the users preferred the chatbot, looking back on the business goals, I decided that it wasn't in the business's interest for this year due to monetization concerns, but an upcoming design trend that may become more popular at a later time. 

 

Branding

My process to create a logo and testing it with friends and mentors - was a lengthy one, but when that was complete, the beautiful UI Style Tiles seemed to flow like a waterfall! I sacrificed the look of "fast", and chose the most "simple", "fresh", and "friendly" choice for the company's branding.

 

Style Tiles

 

User Interface Design

First from my style tiles I created a UI kit to be the basis of the UI design. I updated it as I went along.

Next was my first version of the responsive user interface in Sketch and I focused on the Home Page. Then, notice the updates based on feedback summarized as "too playful", so I transitioned to more neutral tones, full-bleed images, and places to rest the eyes.

The most common positive feedback was regarding the "clean look" and "getting right to the search, like Google" instead of using a Hero image. As minimal design trends have become more in-fashion this year.

 

Project Solution and Next Steps

Instashop now has an incredible brand presence and a steady solution for launching their responsive website and app to meet customer's interest in food delivery services.

The next step would be building more key frames on the UI level, and making sure that the responsive solutions work well with more testing, before the final client handoff.