portfolioCovers3.jpg

App Design, Group Project

Role

Group Lead

UI/UX Designer

Timeline

April 2020 - June 2020

Software

Adobe InDesign

Axure RP

COVIDcart

COVIDcart.png
 

What is this project?

Due to the novel COVID-19 pandemic, grocery shopping has become stressful and time-consuming. Although this experience is difficult for everyone, elderly people and individuals with underlying health conditions specifically, may not be able to get the resources they need to sustain themselves through this pandemic.

As a solution to this issue of accessibility and independence, our team proposed a mobile application that allows affected individuals to order items from a variety of grocery stores, to be delivered to people's homes. COVIDcart is a shopping app designed to facilitate the order and delivery of various grocery store products, whether it is directly to customers’ doorsteps or for pick-up in-store. This app is designed for individuals who are unable to shop at an in-person grocery store during the COVID-19 pandemic. The app’s simple design and easy-to-navigate features provide accessibility to older populations (45+) who may typically struggle with the learning curve of mobile devices.

portfolioCovers3.jpg

Overview

Home

Start off the app's navigation with sign-in or single-use account options. The app also offers accounts via social media.

covid_final1.png
covid_final5.png
covid_final2.png

Category-based interface

Users can order their groceries by searching through various categories like special offers, store-based items, or types of items.

covid_final6.png

Search and Filter Options

Users can search for items using the separate search page which also has options to filter and sort according to the shopper's preferences. The user can use tags like "vegan" or "gluten-free" to filter out results.

covid_final3.png

Easy Ordering

The app includes a straightforward interface to help older populations effectively order groceries. The icons and layouts are larger than usual to cater to people with weaker eyesight and visual impairment.

covid_final4.png
covid_final8.png

Quick help

The app offers access to immediate help and resources via the FAQ page. It includes solutions to questions and concerns shoppers may have throughout their app experience.

covid_final7.png
portfolioCovers3.jpg

User Research

Goals

What we hope to gain from this process

1

2

3

Test our product concept with a specific user audience
Since our app targets a unique audience, we wanted to gain insight into the challenges faced by this specific age range and how we can help alleviate the stress caused by these challenges.
 

Reveal necessary functions and experiences to be incorporated
Using this research, we hope to find any holes in our thinking and better develop our concept to fit a universal need. We also wanted to make sure we create a product that caters to an older audience in terms of technological comfort and convenience.
 

Identify specific problems to target for the development of the app
Other than the issues we considered, we hope to reveal any important factors that we could not identify, and consider incorporating solutions to these issues.

Personas

How, where, why would users use my product?

This product is geared towards people who are unable to or require assistance for grocery shopping, specifically adults over 45 years old. Another target audience is individuals with pre-existing medical conditions like asthma, diabetes, heart disease, etc., to help them through this pandemic without putting stress on their health. This group of individuals includes a wide range of age groups and individuals may be of varying cultural backgrounds.

Though this product is intended to prioritize and help individuals who may have a higher risk of being affected by COVID-19, this service can be used by a variety of audiences. Reducing the number of people making physical trips to supermarkets can slow the spread of COVID-19 and keep people healthier.

covid_persona1.png
covid_persona2.png
covid_persona4.png
covid_persona3.png

SWOT Analysis

Existing products comparisons

  • Several mobile applications, with a similar premise, exist for free download on iOS devices, such as InstaCart and InstaShop.

  • Popular chains such as Walmart, Target, Safeway, Pavilions, and Publix also offer “curbside pick-up” for their customers via mobile application.
     

While these applications have undoubtedly provided benefits for their users,
common issues with these apps include:

  • Lost items

  • Mis-deliveries

  • High demands causing massive delays in customer service

 

Technical issues like

  • Glitches

  • Issues with payment

  • Items quickly going out of stock

  • Lack of communication between customer and delivery driver.

 

Mobile applications also pose difficulty, confusion, and frustration within the senior citizens age group or with people who are unfamiliar with navigating a mobile device.

Technical Requirements

Product specifications

This product is designed to run on a mobile device, particularly one with iOS capabilities. Accessibility restrictions to create media and functionality for older age groups and individuals with disabilities include.

  • Visual impairment including color blindness

  • Larger buttons and functions to ensure smooth use

  • Straightforward interface for functions and menus

  • Sufficiently large text with contrasting colors

Storyboarding

How, where, why would users use my product?

icon1.png

Person 1

Current Situation

  • An elderly citizen with underlying health issues making her at-risk for severe COVID-19 infection

  • Does not have accessible, private transportation to local supermarkets

  • She does not have a caretaker who can grocery shop on her behalf

  • Even if the risk of infection was nonexistent, traveling to the market would be difficult due to old age.

How would they use my app?

  • Help her grocery shop online and have the items delivered directly to her home

  • The delivery driver would leave the items on her doorstep for her to retrieve 

  • Moreover, once the quarantine is lifted, she can still use the app to order groceries at her convenience 

icon2.png

Person 2

Current Situation

  • A 45 year old, working individual

  • Struggling with financial issues due to the COVID-19 pandemic

  • His business, a clothing store, had to be closed down, since it was not considered an essential business

  • Regardless of his savings, not earning is causing an extra burden on his finances

  • To save in every way possible, he tries to look for affordable food and resources but is unable to find cheaper options due to constant out-of-stock items

  • Sustaining himself and his family by resorting to expensive options is not feasible and is concerning for the long term.

