Instashop Full Case Study

In this post I’ll go through my entire UX design process for building a concept for an online grocery shopping website. I’ll delve into my research methods, site map, user flow, information architecture, wireframes, user interface designs, user testing, and visual design process. It’s detailed. Here are some links, if you want to skip around.

• Overview- For an overview, check out this post on my website.
• Mid-fidelity Wireframes- For the mid-fidelity wireframes I made with Invision, click here.
• High-fidelity Wireframes- For the high-fidelity wireframes I made with Invision, click here.

Being an avid grocery shopper myself, I wanted to answer these three questions:

1. How do people shop for groceries?
2. Are people facing any issues shopping for groceries?
3. If yes, what can I do to help people solve these issues through an online grocery shopping site?

If you’re still interested, let’s dive in!

The Process

I divided my plan into four phases based on IDEO’s human-centered design thinking process.

1. Empathize: User Research, Competitive Analysis, Personas
2. Define: Business and Customer Pain Points, Prioritizing Needs
3. Ideate: Site Map, User Flow, Wireframing, UI Sketching
4. Prototyping and Testing: Digitize, Hi-fidelity Mockups, Test, Iterate

My Goal

Do user research to find people’s pain points when grocery shopping and design the website to solve these problems.

1. Empathize

The brief I received noted that the target audience was young professionals. I needed to connect with them and understand their pain points.

Research Plan

The first document I wrote was a research plan. It included the project’s stakeholders, background, research methods, research questions, participants, and timeline. View it in Google Docs by clicking here. In addition to the research plan, I created a board on Trello to keep track of tasks.

Feature Matrix

After conducting a literature review, I did a competitive analysis of other online grocery stores in the market space. I identified a slew of companies that would be direct competitors with Instashop and organized the data onto the feature matrix below.

Card Sorting Activity

I started my research into Instashop’s target audience with a card sorting activity. This allowed me to ease into customer discovery and identify how people organized grocery items. I was provided with the first 100 items Instashop planned to stock. I chose 50 of these and had 5 participants organize them into categories.

Consistencies:

• 4/5 people combined fruits and vegetables.
• 4/5 people wrote down “Bakery” as a category.
• 3/5 people separated drinks from everything else.

Inconsistencies:

• The number of categories people chose ranged from 4–14.
• Peanut butter landed in the following categories: Bakery, Kitchen Necessities, Sweets, Dairy, and in one case it wasn’t categorized.
• The time people took to complete the activity varied. One person took two minutes, one took five minutes, and one gave up after 15 minutes.

The data I gathered helped me label categories. I included “Bakery” and “Drinks” as titles in my final designs. I also saw the need to organize products by category and to provide a way for people to search for items. I presented both ways of searching for items on every screen I could.

I found it difficult to share a lot of tabular data here so I created a Trello board with my results. You can view the answers of one of my participants below.

Remote User Research

The majority of Instashop’s target audience shopped for groceries at physical stores. These stores, not other online grocery sites, were the biggest competition. I needed to understand why people shopped in stores and identify their pain points and then I could create an interface that fit their needs.

I contacted four people in my network who fit Instashop’s demographic requirements. I then Skyped with them as they went grocery shopping. They had their video off, but they talked me through their grocery shopping process. After they finished, I asked them a few questions about their experience in the store and about their grocery shopping habits.

Personas

I had a better idea of Instashop’s target audience after conducting the user research and so I created personas. This allowed me to put a face to the person I was designing for. As I moved further in the design process, I glanced back at the personas to make sure I was creating the site for my target audience.

2. Define

Pain Point #1: Lack of Time

“I stop in here 3–4 times/week on my way back from work.”

Young professionals are busy. Many of them work 50+ hours a week. They don’t have time to go grocery shopping.

Three out of four people that I interviewed rushed to the grocery store closest to them after working more than eight hours that day. One person lived in a big city and picked up food from the market on her way home. Another went grocery shopping once a month and stockpiled a large amount of processed food in her fridge.

Pain Point #2: Lackluster Options

“The past couple of times I’ve been to Market Basket they haven’t had the type of ginger beer I like.”

People expect grocery stores to be fully stocked all of the time. The person I quoted above walked into the grocery store wondering if he were going to be able to buy his favorite ginger beer. It’s all he talked about in the car on the way to the grocery store.

Other people I interviewed were less certain of their needs, but knew the brands they would buy. If the grocery store didn’t have those brands, they wouldn’t purchase the product at all.

Pain Point #3: Inconvenient Availability

“I work nights and sleep during the day. I don’t want to get woken up by my groceries arriving at my door.”

The people I interviewed had set schedules and went grocery shopping at specific times and on specific days of the week. They spent little time at home and had very short windows where they could go and buy groceries.

The success of Amazon has shown that people like having packages delivered to their door. People can be away and take the packages inside at their leisure. All of the people I interviewed regularly had packages delivered, but were nervous about having groceries delivered. They felt like they had to be home to accept the package, especially if they ordered something that could perish.

Business and User Goals

Creating effective designs is about combining the goals of the business and their users. I had a lot of data I needed to organize after doing my research, therefore I created a Venn Diagram detailing Instashop’s goals, their customers’ goals, and their shared goals.

3. Ideate Solutions

Addressing Pain Point #1: Lack of Time

In some ways the entire industry of online grocery shopping addresses this pain point. If people spend less time online grocery shopping than they spend shopping in a physical store, the problem has been solved.

I help people save more time by presenting ways for them to streamline their grocery shopping process. Examples of this are how I provide links to the most popular items on the site. I also allow people to add items quickly to their cart from the home page, categories page, and product page.

Addressing Pain Point #2: Lackluster Options

