Good Market App
2020
DesignLab
In order to get more critical feedback on my design process, I enrolled in a short mentorship and instructional program through DesignLab. I was tasked with designing an online shopping product for a fictitious medium-scale grocery franchise based in the United States that had been struggling with a declining market share despite consistent satisfaction ratings. Market researched showed that it was likely due to a rise in popularity of online grocery shopping as customers felt it was more convenient, faster, and easier than traditional in-person shopping.
The persona for Good Market's target demographic was a "busy professional" between the ages of 25-35 with limited time and disposable income. Based on the findings in the preliminary research, I identified the top goals and pain points for both the company and the desired shoppers.
For the first phase of research, I looked at similar services in the target market and picked three to examine for what they did well and what I found to be confusing or awkward while using their product. Between Safeway, Instacart, and Schwan's, the largest difference was how they categorized the grocery items available and how one navigated within them. All had a similar hierarchy of information for each product, with name, price, and amount being the most important.
Since the categorization of goods varied widely in the competitive research, I wanted to get a better idea of how different people would organize and label the content. I chose to run a card sorting exercise with five participants in the target age group of 25-35 to build a first draft of the information architecture of the product pages.
I let the participants group and label the categories themselves so I could lessen the impact of my own bias on the test. The results were a little surprising and helped me get a better idea of what types of categories would be helpful and how they could be structured.
Using the results of the card sorting exercise and research, I broke the list of products up into categories. A single product could exist in as many categories as made sense to allow people with differing mental models to find what they were looking for quickly and easily. The typical large departments would be present towards the top—produce, meat, dairy and eggs—with other categories breaking things down by meal, culture, storage type, etc.
Before starting to sketch some potential solutions, I created requirements for the primary user tasks in an online shopping experience. Finding items, adding them to a cart, and purchasing are the bare minimum this product would need in order to fulfill both user needs and business needs.
Individual product pages that allow users to add desired items to cart.
Product detail page, category page.
Product pages will have the ability to increase/decrease quantity, add item to cart, remove/modify if already in cart. Category pages will have quick add functionality for users that are comfortable making decisions without seeing the full product page. Additionally, past orders can be immediately added to cart by selecting the reorder action from the past orders screen.
Product pages will contain an image or multiple images, price, weight, product details, nutritional information, potential allergens, and taxonomy breadcrumbs. Functionalities include modifying quantity via input, adding item to cart, and favoriting the item.
Category pages will have tabs of sub-categories (for example, Dairy page will have milk, cream, cheese, yogurt, etc.) which will contain tiles of product images/names. Breadcrumb navigation will be visible at all times to allow users to quickly swap between categories/subcategories. Functionalities include pressing a product image to navigate to that detail page and quick adding items to cart.
Nailing down the progression through tasks gave me an idea of what content, individual screens, and navigation would be required so that I could begin sketching out some rough wireframes. After many iterations I began to find a layout that gave me the visual hierarchy of content and functions that I was aiming for.
Before starting the first round of testing with a printed wireframe prototype, I laid out the most important task flows on top of the pages to make sure there were no gaps in the flow and that the visual hierarchy aligned with what the likely action on that page would be. This would also serve as a reference later while building a fully interactive prototype.
I had to complete this project within four weeks under the direction of a mentor, but there's several things I wish I had done differently and plan to revisit or expand on if I return to this project in the future. I would include people outside of the narrow target demographic in research and testing to be sure they have a quality experience as well. Most importantly, I would do more testing with people with a wide range of disabilities. Many physical disabilities can make shopping at a brick and mortar store difficult, so a delivery service like this could be beneficial. Once I addressed the gaps in the research and testing, I'd build an atomic visual design system and do several more rounds of testing with the more polished prototype.