How would they use my app?

  • Using COVIDcart, he will be able look for affordable options through a range of different supermarkets and local stores 

  • Alleviate the stress on his finances

  • He will also be able to keep himself and his family safe by ordering the items to be delivered to his doorstep. This also saves money on gas

  • This app can be a resource keeping his family safe, sustained throughout the pandemic and after.

User Survey

Collecting statistical data

Through this survey, we hoped to gain specific insight on user behavior towards grocery shopping during the pandemic. For this, we formulated a set of specific questions based on age, location, difficulties with transportation, etc. to understand our users’ concerns and effectively address them in our product. The following are some of our results:

stats1
stats2
stats3
stats4
portfolioCovers3.jpg

Wireframes & User Flows

Site Map & User Flows

Creating a map of my app's navigation

covid_sitemap.png
covid_taskflow2.jpg
covid_taskflow1.jpg
covid_taskflow5.jpg
covid_taskflow5.jpg
covid_taskflow6.jpg

Wireframes

Creating a basic idea of the layout of my app

start.png
itemspage.png
categories.png
faq.png
cart.png
profile.png

Color scheme

An initial palette of colors for the design

We used a color palette which had bright, bold colors so people with visual impairments would be able to distinguish elements of the interface without strain.

covid_colorPalette.png
portfolioCovers3.jpg

User Testing

Overall Design and Functionality

Goals for testing

1

2

3

Test the product concept and prototype with specific tasks given to users.

Figure out the gaps in functionality causing confusion and frustration.

Identify additions that the users would like to see in the app interface or concept.

First Prototype

Specific changes

covid_final7.png
covid_final9.png

Isn't distinguishable as a button, seems 2D

Buttons are inaccessible with a large, scrolling list

Menu is not as visible as the bottom function bar

Text colors and sizes are slightly hard to see

covid_final4.png
covid_final10.png

Buttons are too small for large fingers

"Continue" button is not bold enough

Testing Summary

Testing Scenarios

Users will begin off at the start screen and home page and make their way through the app, trying to fulfill their tasks. They will have to use various buttons and navigation to be able to complete the given task.

Tasks

1

2

3

4

5

6

7

Browse products to find a new brand of dish soap.

Order 3 Deli items, pickup in store

Make a list and check off a list item

Get gluten-free flour delivered

Learn how to use the app through FAQs

Make an account and edit your delivery address

Re-order items from your order history.

Participant Profiles

Testing the product with a varying participant profiles

covid_participants.png

Some Testing Results:

Task 1:​ Browse products to find a new brand of dish soap.

User 1:

Started at:​ Start
Process: ​Browse as guest > Enter address > ​“See More” Nearby Stores​ > Search Bar > Searched for “dish soap” > Added to cart > Checkout process > Confirm Order
Ended at:​ Order Confirmation Page
Difficulties:​ Search bar too small for her to see what she was typing, difficulties finding the Submit/Enter button on search bar; confusion when clicking on Nearby Stores page because the links weren’t active yet
Suggestions: ​N/A

Task 3:​ Make a list and check off a list item

User 2:

Started at:​ Start
Process:​ Home > categories > *confused* list button > added items one by one > checked off Ended at: ​List page
Difficulties: ​Couldn't find the list page
Suggestions: ​The text boxes should be empty when typing

Iterating the design with feedback

User testing provided valuable feedback regarding COVIDcart’s navigation, functionality, and design. It also allowed us to predict how future users might interact with the mobile app.
 

During testing, our participants generally experienced difficulty with navigating the interface. When told to search for a particular page, the many options on both the home screen, footer toolbar, and hamburger menu would confuse older audiences. Certain buttons were also “too small” for older individuals to see without strain, including the search bar and the checkout buttons. Form boxes were filled with default text and it was a nuisance for users to delete this text before typing their own responses. A few links were also broken or led to the wrong page.
 

To improve our app, we repaired any broken links and interactions. The revised interface will also feature a more prominent “Pick up in store” button. Form buttons and boxes will now display as blank until a user types their responses into the given space; this improvement is specifically noted in the Shopping List page, the Edit Profile feature, and the general checkout process. However, because COVIDcart offers such a diverse range of features, it would be difficult to make buttons any larger without compromising the overall design of the interface. Thus, aside from any minor edits, the navigational features will remain primarily the same. Aside from the initial learning curve, the app remains primarily accessible to those who are willing to explore the interface.

portfolioCovers3.jpg

Final Design

Hi-fi Mockups

covid_mockups.png

Final Design

covid_final1.png
covid_final3.png
covid_final2.png
covid_final5.png
covid_final8.png
portfolioCovers3.jpg

Final Thoughts

Challenges

  • Thinking about elements that would be difficult for elderly people was one of the most vexing tasks.

  • We started off making an interface that was so boxy and plain that the app seemed almost unappealing. Once we had the overall navigation down, we focused on making the app accessible but aesthetically appealing.

  • Even though we used universal icons and elements used on a variety of platforms, some elements were still indistinguishable for our testing participants. We changed these icons early on after receiving initial feedback from our users.

Future Steps

  • A design is never perfect so keep iterating and learning!

  • I hope to develop this design concept into a real application to be used in the online shopping industry.