InstaKart
Feb - Mar 2019
MakeHarvard 2019 | Top 5 Overall Hackathon Prize
MakeHarvard 2019 | Top 5 Overall Hackathon Prize
Impacting student lives through path-mapping grocery grocery shopping experiences.
THE TEAM
Vanessa Seto - Designer & Front-End Developer
Daniel Wang - Back-End Developer
|
Rahul Jain - Back-End Developer
Bader Taher - Hardware Developer
|
AWARDS & MEDIA
🏆 MakeHarvard 2019 - Top 5 Hack Overall & Fan Favourite Prize
InstaKart won the Top 5 Hack Overall at MakeHarvard 2019, out of over 90 teams. In addition, our team won the Infosys Fan Favourite Hackathon Prize, being the top student-nominated team. Our project is featured on Devpost as overall hackathon winners. Check it out here.
My beautiful team at MakeHarvard!
MY ROLE
My team of 4 for this project came together from different universities with one goal in mind: to create something super cool (and to win)! As the designer and front-end developer of the team, my role was to lead the research and prototyping process for our product. I introduced my design process and user-centered design principles to my team in order for us to be able to create the most impactful product. We decided to focus our product on students, as the hackathon was student-based.
Background
PROBLEM
We wanted to tackle the frustrations of inefficient grocery shopping, specifically for students. Students face a lot of time management challenges and often have little to no time left for grocery shopping on top of school, job searching, cooking, extra-curriculars, and staying social. With this, their efforts to commute to the grocery store and spend time wandering aisles looking for specific food items becomes a hassle.
OUTCOMES
Instakart re-invents the everyday grocery cart into an advanced tool for efficient navigation through grocery stores. Paired with the mobile app, Instakart displays a map of the most efficient path within the grocery store based on a list of inputted food items. Users can create a list of food items to be purchased from the store within the mobile application and connect their app to a grocery cart at the store.
THE PROCESS
From research, ideation, wire-framing, designing, to prototyping, here's the process I lead my team through.
Initial User Research
We wanted to understand more of the student grocery shopping experience. What do students currently use to keep track of grocery items? How much time does grocery shopping take? How do users find specific items in stores? Through user testing, performing secondary research, analyzing pain points, and developing personas, our team developed a greater understanding of our users.
Ideas + Stickies!
USER INTERVIEWS
The following are things said by real users conducted in user interviews:
- "Isles and signs are helpful for finding the general section where the item is"
- "No navigation when first entering a large grocery store"
- "Would be nice to have accessible and easy navigation directly from the entrance door"
USER PAIN POINTS
The following are key pain point insights from user interviews conducted:
- It's hard to find specific items in a grocery store - often when people enter a grocery store, they are looking for specific items. Aisle layouts can be complicated and there is little navigation directly from the entrance of a large grocery store, often causing confusion.
- Grocery shopping takes such a long time and is inefficient - for people who want to quickly get their items and go, grocery shopping can be tedious. The entire process could be made more efficient with easier navigation and less wandering aimlessly
- People lose track of shopping lists - making shopping lists on a napkin isn't the best way to keep track of items. Even once people get to the grocery store, its tedious to keep checking their list on their phone or paper to ensure that they're still on track.
PERSONA
Ideation
After conducting interviews, my team assembled all of our findings together, and we realized the importance of efficiency when students have specific items they want to pick up at the store, and they are unsure of where these items are. We then narrowed our focus to solutions that involve digital aspects, as well as navigational aspects.
Ideating and assembling our prototype
DESIGN CHALLENGE
Analyzing the overall grocery shopping experience and the student life, it made us question:
Vertical Divider
|
Are groceries a pain point for students? How might we design a solution
for students to shop for groceries more efficiently?
|
USER FLOW
In order to create an efficient grocery shopping experience, the team came up with a technology stack. The following process occurs to generate the overall seamless experience from start to finish.
ANDROID DEVELOPMENT
We wanted to keep the application simple and for the branding to give off a user-friendly feeling. With these factors in mind, incorporating the cool blue colour and a simple list creation screen, this allows the users to feel at ease. Using the Android Studio Emulator, my team found it easy to prototype and test out the app for other components of the project, such as the Raspberry Pi QR code scanning.
Coming up with a seamless user flow
CREATING A GRID IN LAYOUT EDITOR
On top of my design role in this team, I worked on most of the front-end as well. I created constraints within the mobile application which are important for building flexible and efficient layouts. I accomplished this for each element on every screen relative to the borders of the phone, creating a consistent visual design of the app.
Android Studio Front-End Development
BACK-END
My teammates on the back-end created the heart of the path-mapping algorithm. Here's how it essentially goes: The Raspberry Pi library interfaces with the hardware and image processing + pathing calculations, which is entirely done by a python backend. The data is pushed directly to a web server through SFTP to show to users. To calculating the most efficient path, a greedy approach to the travelling salesman problem was used. From the algorithm, arrows are generated in a map.jpg file to be displayed in the front-end.
DISPLAY SCREEN (FRONT-END)
A simple Apache Web Server hosts the web UI powered by HTML, CSS, JavaScript. This front-end is designed specifically for the Raspberry Pi Display mounted directly on the grocery cart. This screen features the shopping list the user enters and the generated optimal store map.
PHYSICAL PROTOTYPING
In addition to creating the digital application, the other part of our solution involves incorporating the technology with a physical grocery cart prototype. In order to allow users to interact with the prototype and to gain an understanding how the screen would interact with the grocery cart, we built a low-fidelity prototype of the cart itself with the digital screen attached on top.
Outcome
Our solution is a path mapping grocery cart along with a mobile grocery application. The user enters a list of food items to be purchased from the store and the grocery cart will display a map of the list items to be picked up in the most efficient manner.
INSTAKART MOBILE APP
In addition, I designed and created a mobile application using Android Studio. This app generates a QR code for every unique shopping list created, which is then scanned by the Raspberry Pi Camera on the grocery cart. This creates an intuitive mobile user interface for users to keep track of grocery list items.
Feedback
It was interesting to see what feedback we received from judges, fellow hackathon competitors and students. Having worked with an amazing group of peers, we came up with some future thoughts to carry with us after the hackathon.
USER TESTING
Based on the high-fidelity prototype we created, some feedback that we obtained from users include:
- "The path-mapping algorithm is very resourceful and will appeal to shoppers in a rush"
- "Saves time, money, stress and effort while grocery shopping"
- "Increases efficiency and the tendency to wander through aisles aimlessly"
FUTURE THOUGHTS
Some future considerations for this project include:
- Ability to calculate the estimated total time for the user's shopping trip based on grocery list and store
- Develop the InstaKart mobile app for iOS devices
- Look into other methods for shopping list transfer from mobile (other than QR Code generation)
- Ability to take a picture of a product, and add it to your shopping list (photo-to-text)
Conclusion
At the hackathon, we made a small promotional video to explain the product and walk through the process. Feel free to watch the video or learn more about our project and hackathon submission on our Devpost Page. Thanks for reading!