We wanted to create something to help encourage customers to buy from small independent businesses near the University of Washington. As some of our most beloved restaurants on the Ave are struggling due to the COVID-19 pandemic, we wanted to offer an incentive for customers to boost sales and hopefully keep these businesses afloat. Students are often low on spending money, so we love a good coupon. This app functions as advertising for the restaurants and as a fun restaurant exploration and cost-saving tool for students.
What it does
Users of our web-app can shop at participating restaurants and scan their receipts, earning them points. Restaurants that the user has not yet scanned a receipt from earn double points to incentivize buying from new places. These points can be redeemed at any of the participating restaurants for varying rewards. The app contains a map that will show users what restaurants around them are part of this rewards program, and displays the amount of points necessary to redeem a coupon. It also shows the history of what receipts have been scanned and how much money the user has saved by using these coupons. Other elements in the mock-up include a search bar to locate restaurants by name or type, a contact page to report issues, and about page.
How I built it
Our designer created a mock-up in Figma, while our front-end developer created the web-app using React and our back-end developer created a database using SQLite.
Challenges I ran into
We attempted to find a way to connect the front-end to a back-end server, but we did not have the time or experience necessary to do so. The design prototype connections got quite convoluted and were tricky to keep straight, especially with the map, but eventually we were able to sort this out well.
Accomplishments that I'm proud of
Coming up with a unique approach to this difficult problem presented by the pandemic. Creating a fairly robust, clickable mock-up in Figma and learning how to use components to create static elements on scrolling pages, such as a header and bottom bar. Embedding a Google maps component in React. Creating a database in SQLite in a short amount of time. Working together as a remote team and encouraging each other even when we ran into roadblocks.
What I learned
That a lot can be accomplished in 24 hours, but a lot cannot. Also, it is very useful to have past experience rather than learning as you go. That it can be a lot of fun to design a prototype from scratch, with less limitations than with a client or in a class. And that it is really helpful to look up UX prototyping tips to help accelerate the process.
What's next for Ave Rewards
Next, we would like to connect the front-end to the database through a back-end server. Ideally, we would like to code up all of the functions in the mock-up.