Product Design, UI/UX Design, iOS Development
In collaboration with Matthew Lin, Phillip Chao, and Frank Chen
Winter 2017
UCLA Hack on the Hill 2, First Place

All the UCLA events in one app. Eve parses Facebook events, UCLA Engineering pages, UCLA Career Center, and UCLA Happenings page. The app integrates all the events you have subscribed and syncs with Facebook events rsvp status, and the events you are interested in.

Facebook was not originally created for events. As college students, our lives are centered around the clubs and activities around the campus or the city we live in. While Facebook can be extremely useful in connecting with friends, it is difficult for us to discover the events that are really relevant to us. Newsfeed contains a vast degree of information of our friends, photos, videos, news, stories, articles, advertisements. There are too much noise we have to filter through when all we want is to follow and discover events we want to see. Is there a better way to explore local events without the hassle of scrolling aimlessly on Facebook while not missing any important ones?

Research I
There're currently 1000+ clubs at UCLA. The School of Engineering alone has around 47 clubs registered under the department. Student organizations are an important aspect of on campus student life. Out of the people we interviewed at the Engineering school, everyone uses Facebook Events to discover events at least 4 times per quarter. People on average are involved with 2 clubs on campus. Students discover events either through the organizations they followed on Facebook, or from sharing of their friends' Newsfeed.

Research II
We then did a search on Facebook to see how many of the 47 clubs host events regularly on Facebook using Facebook's Graph API. It turns out that all 47/47 students clubs keep their social media presence on Facebook, either using Facebook Public Pages or Groups. The adoption rate of Facebook Event in this case is 100%!

Iterations I
The App started off with the name EventBox. I first brainstormed what tools I need to learn and what basic features the app has to be born with using sticker notes. Without extensive knowledge of UI/UX design and iOS development, I started to pick up the skills of design and assemble my team. The basic user flow was then drawn in wireframes and prototyped on sketch; I designed a simple user flow and interaction by mirroring the Sketch file on my iPhone.

Iterations II
Until now, all the design and wireframes still stayed on paper. I kept working on the App design while started to talk to my friends and people who had iOS experience to help me implement the product. Thanks to Umar and Matthew. We were able to form a team for the UCLA Hack on the Hill II, where we finally had a chance to prototype the iOS client of the product, while I knocked down some final visual details and user flows of the product.

The following App interactions were made using Framer.js, in order to better communicate ideas with my teammates. The Hackathon submission can be found on DevPost

Iterations III
After we validated our product idea at the Hackathon, we started to dive into the engineering part with the foundation of what we built at the Hackathon. At this time, Matthew was working on the web scrapping side, while I began to improve my iOS development skills since Umar dropped out midway. The whole App architecture was built upon UICollectionView, UITableView and CoreData, without using any existing frameworks. The App data model can be seen in a visualization here, where event data are parented to users and event details are parented to an event instance.

The XCode front-end storyboard can be found below, including a whole on-boarding experience and user authentication.

On-boarding Experience
One of the biggest updates of the new version of Eve is the on-boarding experience. Now looking back, we might not employ the best user experience, since we had a combination of "self-select" and "top user benefits" for new users. The "self-select" feature allows users to customize their App experience based on the Facebook Pages/Groups they want to receive events from. The "top user benefits" screens give users a snapshot of basic App navigation and features.

Final Results
Before the App Store submission and reviews, we made a final modification of some visual details. The App name was changed to a shorter and more playful name, Eve, for events. And the primary color of the App was changed to a bluish purple gradient. The new App icon got rid of a lot the literal details of the first version and definitely worked better in cross-platform environments. Below is the final demo of the latest version of the Eve, beginning as a new user account.

Future Updates
This App is not a finished product by any means. Our team came up with multiple ideas of improvement but didn't have time to implement all of them before graduation. One of the most requested features is the new Explore page, where users can enjoy a geo-based fashion to explore the events around the city. The challenge has always been how to keep a balance of diversity while keep the degree of relevance for events recommended. Therefore, we employed a crowdsourced way to add hotspots to the map so that people will benefit from each other's explorations.

App Store
126 app downloads since launch
5 star rating / 15 reviews

App Store
Demo on Vimeo

Find me on