node app.js, Figma, Zeplin, Facebook API
Postered at final showcase
Purpose: This is my final project for COGS 120, Interaction Design
Team Formation: 3 product designers
Goal: Envision and create an app to help UCSD students make better choices while spending dining dollars
UCSD on-campus students are required to purchase Dining Dollars during fall quarter, or a specific amount of money which they can use in dining halls and markets throughout the whole year. However, managing Dining Dollars without running out too early or having too much at the end of the year is hard.
Our team helps you and your friends manage Dining Dollars more wisely by introducing our new app "Triton Feed", which is specifically made for UCSD students. Here you can access a detailed plan of how much dining dollars you should spend per quarter, per month, and per day. To make our app more personalized, you will receive notifications of meal notifications, such as free food events if you have too little Dining Dollars, or more expensive, fine food if you have too many Dining Dollars. By the end of the year, you will also get the chance to sell or purchase Dining Dollars from other users. We aim to help UCSD students spend all their Dining Dollars right as the academic year ends.
Final Project, "TritonFeed" Promoting slides
Every successful product starts with an attractive storyboard, and "TritonFeed" is not an exception! In the beginning, we brainstormed tons of possible features that could possibly help UCSD students spend their dining dollars wisely without spending too much or too little. We then narrowed down our options into three. Each of our group members chose a theme and sketched a scenario of UCSD students using "TritonFeed".
Three main functions we covered here are:
1. Buy/Sell - Connect students willing to buy dining dollars with peers willing to sell dining dollars.
2. Notification - Recommend food options by suggesting expensive food to students with a lot of dining dollars, and sending free food events notification to people with little dining dollars.
3. Budget Track - Provide detailed budget trackers for students, which indicates how much money they should spend every day/week/quarter.
2. Paper Prototypes
After sketching TritonFeed's three main functions, we started to scheme the basic app interface. We briefly sketched two of our functions as paper prototypes without considering the aesthetics. Our two choices are:
1. Buying & Selling Dining Dollars
2. Budget tracker and purchase history
We illustrate TritonFeed's interface based on the assumption that we could connect our app with UCSD's card office, which keeps the record of all student's purchasing history. It is also linked with every student's PID number.
Later on, we conducted 3 user interviews using " 10 Usability Heuristics for User Interface Design" as a standard, and gained some valuable feedback, such as no error prevention system, redundant steps, confusing instruction, etc.
3. Wire Framing
Our next step is to build digital prototypes, and I was mainly responsible for it. I chose Figma as my design tool because I am most familiar with it.
Since it is always annoying to think of money, I kept the interface as clean and readable as possible. I specifically chose blue and gold as the main colors, which are UCSD's theme colors. I also created a horizontal navigation bar at the bottom, so users don't have to constantly hit the "back" button in order to switch between functions. I couldn't indicate error prevention using visual representation right now, but our group agreed to add it when we actually started coding.
4. Front-end Programming
When everything was fixed in design, then came the tricky part, the actual coding. One of the biggest challenges between designers and engineers is that engineers fail to develop an app as designers envisioned, and unfortunately, we had the same issue. Since in the beginning, none of us are very skillful in front-end development (we are in the end!), every function we planned seemed to be very difficult to put into effect. It is also during this time that we realized we could not borrow data from the UCSD Card Office, which made our creative feature of logging in using UCSD PID and Password not a possibility at all.
However, we indeed made sure our app had error prevention, and we mainly focused on responsive design. In order to increase efficiency, we divided tasks into three, and all of us had different pages to work on. We kept out progress on a Tracker Spreadsheet, which was very helpful to keep everyone on the same page.
We interviewed three more users along the way, which indeed gave us warm praise and provided us valuable feedback to improve our app.
5. Final Product
After 10 weeks, we finally developed our first version of "Triton Feed" as best as we could. We spent half of the time researching on competitors, sketching and prototyping, and used the second half of the time programming and improving the functions. We constantly conducted user interviews to make sure our product is user-friendly. Specifically:
Final features for "TritonFeed"
1. Budget Tracker
2. Purchase History
3. Buy/Sell Function
4. Food/Event Notification
2. Facebook Login
The project was finished with a poster showcase session and a presentation.