Back to Portfolio

WeEat

Design
Development
University
Description

During my time at The University of Chicago, I worked on a bulk food-delivery mobile app called WeEat. The idea rose out of the Technology division of the registered student organization (RSO) The International Leadership Council. A few of the app's founding members had collaborated with me before on school projects and hackathons, so they knew about my love for design. They pulled me into the project as a core designer and one of the frontend developers.

WeEat's goal was to help UChicago students save money on food deliveries from local and remote restaurants through bulk ordering. After reaching out to and partnering with these restaurants, we'd feature their menus on the WeEat mobile app. Every day, we'd feature a different set of restaurants and their respective menus and order deadlines. Students would be able to order from a restaurant before its specific deadline.

Each restaurant would be associated with a pickup location on campus where it could distribute orders and collect payments, and students could see this location while ordering. So if a student was in a specific part of campus, they may want to order from a restaurant that would have a pickup location close to them.

Challenges

  • Incorporating secure payment processing (Stripe) into the app

After a few of my teammates spoke to restaurants and asked for their feedback, we realized most of them wanted to receive payments before preparing the orders. This meant that the app would need to support secure payments.

At the time, none of us had much experience with secure payment processing, so it was something that we needed to research and integrate.

Highlights

  • We submitted WeEat to the 2016 Microsoft Imagine Cup Challenge and made it to the Semi-Finals!

  • This project was my first exposure to React and React Native

  • This project inspired me to learn more about design, so I finally took the time to read a book that had been on my to-read list for a while — "Design For Hackers: Reverse Engineering Beauty" by David Kadavy. Funnily enough, while reading this book, I learned that the red invokes hunger, which is why most apps related to food use red! If we had continued the project, I probably would have refactored the design + color scheme to use red.

Team

Organization: UChicago International Leadership Council — Technology

Members: Kevin Zen, Daniel Ni, Wilson Wang, Malika Aubakirova, Renee Cai, and Pascal So

UChicago had a number of RSOs (registered student organizations), which are essentially clubs. After my friends pulled me into working on WeEat, I joined the Technology division of the International Leadership Council RSO and worked with several of the other members (listed above).

Role
  • Core designer for mobile app and marketing website

  • Frontend developer (React Native) for mobile app

When I first began working on WeEat, I was the core designer for the mobile app. I initially spent most of my time devising a color scheme and working through various logo designs.

During that time, I referenced one of my favorite articles on color theory — a piece from Smashing Magazine. At the time, I knew other food delivery apps employed a red color scheme, so I wanted to differentiate our app by using another color as our primary color. After re-reading the Smashing Magazine article many times, I settled on blue because it is traditionally associated with a sense of trust and reliability.

Once I figured out the color scheme, I started working on the logo by drawing out various sketches by hand. Because the app's name indicates that the app is food related, I thought I could be more flexible with the logo. I wanted the design to be fun/creative since our audience was college students.

I came up with 3 sets of logos:

  1. Community: The first set highlighted sense of community by focusing on the "We" part of "WeEat."

  2. Symbols: The second set featured various symbols such as birds, clouds, maps, and take-out boxes. I thought birds would represent a quick delivery, clouds would represent the technology behind the service, maps would represent how the app would connect people, and a take-out box would represent the easiness of ordering.

  3. Lettering & Fonts: The last set of logos were a creative exercise — basically just me messing around with lettering and fonts.

I asked my teammates to vote on the 22 designs I created. Most of my members liked #15, the bird created out of the take-out box. One of the other members really liked #22, so I decided to mix #15 and #22 together in a vector version of the logo created using Adobe Illustrator.

As I became more involved in the project, another member and I suggested we create a marketing website for the app. This led me to develop a few mockups for the marketing website, although we never got around to developing the site since we were still building out the mobile app.

Once I finished my design work, I finally got to do some hands-on development work on the app! I created the log-in and user profile pages from scratch and worked on storing information locally to the user's phone.

Technologies
  • Adobe Photoshop — for mobile app and website mockups.

  • Adobe Illustrator — for logo designs.

  • React Native — for building a native mobile app. Working with React Native would make it easier to build for both iOS and Android.

  • Expo — for building and deploying the React Native app.

  • Microsoft Azure — for our backend.