ZIWEN
Summary
Flyerfighter is a website that helps UCSD students to receive relevant information from student organizations they might be interested in. Currently, traditional ways of passing information is a poor waste of time, money, labor and large amount of paper. By using FlyerFigher, studnent organizations’ voice could be heard by the right people through an organized and efficient way. We aim to go Paperless! Website: https://flyerfighter.ucsdtriplec.org/
Student can signup with email and to prevent security problems, our system only allows student organizations to sign up account if they officially registered on UCSD student organization website.
Disclosure: All current images and texts are placeholders. The implementation is still in progress, about 80% finished.
CATEGORY: Frontend Development, UIUX Design
TOOL: Sketch, Figma, Html, Css, Javascript, Node.js, jQuery
ROLE: As a UIUX designer and Frontend Developer in FlyerFighter team, I worked with four software engineers and two designers. I scaffold the overall the design and user flow of the website, created the color scheme and style book. I’m also in charge of the design for main page, contact, setting pages.
Design Ideas
Browsing Posters
-
Quick skim posters by event cards
-
Hover over for detailed information
-
Both vertical and horizontal layout cards for staggered visual layout
-
Sort and filter function
-
Mark heart for “liked” events
Event Detail
-
Complete event detail and organizer’s information
-
Recommend similar event
-
Comment discussion
Organizations
-
Find the information of student organization by categories
-
Explore all the events hold by each student organization
Student Profile
-
View all liked events
-
Edit your event preference for recommendation
Design Prospects in the future
1. Adjust create an event page
Currently, student organizations are required to upload images of their poster when creating new events. In the future, we want to help generate the poster by some algorithms embedded in our system.
2. Adjust log in page
Now students log in by using the email address and password. We hope to implement some creative ways of login. For example, login by selecting the answer to a question like: “what do you usually order at McDonald's?” Dropdown options are: Cheeseburger, Chicken Nuggets, and ice cream. Another example could be to enter your date of birth.
3. Adjust home page
Inspired by Handshake, we designed two more sections for the homepage: “Events you’ve favorited” and “Events we recommend for you”. A simple illustration below:
