Video Demo

View our web application demo here!

Slide Deck

See Stock'd Slide Deck!

Inspiration

When one of the team members needed to purchase toilet paper, she went to three different stores to no avail. At one Costco store, signs were posted near the entrance of popular items that were in stock or sold out. Not only is this situation frustrating, but it also puts people at risk of contracting the virus, through unnecessary store visits and increased person-to-person contact. What if there was a way to know this information before making the trip to the store?

With shortages of essential items such as rice, toilet paper, and sanitizers during the COVID-19 pandemic, we wanted to develop a crowdsourced platform for people to view the stock supply at local stores, so they are able to make better informed decisions when leaving their house to buy supplies.

About Stock’d

Stock’d is a website that allows users to search for products such as food items, supplies, and tools, to see whether those items are available at their local department or grocery stores. Users can indicate whether an item is still in stock or not.

When users search for an item, listings of where those items are located are generated. When users select a store listing, they are able to see the store’s details, the items that the store has and whether those items are in stock, low stock, or sold out. Users are able to bookmark stores and leave comments on their page. When users leave comments, they are also able to add a status update on the item’s inventory.

User Research

To get a better understanding of people’s grocery shopping habits during this time, we distributed an online survey to friends, family, and people on various public platforms as well as conducted interviews. Through our efforts, we notably collected 126 survey responses and interviewed 6 people!

Overall, 90.3% of respondents were under a shelter-in-place order and/or lockdown and a majority (57) were from California. We also got responses from people of all ages ranging from 18 to 65+. This aspect was very important to us considering the nature of COVID-19 and its impact on everybody in our community.

We made sure to ask questions that were probing and unbiased, allowing our potential users to ultimately tell us a story, informing us of their goals, motivations, frustrations, and needs. Examples of these questions include having interviewees describe their most recent shopping experience and choosing their top 3 priorities/criteria for different shopping scenarios.

Through asking these questions, we gained great insight that ultimately influenced our design. For instance, we noticed that people tended to shop early in the mornings to avoid store crowds, and so we included each store's hours of operation. 83.9% of respondents cared about the distance of the store from their homes leading us to implement a geolocator. 62.7% of respondents indicated that store cleanliness and reputation were very important to them, so we made sure to display a 5-star rating system. We included a tag for items that were selling fast because 28.1% of respondents indicated that the popularity of the item influences their decision to shop.

We also found that people's top priorities when selecting items at the store (brand, quality, and price) became less of a priority. Instead, people were more concerned about availability. Because of this, we decided to have our platform focus on item inventory statuses rather than brand, quality, or price. Lastly, some of our interviewees stated that they rely on friends to update them about the status of items when they shop as a solution to not knowing. Therefore, we implemented a feature where fellow shoppers can post comments and pictures regarding item status.

How We Built It

The application is built using C# and .NET Core frameworks, HTML, CSS, Javascript, and jQuery. The prototype was created with Figma and the logo was designed using Adobe Illustrator.

The team began by brainstorming various features that the application should have while using user research to validate/expand on our ideation process.

In order to actually build the product, we worked individually as well as collaborated regularly via Slack for messaging, used Discord and Zoom for audio and video conferencing, Github for organizing and compiling all the code, and stored our files on Google Drive.

Challenges

We acknowledge that time-sensitive, crowd-sourced data may be inaccurate. A shopper may find an item is sold out at a particular store, even though the site indicated that it was in stock a few hours ago. Stock’d can’t promise to deliver definitive real-time information, but it does give people a little more information before heading outside the home for a supply run.

Figuring out the most optimal interface for our idea and getting our site to look exactly how the prototype was designed. There are a few discrepancies between the prototype and our site due to some limitations we encountered.

With C# .Net Core, we applied MVC design patterns into our application. By doing so, at times there were issues trying to find out how to get certain information to its corresponding place. For example, certain information in the views needed to be sent to a controller through an ajax request, whereas other information was sent through the use of forms. In addition, connecting to an SQL server served us some difficulty, as the database could not be used by other people running the application.

Accomplishments

Being able to integrate UX Research into the project and collecting a large number of survey responses. It’s nice to know that our project incorporates some aspects of the “Design Thinking” process, which models how apps/websites are ideally created in the real world.

In terms of application integration, we were able to get the majority of our main features implemented. Through the Google Maps API, the user is able to connect to the app using their current location. Upon clicking search and being redirected to the results page, the user is able to see all location grocery stores in their area within a 500m radius. The user is then able to click on a store and see the store information, status of items reported, and all comments reported under that store.

Finally, only two of the teams members knew each other prior to the project. Working remotely with initial strangers may have posed challenges. However, this collaboration gave us the opportunity to work with motivated people from different backgrounds, pushing us to explore out of our comfort zones, understanding each role’s responsibility, and achieving goals as a team.

What We Learned

Through research we were able to see how people’s shopping habits changed because of COVID-19. It is interesting to learn how situations like this influence our decision-making process. We also learned the importance of collaboration between developers and designers. While working on the project, we tried our best to maintain constant communication on both sides so that we were on the same page. Developers learned how to implement a project using designed prototypes, as well as learned and improved programming skills with the languages used.

Next Steps for Stock'd

One of the next steps for Stock'd includes finding ways to verify whether items are actually in stock. One way to address the limitations of the application described above is to incorporate non-crowd-sourced data. For example, perhaps exploring store APIs or Instacart API. In addition to this finding ways to verify that items are in stock, we hope to implement user enabled notifications to notify when items are back in stock.

Some other features our team have planned for future implementation including:

  • Sign In/Account Creation feature
  • Connection to a non-local SQL/Cloud database
  • Ability to search nearby stores by city or address
  • Adding distance from user location
Share this project:

Updates