Young professionals are a large target audience and there are many companies competing in the market space. The proven way to compete with large, established companies is to niche. Instashop can specialize by selling items specific to subgroups such as vegans, Paleo, organic, gluten-free, low-fat, and low-carb.

Since Instashop was set in the list of initial items they were going to sell, I couldn’t market the company as selling to a specific group. Instead, I highlighted the products they did have with attractive images, clear labels, and additional nutritional information.

Addressing Pain Point #3: Small Window for Delivery

Most of the young professionals I interviewed lead busy lives and spent a small amount of time at home. All of the people I interviewed felt the need to wait for their groceries to be delivered to their door. Many of them said they couldn’t wait a long time for them to be delivered. Other companies in the online grocery shopping space deliver items within two hours of ordering. I couldn’t find a way to do much better.

The solution I came up with is to make it transparent that Instashop delivers to workplaces. Most of the people I interviewed work at a desk and are there 8–12 hours per day. Since they’re already planning on being at their desk, they might as well get groceries delivered to them.

Sitemap

I created a site map for Instashop, because there are a lot of pages. My site maps are different than most designers. They’re bare bones. Part of the reason is because I like to streamline my design process, but it’s mostly because I love lists. It’s much easier for me to see a site map diagrammed like the one I have below rather than have one with a lot of boxes cascading down the page.

User Flow

If you look at the site map you may be able to see three series of steps every person has to go through if they want to buy a product. First, they must go through the login process. Then, they look for items and add them to their cart. Once they’re done adding items, they must go through the checkout process.

Creating a user flow helped me visualize the steps and decisions the user needs to make. Take a look at the one I created below.

Wireframes

I won’t upload the wireframes for every page of Instashop in the post. I’ll provide the desktop, tablet, and mobile wireframes for the home page below. I’ll also provide a link to my Invision prototype so you can see the desktop version of the wireframes in action. It’s not perfect, but it should give you a good representation of the wireframes and how the site works.

Before I provide the link, I want to note that these are mid-fidelity wireframes. They are in grayscale and there are no images. I did this so that people wouldn’t be influenced by colors and pictures. I wanted to see how they’d react to the interface. Access the Invision prototype here.

Desktop

Tablet

Mobile

4. Prototyping and Testing

I prototype with Invision. I’ve found it to be a useful tool that’s integrated well with Sketch. It’s not perfect, but it’s one of the best resources I’ve found for cheap testing without delving into front-end development. I already provided you the link to my Invision wireframe of Instashop, but if you missed it here it is.

I already mentioned that the way people interact with the interface can be divided into three series of steps: sign in, browsing, checkout. I wanted to find and fix any problems with my designs. So, I recruited five people to do remote-user testing. I gave them a task: Put 1 Gala apple in their cart and check out.

Invision Test Results

I allowed each of the participants to complete the task on the Invision prototype using their own computer.

1. Login Issue- Two participants spent more than three minutes searching for the “Continue as a Guest” button on the login screen. They both were dismayed that they had to scroll down and find it to get to the next screen.
2. Shopping Cart- People were only supposed to check out with apples. There were two other items in the shopping cart, cilantro and soap. Three people ignored these items and checked out anyway. Two people tried to delete the items and found they were unable to get rid of them in the prototype.
3. Product Page- I made it possible for people to add the apple to their cart from the categories page and from the apple’s product page. Two people added the apple from the categories page and three people added the item from the product page.

I compiled the results, analyzed them, fixed the issues, and tested the prototype a second time. People completed the task with no major problems and commented that the interface was easy to navigate.

Visual Design

When I go to networking events and tell people I’m a user experience designer, I get a blank look. Sometimes I go on to say that I design websites and applications based on user research. Most of the time I just tell them I design websites and apps. I haven’t tested my theory, but I imagine most people think I’m a visual designer.

I don’t blame them. Almost all of the people who see an interface only see the finished product. They’ve never read a case study such as the one I’m writing now. They don’t know how much work good design requires before it becomes a finished product.

I’m not knocking visual design. It’s important. The colors, textures, look and feel of the screen are what people associate with the brand. Visual design is fun and eye-catching. I just wish more people knew it’s a piece of a larger puzzle.

Logo

I spent more time creating this logo than I’d like to admit. I wanted something simple and scaleable, yet distinct. It couldn’t be arbitrary. It had to represent online grocery shopping. Here is an image of a few of the logos I considered, but didn’t choose.

After a lot of ideating, I chose the logo below. You may be able to see that I incorporated the first two letters of the company’s name, I and N, but the geometric shape goes deeper than that. When I look at it, I see an open door. The company is an online grocery delivery service that brings food right to your door. So, it works. What do you think?

UI Kit

I created the UI kit after I designed the desktop, tablet, and mobile versions of the Instashop home page. I wanted to save my final mockups for last. I included active and inactive versions of buttons, menus, symbols, headers and footers in the kit.

Responsive UI Designs

I’ve been waiting the whole post to be able to show these mockups. I did change a few of my design decisions between wireframing and creating the finished designs, but most of my designs have remained the same. The most obvious change is that I added a large header image at the top of the home page. It looked weird as a thin bar at the top of the screen. You can also see that I took away the bar denoting the footer. It looked better without it.

Similar to the wireframes, I’ll show screenshots of the home page below and include a link to my Invision prototype for the desktop high-fidelity wireframes. Instead of scrolling all the way back up, view the prototype here.

Desktop UI

Tablet UI

Mobile UI

Conclusion

That’s it. Thanks for reading! If you enjoyed this case study, I’d appreciate it if you’d heart it. If you want to read more, check out other case studies and articles I’ve written. Feel free to follow me on social media, or visit my site. If you’re looking to hire me or if you just want to say hello, send me an email at Zfichmanklein@gmail.com.