design of a grocery shopping & delivery app



Bask is an independent foods market that focuses on a selection of high-quality staple ingredients and a few packaged meal items. Online grocery delivery is a rapidly growing market; even with the existing competition in grocery delivery apps, Bask sees the potential for expanding their sales to a much wider local customer base than with a brick-and-mortar location alone.


Online grocery shopping isn’t just a market with growth potential; nearly half of Americans already buy groceries online, according to research from the Food Marketing Institute and Nielsen. Their surveys found that in 2017, 49% of US consumers purchased groceries online in the past three months. Among millennials, the rate was even higher, at 61%, Gen Xers were at 55%, not far behind. And it seems to be growing: these numbers have doubled from the same surveys conducted last year.

With such growth and saturation, it makes sense for grocers to enter the online shopping market. Currently dominated by the likes of Amazon Fresh, Instacart, Good Eggs, and Fresh Direct, Bask sees potential in their local market that is underserved by the metropolitan titans of the grocery game.

As a newcomer to online grocery shopping, I got myself up to speed quickly. I had always been comfortable with walking in to my local organic grocer, Berkeley Bowl, though I did find it an inconvenience to go across town for smaller purchases. In doing research, I was introduced to the pleasures and pitfalls of online grocery shopping, and have identified the most convenient features along with the least useful ones. I read up on the topic with reports by Neilson and the FMI, interviewed delivery persons and consumers who use the delivery apps, and tried out as many as I could.

I conducted an online survey to probe some remaining questions I had regarding people’s opinions on shopping in-store vs. online, and what types of items are preferred in online shopping. I found that most were motivated to shop online to save time, organic foods are preferred over gourmet foods, quality over lower prices. People also perceived themselves as buying dry goods and pantry items online more frequently than perishables such as soft cheese or fresh butcher meats; most responded with a strong preference for purchasing fresh meat in person rather than online.

Armed with my new knowledge (and now a very well-stocked pantry), I set to work on the design process.

Research & Synthesis


While relying on self-reported data is not ideal, a larger audience can be reached with a survey or questionnaire. General demographic data can be collected, and seen how it corresponds with willingness to shop online, expectations of online shopping, and other shopping habits.

My survey revealed trends such as a preference for organic foods over gourmet foods, and a preference for higher quality items over low-priced items. Most said that the primary reason for shopping online was for the time-saving convenience, Over two-thirds of the participants had ordered groceries online in some form already, and over 60% had a preference for purchasing individual items over pre-selected meal kits or weekly packages.


While still a relatively new field, the competitive landscape of online grocery shopping has already become dominated by a few key players: Instacart, Amazon Fresh, Good Egg, Blue Apron, and Safeway Delivery, to name a few.

To help determine which features would be expected and which to include in the release of Bask, I created a competitive analysis chart, listing features most common to the existing apps divided into three categories: account features, app navigation features, and delivery features.

All features from competitors should be considered, in addition to what sets each apart, and how each are using their feature list to target their market.


A comparison of features by relative ease of implementation to their value in utility to the consumer. It can help to make decisions on which features to include, leave out, or add in an future version, released with an update after initial launch. Here, some features such as social sharing, achievement badges, custom shopping categories were determined to be of lower value and were ultimately left out of the later designs.


Personas of real or imagined people help various teams to envision and communicate the needs of their users, and to stay focused on the most important goals, and avoid feature creep. Personas are empathy tools with wide adaptation in the UX design process.

The personas created for Bask were made from what emerged as the two strongest trends from my survey and research from other studies of online grocery shopping: two relatively busy people in urban or semi-urban areas. One a middle-aged single parent with limited time, the other a millennial with expendable income.

When creating features and interactions for Bask, these two personas were kept in mind as the people who would be using them.


Taking empathy tools to the next level, the empathy map is a deeper dive into the experience of the target operant of the software being developed.

It’s easy for us as app builders to fall into the mindset of making a product that we would want to use, but the people we are actually building for may not have the same goals or priorities that the designers, developers, and other stakeholders have. This is especially true when a user may come from a completely different cultural setting, speak a different language, or if they perform completely different tasks with the product than the designer does.

An empathy map is an exercise that an entire team should perform together, to help everyone actively engage in the world of the people who will use their product.

Information Architecture


Balancing the content of the product with the needs and goals of both the business that provides it and the people who use it is one of the key goals of Information Architecture. Identifying these goals, and finding where they overlap, helps set priorities to define an action plan for development.

Here, competitive pricing, repeat orders, quality products, efficiency in delivery are some of the shared goals of consumers and product stakeholders.


An map of the interactive process of typical uses for the app, with events placed in sequence for completion of the task.

