Designlab: Instashop


Instashop is a fictitious brick and mortar grocery store that needs to get into the online shopping business to stay relevant. Their market shares have been decreasing by 8% each year, which could lead to closed doors within a year or two.

After doing some market research, they believe that adding an online delivery service to their lineup will help increase their customer base and market share.


Create an online shopping experience that reflects the local brand of Instashop.


  • Empathize
  • Define
  • Ideate
  • Prototype
  • Next Steps


When I lived in the city, I was more likely to do online shopping. Now that I'm in a suburban area, I've noticed that I'd rather just drive to the grocery store or just wait until I really need to get something. Research was conducted to get a wider sense of the population based on location.


  • Literature Review
  • Interviews
  • Competitive Analysis

Research Questions

  • How does one interact with shopping, both online and offline?
  • What would be important to someone shopping for groceries online?
  • What would make grocery shopping online preferable?


I interviewed five people from varying age groups, occupations, and locations. These are the general findings:

  • Waiting in line is not ideal.
  • Online shopping is preferred for large items, rare items, and/or routine items.
  • Location matters: if someone lives close to a grocery store, they’d feel bad for getting it delivered.
  • Not comfortable with fresh items delivered unless it gets to them as soon as they get home.

Understanding the Users

Three personas were created to get a better understanding of an Instashop customer. An empathy map was also created to get a sense of what our persona feels, thinks, hears, does, etc. This also helped solidify the pains and potential gains the persona would have, which in turn helps us design for them. Lastly, a storyboard was drawn to take a look in a day of the life of Mina, our main persona, and how Instashop might help her.


Now that we know who to design for, we need to figure out what features are a necessity to customers. To help define our design, a feature matrix displays the competitive analysis of existing online grocery stores.

Feature Matrix


We asked people for their help once more by asking them to do a card sort to see how they categorize groceries. This gets us one step closer to determining the final copy of the online departments.

Card Sort


Business Goals



A site map helps plot out everything needed in the final Instashop product. User flows were sketched out to put ourselves in the customer’s shoes to see how they would progress from point A to point B on Instashop. From this, we compiled a list of UI requirements. To put it all together, wireframes were built and were laid out over the site map to make sure we had everything we needed before going to the next step of visual fidelity.

Mid Fidelity Wireframes

A few pages were designed for responsiveness to get a feel of what it would look like on different screen sizes.


So far, three participants have tested the prototype. About 40 people participated in the user testing portions via VerifyApp and UsabilityHub. This affinity map combines the data gleaned from these two sources.

Next Steps

Our findings in the affinity map showed that the main weakness of the design lay in the checkout process. Changes will be made to this in the next iteration accordingly.

That said, all prototype testers were able to complete the task of finding and purchasing an item.