The client for this project is a fictional grocery store franchise. Their patronage decreased by 8% each year over the past four years, although their customer satisfaction ratings remained relatively constant over the same period. If this downtrend continues for another year or two, they’ll be forced to shut their doors for good.


Through market and user research, the client determined that this decline most likely came at the hand of a recent increase in online grocery shopping from new players like FreshDirect and Good Eggs. Many customers prefer these products over shopping in store because they’re faster, easier and more convenient than the physical alternative. The client needs a way to stay relevant in the marketplace in order to stave off this new competition and stay in business.


The client believes that if they sell their products online they can recapture their ailing customer base and market share. Customers need a fast and convenient way to shop and online grocery shopping fills that need. I will design the first iteration of that new service, called Instashop.


I am following a user-centered approach, allowing myself to be guided by user
research and frequently iterating on each step according to newly accumulated data.


I formulated a research plans using a few different techniques to identify which customers to target with this new product. I crafted a survey to help me to understand target demographics and consumer preferences more quantitatively. I focused on habits such as where they shop, frequency of shopping trips, and what they buy. After analyzing 29 survey responses, I realized that in-store customers have the potential to be online users. I went to observe them in-person at the supermarket to see what currently frustrates them about their shopping experience and see if online grocery shopping might remove any of that friction. Finally, I conducted interviews with 5 participants to observe their reactions and emotional responses to questions about their shopping experience. Ultimately I had enough data to understand why online competitors have been successful in attracting traffic away from the client but also which tradeoffs consumers may not be willing to stomach even for the added convenience of online shopping.



"I like that I can see and examine the products I'm choosing in person; I want to make sure they are fresh."

Freshness Guarantee

"I love the interactions, say, with the cheese guy and fish guy who know us and make personal suggestions."

Personalized Shopping

"You know that whatever you choose with your hands you're actually going to get, whereas [when you shop] online they might call to say they’re out of stock."

Item Availability

Next I turned to market research. I wanted to understand what already exists, what works and doesn't work, and to learn more about the consumer groceries market in general. I created a competitive analysis comparison to see what is currently offered by a few major existing players. Based on the knowledge gained from my user research, I grouped the features offered by these existing players according to the value they provide, and further grouped according to my impression of the cost associated with supporting these features. (If this were a real project I would glean cost-related information from engineers and industry experts.) Based on this analysis I set out to determine what would be critical to implement in the MVP.


I identified behavioral patterns from my user research and articulated them into a set of useful characterizations, which I then synthesized to create a persona, a representation of our targeted user. I determined that busy, young professionals make up a large portion of the new product’s target market.

InstaShop persona

Following the personas, I created an empathy map in order to empathize with my users. I gathered that Instashop needed to offer guaranteed freshness and quick delivery above all else. I then created a situational experience in which I showed how my persona would interact with the new product in their daily lives. It reflects the behavior the user wishes to change, how it affects them, when, and why.



With my new understanding of the product I was going to build and what functions it would need to provide, I created a site map for InstaShop to better visualize the specific pages needed.

After deciding which pages were critical to the basic structure of the new website, I drew some rough sketches and then proceeded to low-fidelity wire framing in Sketch. I created annotated wireframes for my stakeholders so that they could visualize the benefits and reasoning behind my design choices.

Click on the wireframes to enlarge

Once I was happy with my first-pass at wireframes, I created a tablet and mobile version of the homepage in order to prepare for creating a responsive website. I then moved on to prototyping and testing.


I created a user flow in order to identify any gaps in the user's experience navigating the product to accomplish their goals. Specifically, I wanted to see how a user would shop for an item and check out. I built a working prototype in Invision using this flow as a guide.

I used the prototype for usability testing. My objective was to test the main functions of the website and its ease of use for such tasks as adding items to the cart and checking out. I was looking to assess how the user understands and navigates the site to accomplish their goal and what, if any, were their pain points along they way. The results would then help me evaluate my progress in the design phase and give direction on how to proceed. Simultaneously, I also ran remote testing using both Usability Hub and Verify.

I compiled all the results from my prototype research testing sessions, including the monitored testing using the Invision prototype and the remote testing in Usability Hub and Verify and turned it into an affinity map, to help drive the project forward.

Affinity map from the usability testing results


After a few rounds of testing and iterations on the prototype I moved on to design. I wanted to create an online store that made customers feel as if they were in a gourmet supermarket. I scoured the web for photos of food that matched the tone I was going for and built a color palette inspired by the photos I found. I started work on branding InstaShop by sketching dozens of logo ideas. I narrowed it down to a few designs that caught my eye the most and took to Illustrator to define the logo. After several iterations I was satisfied with the outcome. I created a UI Kit using the color palette and imagery I had already settled on and found complementary typography to go along with them. I designed all the UI elements I would need to actually build InstaShop. With this tool in hand, I was ready to create my responsive mockups of key screens.