For Bask, I created this map for the most common user flow; searching for an item or items, adding them to the cart, and checking out. I also created seperate task maps for the sign-up process, a more detailed map of the check-out process, as well as edge-cases like returning a purchase, purchase not delivered, and cancelling an order.

Site Map

Often the most visible and widely circulated document in the Information Architecture process is the site map. These are living documents, which can and should be updated, added to, modified, and reorganized based on updates and iterations of the design. However, once a product is live and people have begun learning and getting used to the organization of an application, major changes should be made only after careful consideration, as users will need to re-learn the structure.

Here, every screen of the initial design for Bask has been mapped and placed in a hierarchical order of the overall structure for the app.

The most common document in information architecture is a site map, detailing every screen or page that is to be included in the final product. These are living documents, which can be and should be updated, added to, modified, and reorganized based on updates and iterations of the design process. However, once a product is live and users have begun learning the organization, changes should be made only after careful consideration, as users will need to re-learn the structure. Measure twice (or more!), cut once, as carpenters say.

Card sorting

A card sort helps designers understand how people might organize elements into categories. Often, unexpected results and patterns are found, which may not have been anticipated. A collection of items - either an inventory, a feature list, a collection of tasks, etc. - is presented to a test subject on index cards. With absolute minimal explanation, the subject is asked to organize them in whatever way makes sense to them. Organization methods can, and usually do, vary widely from subject to subject.

Here, a card sort exercise was conducted with several subjects to help determine which grocery category the various items should be grouped into. This result was the average of all card sort exercises combined, but there were several outliers, such as almond milk grouped with other whole nuts, fresh meats categorized separately from deli meats, bagels and waffles grouped separately from other breads. Anomalies should be known and considered when creating systems of organization.

Design 1: Wireframing

Low-Fidelity Wireframe & Prototype

A rapid prototyping exercise created from index card wireframes; easy to make, fun to use, and they provide me with an immediate way to test different screen layouts and organization systems that had been developed through my design process.

I conducted small-scale alpha tests with stakeholders and colleagues to try out initial design ideas and test their clarity. Modifications and entirely new layouts to the designs could be made on the fly during testing, and I was able to identify usability issues with the interface early on.


After some initial user testing with the paper prototypes, I had a good idea of what worked and did not work in the UI layouts for each task to be completed during a browsing, shopping, and checkout activity, and could create a more specific digital interface for the app.

Here, digital wireframes detail the interface layout of each screen. Notes to my future self indicate pixel measurements for each element, border sizes, typography, and menu hierarchy.

Usability Testing

Prototype Testing

Usability testing of the wireframes was conducted using InVision cloudware, which I find to be an excellent rapid prototyping tool. I asked participants to proceed through the steps of finding a specific item, adding it to their cart, finding another specific item in a different category to add to the cart, then deleting an existing item from the cart, and finally checking out with a custom delivery time.

Tests were conducted remotely and recorded, as well as several in-person observed tests, from which I was able to take notes and interview the test subject afterward. Some early kinks in the task flow were caught and ironed out, and overall feedback on the organizational structure was good.

Heat Map

Heat maps are a form of usability tests that visually aggregate where people are placing their clicks on a screen, which is helpful to learn how people interact with an interface, and especially helpful to learn how a user might go about completing a specific task.

Here, testers were asked where they might look for a specific item, in this case sliced whole wheat bread, in the organizational structure of this interface. I was pleased to find that upwards of 90% looked in the bakery category, and a few testers tried the search tool, which was also a valid option. A small percentage looked elsewhere, such as in the pantry category.

I concluded that even without the images added, the category titles were clear enough so that nearly all users are able to locate their search queries easily.

Affinity Map

An affinity map gathers gathers data collected during testing and groups the most common patterns in a given category, such as pain points and successes in the user experience of the app. This can inform updates on future iterations of the design.

One of the common pain points I found was that users were frequently unaware that the home page had additional categories listed “below the fold,” and did not always scroll down the page to find those categories. Later design iterations incorporated this feedback by having category images near the bottom of the fold visibly “cut-off” by the edge of the screen, making it apparent that more content is available below.

Design 2: Iteration & Visual

Wireframe Iterations

A new iteration of wireframe designs was created after usability testing, which adjusted some of the features and layouts to accommodate for pain points found during tests. Better navigation and more obvious category hierarchy was incorporated.

Screen Designs

With the UI layouts tested for optimal usability, final screen visuals were rendered in Sketch that included photo imagery, brand color palette, and final text copy rather than placeholder copy.

Design decisions were made that would inform the branding and asset creation in the app: icons, colors, and typography choices.

Branding & Asset Library

A guide to colors, icons, imagery, typography, etc.

From the final screen designs, an asset library and style guide was exported using the Zeplin resource generator. These assets and style specifications can be handed off to an engineering team for implementation in the build.