grocery store develops an online presence


Instashop is a responsive grocery website that connects customers to a wide variety of foods and a lightening fast delivery service.

In 2016 was Instashop experienced their lowest amount of sales as a Brick and Mortar grocery store.  In 2 weeks, they've chosen to rejuvenate their rebrand and an extend their services online. 


my role

I led the design of Instashop across Mobile, Tablet, and Web from empathy ideation.  Up until Branding, and Generating a Prototype.  


Building Empathy with Users


IDeation & Prototype


Customer Insight & Ideation






Initial market research indicates that there is radical increase in online consumer shopping.  Instashop now realizes there is a niche to fill.  Thus, they need a platform to allow their service to work for their customers.  Instashop believes that there is an   emerging market for online grocery shopping.  

Our challenge was to extend the shopping experience with customers and enter the growing market of online grocery shopping.  Instashop would offer a curated selection of the best ingredients and combine it's service with new efficient delivery service.  With this new benefit, we plan to introduce quick and convenient online shopping experience.




FAMILIAR organic cheap

With the growing popularity of online shoppers, I was asked to design and build a responsive website to meet the needs of everyday grocery shoppers.  This strategy was advantageous and broad.

The belief was that all grocery shoppers shop the same way. Understand how why, how, and what they shop for allowed me to  introduce a shopping experience.

Early Empathy research had proven to be key.





I started off this project by sending out a survey to learn about current shopping habits and understanding why individuals choose to shop online.  I also completed a web audit to understand existing online grocery services. This was followed by a competitor analysis to understand which key features were valuable for customers.  These are the distilled insights that defined the Alpha version of this product:


Artboard 7.png


PersonalizeD Shopping Experience

Customers enjoy the ability to create personalized lists, and save items to their shopping carts for later.






Saves time & effort

Customers enjoy the convenience of online shopping.  That they have the ability to scroll through a large catalog, make a buyers decision, and have it delivered straight to their door.





Saves money

Many online shopping services include a discount on a variety of items.  With a dynamic website, new deals can be updated as often as possible. Ultimately giving customers the highest value for their hard earned money.



Unique ingredients.png


Unique ingredients

Shop Anywhere.png

Shoppers enjoyed the diversity of items in an online catalog.  In fact, most say that they shop online for this purpose- to find items they normally wouldn't see in the store.



Shop Anywhere

Most individuals are near their computer, tablet, or phone everyday.  They may be working professional, however with access to online shopping services they are able to buy things anywhere.


part 2:  Define

I mapped out business & user goals and completed a web audit to understand existing online grocery services. This was followed by a competitor analysis to understand which key features were valuable for customers.  I took note of any areas for improvement and growth.

From here I was able to draft up wireframes of the website.  I was primarily after getting my thoughts down on paper.  I wanted to understand how different pages of the current website could be consolidated.  


part 3:  Ideate + prototype

Next I created responsive wireframes.  The following piece is part of my responsive wireframes from Desktop (top) to Tablet (middle) to Mobile (bottom)

part 4:  test

I conducted user testing via the Invision Prototype and through Click tests with Usability Hub.  The goal was to determine how successful a user could be to complete key tasks and discover key obstacles.  The results of my testing were mapped out in this affinity map which will guide my iterations.

Click Tests


Affinity Map


part 5: ITERATIONS and UI

Based upon user testing I made changes to the design.  First was developing a branding, I started by creating a mood board. Next, I created a style tile and UI kit that was built onto wireframes. Last I designed the final screens for the Responsive grocery website.  


UI Kit

pt 2.png

Responsive Design

Next steps

  • Further Usability Tests 
  • Designing other key screens