Survey

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.

GOAL COMPARISON

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.

TASK FLOW Diagram

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.

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.

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.