Poster Project Syracuse

Web Prototype & UI/UX Design (Full Case Study)
Aug - Oct, 2021
• UI/UX Design • Web Design, App Design • User Research • Illustration Design
project medium
Adobe XD, Adobe Ilustrator

For a class project, I redesigned Syracuse Poster Project’s website to suit the center’s and users’(visitor, donators, artists, and supporters) needs. I conducted user research to uncover what features would be most beneficial to them. According to users’ general consensus, I designed a easily scannable homepage, trustable donation page, combined-shop-and-gallery page, and a mobile version of the site.




"Why would I still have to wait for a week
after I schedule the appointment?
Even booking In-office session is faster..."
"How about start your session in 5 minutes under a global network of therapists?"

Final Game

In the game, you’re trapped in a cursed casino, and a winning hand is your key out. The casino will try to keep you there as long as they can collect the right cards to escape as soon as possible.
Collect cards and avoid dying to enemies before the time is up! In order to win, you have to collect a certain combination of cards to win- either 5 of the same suit, 13 of the same color, or all 26 cards.

Key Game Mechanics
•Collecting cards while avoiding enemies.
• Ways to win: Get 5 cards in one suite (hearts, spades, clover, diamond) / Get 13 cards in one color (red or black) / Get 26 total cards.

Final Project: Interactive Poster(Click to interact with)

This is an interactive campaign for Layers of Fear, which can be used on web and mobile for any campaign purposes.
Goals: Incorporating interactive elements in a campaign poster to increase the engagement in an advertisement. Moreover, interactive traits matches the personality of a game, especially for Layers of Fear, a playful horror game that targets audience 8+.

Anatomy Study

In the game, players explore the fantasy world of a depressed female protagonist’s mind. To win the game, the protagonist needs to fight against monsters to beat her depression. The key feature of the game is the weapon, a specially-designed gun that’s connected to the protagonist’s wellness backlog. The backlog is her defense arsenal that, for example, includes her tears which have been transformed into bullets. She can use these bullets to shoot the monsters. The gaming experience resembles that of depressed patients fighting and overcoming their mental illnesses, and takes players on an educational journey to better understand mental health issues. Unlike most mental-health-related games, The Power of Pain showcases both the vulnerability of people suffering from depression and the resilience that can come out of such struggle. Painful experiences can teach us life lessons and thus sometimes strengthen or give us additional problem-solving tools.

Final Projects

The corresponding webpage explains the game to potential audience members. By showing the game concept and background story, the website help players understand the game’s purpose and gameplay.

Opening Video
This is the opening video that will apear in the game when player is starting the gameplay.

Goal: Bringing the player into the ambience of the game and set a tone of the whole game.
Animated Logo
This logo animation is supposed to appear at the beginning of the game. It can also function as a campaign of the game , as well as a brand identity.
The visual supposed to capture the style of the game tone.

Goal: Incorporating motion with the logo to express more personalities of the game, horror, tension, but with cute & simplistic visuals.
Graphic Poster
This campaign is a traditional graphic poster that can be use for any advertising purpose.

Final Project


The show is held right before graduation, to gather works of all graduating students at Newhouse VIS department at Syracuse University. Therefore, we design to emphasis their positivity, creativity and bright future.

Above: Merchandised Students' Name List Postcard, 5'*7'. From left to right: Back, front
Above: Merchandised Standing Signage at 2022 VIS Senior Show

at the show

Above: Photo taken by Yuxuan Wu at 2022 VIS Senior Show
Above: Branding Poster, 11'*17, at 2022 VIS Senior Show


When the world hit pause, so did our plans for classes, graduation, and careers. We learned to connect, to value our own health, and to continue moving forward. We continued to create.


Explainer Video

Social Media Templates & Stickers (Reels/Stories)

Package in Immersive Experience

Functionality Documents & Webframes

Brand Manual

User Research

User Persona

Game Design Process

Web Design Process


Brand Manual


Just looking around? (Visitors)
Scannable information of the organization that does not cause cognitive overload.
• Casual but artsy style that attract visitors to explore more.
Check the website with purpose(s)? (Artists, Donators, and Supporters)
• The top navigator can easily direct any type of user to their destinations, such as submitting artworks, donating, or shopping gallery.
Productive and convenience interactions.

Make Donation

• To build trust, show how donation are used in the head image,
Easy 3-steps donation makes money easier.
Call-to-action: Other ways to help listed below if visitors can not offer monetary help.

Gallery Combined With Shop

• To save bunch of clicks when user try to buy artworks in the Gallery, shopping information is added in the page. 
• The easier for visitors to shop, the easier for the organization to raise money.

Brand Identity


User Researches

The center holds annual art events in upstate New York, such as poster competitions and exhibitions, bringing together artists and poets. However, many of its members and visitors found the center’s original website hard to navigate (Original Website: To address this problem, I researched organization's main users: members, donators, visitors, supporters, and artists.
Based on users' stories and feedbacks which reflects the drawbacks of the original website, I identified what should be improved in the redesigning website.

For Entire Site:
I want to find them on social media.

For Secondary Page:
1. I want to know how I can submit my artwork or poetry.

2. I want to be able to contact the organization easily.

As an

For Entire Site:
Display icons/links to the various social media accounts beside the anniversary campaign.
For Secondary Page:
1. Include a submission section with submit button and submit deadline Time count down in the Hera section of homepage, giving artists a sense of how much time left for submission and easier navigation to submit page. Artist will be direct to the section that gives an overview of the process, along with instructions and necessary entry materials of they clicks submit.
2. Provide an email address, phone, physical address in footers and email drop line above footer is accessible from every page.

For entire Site:
1. I want to subscribe to an email newsletter

2. I want to donate to the organization.

3. I want to know where did past donation funding spent.

For Secondary Page:
1.  I want to know how I can buy copies of the posters.

2. I want to know how I can support this organization, by possibly donating my time and/or money.

For Entire Site:
1.Put a subscribe function on both the hero section of the homepage site’s UI and every pages' footer. This requires an input (as text for the user’s email) and a submit button.
2. Site’s navigation structure should have a call to action to donate to the organization. This link/button should be of high contrast and placed on every page of the site.
3. A clear infographic showing on the hero section of the donation page, to show how the donation would be spent, thus convince the donator to safely donate.

For Secondary Page:
1. Easy access to a shopping cart, which includes check out and product page functionality. "Shop" section is included in the navigation bars.
2. Information on support opportunities. "Donate" and "Support" both included in navigation bar for easier accesses. The call to action(s) should be to donate directly or contact the organization through an email and/or web form.

As a

For Entire Site:
1. I almost always read/view websites on a mobile device.

2. I want the site to be accessible and easily navigable to use.

For Secondary Page:
1. I want to easily navigate from one secondary page to another within the same section.

For Entire Site:
1. Improve the mobile site. Mobile web browsing surpasses desktop web browsing. This means that the mobile version of the site should be as good as or better than the desktop version of this website.
2. This is about visual design that is accessible to all readers, regardless of their handicap. For example, use high contrast test and design elements for color blind readers. Be sure that every ALT attribute is appropriate.
For Secondary Page:
1. Each section of the site should use sub-navigation within a side bar, or use dropdown menus in the main navigation bar.

As a
Site Visitor
User Stories

Brand Manual

User Flow

Donation Page
Gallery & Shop Page

Final Showcase

Highlights in the book (Full book on

429 BOOK

Want to get in touch?
Drop me a line!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.