APP DEVELOPMENT

Triton feed

ROLE

User Experience

Front-End Designer

Story Telling

DURATION

2019.1-2019.3

3 months

TECHNOLOGY

HTML/CSS/Javascript,

node app.js, Figma, Zeplin, Facebook API

ACHIEVEMENT

Postered at final showcase

Overview

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

Intuition

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.

Solution

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

Early Stages

1. Storyboard

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. 

 

1

2

Mid-Stage

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.

Later Stage

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 

Development Tools 

1. JSON 

2. Facebook Login 

3. jQuery

4. HTML/CSS/Javascript 

The project was finished with a poster showcase session and a presentation. 

Major Roles

1. Use Figma to sketch the app interface

2. Incorporate HTML/CSS/JAVASCRIPT/jQuery to program the visual prototypes

3. Design User Interview Questions, conduct user tests with 6 UCSD's students who have used dining dollars before. 

4. Keep track of the app development process and indicate it in the Development Plan

5. Finish a 1-minute promoting video about our final product using video editor

 

Takeaways

1. Good leadership is always the key to success. Every team member has distinctive skill sets and passions, so it is wise to assign different tasks to different people, and foster communication during the process.

2. Documenting progress and task is really handy. It keeps reminding me of what I am supposed to contribute to the app every week.

3. It's better to worry less about the functionality of our app at the beginning, but focus more on generating broad and creative ideas.

4. Gain more experience in front-end development and data analyzation. 

Team picture with our poster

Thanks for visiting! 

Contact: 

Email: yug068@ucsd.edu

Location: 

La Jolla CA, 92092

outline_email_white_18dp.png

© 2019 by Shirley Guo, Last update: 10/08/2019