Hi, I'm Gary!

I'm a and an aspiring full stack designer and beyond from New York City.

1

DESIGNER

function fullStackDesigner(a, b, c) {
   return 'I am a ' + a + ' ' + b + ' and ' + c + '!';
}
console.
log (fullStackDesigner("researcher", "designer", "front-end developer"));

'I am a researcher, designer, and front-end developer!'

1

CHEF

I didn't grow up with a silver spoon in my mouth, and I've never been to Chef's Table before, but I do know how to cook a lobster and throw an egg in it too.

1

PAINTER

I apply oil paint on canvas. My early works explore feelings of uncertainty, misery, gloom, and hope. My more recent works explore feelings of bliss, love, and euphoria.

Hello world.

I’m an aspiring full stack designer from New York City.

I enjoy bringing products to life from ideation all the way to development. I’m passionate about social change, enhancing the quality of life, and designing for good.

In my spare time, I create sandwich recipes, paint with oils, or dabble in code to build my video game ideas.
My Designer Evolution Plan


Step 1

Just an ordinary
average
good
awesome
guy!
100%

Designer



Step 2

  • Unicorn
  • Unicorn
  • Unicorn
  • Unicorn
  • Unicorn
  • Unicorn
  • Unicorn
1000%

Full Stack Designer



Step 3

GOD MODE!


End-to-End
Design-a-veloper

Designed and coded by me. © 2020

Designs

Click a button on the left to view a project
Bon Voyage
Overview
Approach
Process
Outcome
• • •

Bon Voyage

Bon Voyage is an app that provides information and recommendations about where people can go and what to see in different cities around the world.

The Problem

Problem statement here.

The Challenge

Apply user research to determine what the app should do and use a user-centered design to create the best experience possible.

How I Applied User Research to Create the Best Travel Experience Possible

Creating a User Persona

I received interview transcripts to learn more about the goals, motivations, frustrations, influences, and behaviors of travelers. Based on my insights, I scoped my project and created a user persona.


Creating Style Tiles

After knowing who I was building my travel app for, I created 2 divergent looking style tiles to visually explore directions for my design.

Creating Wireframes

I created wireframes to test for patterns, language, and content. The following wireframes demonstrate a series of complete flows.

Build a Prototype

After knowing my user persona, which style direction to take, and having my user flows completed, I built a clickable prototype.


The Process

(Process and Methods)To gather insights on the fitness app market and Competitive Analysis + Affinity Mapping, Branding, Logo Design, Moodboard, Style Tiles, Wireframing, High Fidelity Mobile Designs, Microinteractions, Prototyping, Responsive Marketing Site, Style Guide,


The Discoveries

(Insights)

The Project

Under Construction.

Content

Collaborative project
User Interface Design
Illustration
User Research
Animation
Storyboarding
User Flow
Wireframing
Protyping

Duration

7 weeks, November 12, 2019 - Decemeber 21, 2020

Client

Flatiron School

My Role

Prototyping
User Testing
Style
Moodboards
Competitive Analysis
Branding
Wireframing
User Persona

Tools

Sketch, Photoshop, Illustrator
Cookie
Overview
Approach
Process
Outcome
• • •

Cookie

Cookie is a desktop platform that connects students across a wide-ranging of out-of-school-time (OST) programs in their respective communities

The Challenge

Effective afterschool programs, also known as out-of-school-time (OST) programs, have a wide range of benefits for young adults, their families and the community at large. Not only do after school programs boost academic performance, but they also promote social skills and physical health, all while providing students with a safe, structured environment. Looking to capitalize on these benefits, the stakeholder wants to build a multi-sided platform that connects students with after-school programs in their respective communities; which in turn will help community programs maximize their customer reach. The stakeholder plans to offer free and low-cost programming for young adults across a wide-ranging socioeconomic spectrum by generating revenue through advertising and premium partners that pay to have their programs on the platform. Because the business will be primarily funded by these premium partners, the stakeholder has stressed the need for the platform to build an active online community that brings value to partners and incentivizes continued funding. The stakeholder is also determined to find easy and frictionless ways for users to participate and interact on the platform. In the words of the key stakeholder contact, “I want it to be as convenient as scrolling on Instagram and liking a bunch of stuff while you’re standing in line at the grocery store.”

The Objective

My team has been asked to focus on designing and develop the look and feel of the agency/administrative portal that improves program managers' ability to easily understand and prioritize data being displayed in a dashboard that aids in the recuitment, retention, and engagement of students.

Brand Principles


The following brand principles have been provided by the stakeholder. We were asked to consider these throughout the project.

Engaging

The platform should be able to help users meet the community and get them to participate in local programs.

Educational

It should help users continue the growth and development of the community based on their interests.

Accessible

Users can rely on premium partners to promote free programs to the community.

Network

The platform will keep users engaged and foster an online community for real-time after school activities.

Purposeful

The platform should only show users the essentials and help make everyday actions feel productive.

Customizable

Managers should be able to personalize information based on the organization's programs and activities.

What we did

Task 1

Design a style direction


Task 2

Design mock-ups


Task 3

Conduct user testing

Handoff of UI Design Deliverables

Our team strategized how to best organize and prepare a professional handoff package that includes all of our client-facing, final deliverables for our client, stakeholder, and their future product team.

Final Style Tile


Iterated Designs


The Prototype

To view the Cookie prototype, click here.


The Design System

To view the Cookie Design System, click here.

Content

Collaborative project
User Interface Design
Illustration
User Research
Animation
Storyboarding
User Flow
Wireframing
Protyping

Duration

5 weeks, Febuary 15, 2020 - March 20, 2020

Client

Flatiron School

Team

Gary Li
Rich Hyung
Monica Huang
Louise Tang
Sarah Saka

My Role

Prototyping
User Testing
Microinteractions
Design System
Iconography
Design System

Tools

Figma, Sketch, Photoshop, Illustrator, Google Slides

Fitness People
Overview
Approach
Process
Outcome
• • •

Fitness People


The fitness App that helps people stay motivated with their fitness goals using personalized fitness plans and progress tracking tools

The Problem

The purpose of this project was to discover the goals, needs, motivations, and frustrations of millennials pertaining to physical fitness. Using this information, I was required to design a digital experience geared towards helping users stay committed to their fitness goals.

The Objective

To create the visual design for a mobile platform that reimagines how people can engage with fitness recommendations and health plans using the user research conducted by a UX team then produce a prototype of my proposed solution.

The Strategy

Create for all types of users & make it personal!

Fitness People is a fitness app for everyone! Cyclers, runners, swimmers, yogis, lifters, soccer players, included. To get started, the Fitness People app will learn about its user during the onboarding process where they will complete a questionaire, after which the app will provide the user with a personalized fitness and health plan. The more the user engages with the app, the more the app will learn and customize for the user.



Implement easy to read tracking tools!

I included simple to read tracking tools for users to track their food intake, monitor their nutrition, and stay informed about their workout plan progress.




Make it addictive!

I wanted to provide incentives for users to stay committed to their fitness and health goals so I added a feature where users could earn badges. To better guage the progress of collecting badges, a gamified measure of leveling up was implemented so users can track milestones as they reach new levels towards earning badges.


Aqua Jock

Cross Fit

God Speed

Boxer

Iron Strong

Stacked Snack

Apex

Roadster

What I did

Task 1

Create a brand and logo


Task 2

Design Mock-ups


Task 3

Design a Marketing Website
To view the Fitness People marketing website, click here.


Task 4

Create a Prototype
To view the Fitness People prototype, click here.

How'd it turn out

The Logos


The Screens


The Badges


Aqua Jock

Cross Fit

God Speed

Boxer

Iron Strong

Stacked Snack

Apex

Roadster

Content

Individual project
User Interface Design
User Research
Animation
Storyboarding
User Flow
Wireframing
Protyping

Duration

6 weeks, January 1, 2020 - February 14, 2020

Client

YMCA

My Role

Prototyping
branding
User Testing
Microinteractions
Design System
Iconography

Tools

Figma, Sketch, Photoshop, Illustrator, InDesign
Construction Check
Overview
Approach
Process
Outcome
• • •

Construction Check


Construction Check is a SaaS (Software as a service) platform for construction decision makers responsible for construction projects of all sizes and complexities. Construction projects typically require cost estimate, and this platform helps to generate or validate the construction cost estimate in an independent, objective, transparent, and efficient way.

The Problem

Construction Check tables can contain a lot of dense information, and with 55% of the workforce nearing retirement age, the issue of accessibility was raised. In addition, the facet of the interface lacks transparency so new users may need assistance tools to help them figure out how to access information.

The Objective

To increase the scalability of the Construction Check platform by meeting accessibility guidelines, developing a clear hierarchical system for organizing dense information, and creating a visual identity that increases comfort and reduces fatigue.

So, what was the plan?

Design an interface that meets Web Content Accessibility Guidelines (WCAG)

The interface required a design that makes content more accessible to a wider range of people including those with low vision. Throughout the design process, I made sure to design with text that is readable and understandable, content that appears and operates in predictive ways, and included assistance tools to help users avoid and correct mistakes.


For more information about WCAG, click here.

Create an efficient and organized table system for construction project items

Tables are used to pack in dense and overwhelming information so I designed them with organization in mind which helps users find, add items, and edit items easily.

Implement a scalable design system

The Construction Check platform needs to look like a construction tool and also function for the purpose of being adaptable to the changing needs of construction project estimators. The interface we designed allows users the ability to nest an unlimited amount of items, revise prices and quantities, and populate project items using WBS (work breakdown structure) numbers.



What we did

How it all came together and what we've deliberated to make the Construction Check experience both assessible, efficient, and scalable.

Task 1

Find out more details about the project. To find more details about a project, the user must click on the down chevron arrow located at the bottom center of the header.


Task 2

Revise the unit price of a table item. To revise a table item the user must input revised numbers under QTY and UNIT PRICE then click the save button.
LEVEL
 
DESCRIPTION
   QTY
UNIT OF MEASUREMENT
UNIT PRICE   
TOTAL COST   
 
 
02 00 00
Demolition and Structure Moving
Unit Per


Task 3

Add new nested items. We decided to used an accordion to activate the edit item and the add item feature.


User Testing & Insights

After refining our prototype, we conducted user research testing to gain insights on friction points of our 3 main task flows.


Here are our findings

More Controls!

Users wanted more control over the platform. A side navigation menu was desired.

Don't Distract me While I'm in Control!

The edit item and add item feature needs to be two completely separate tasks. Both states must not be grouped into same edit function state.

Save me Time!

Adding items must have predicitve search on the search bar, the ability to add more than one item at a time, and the ability to edit all items before adding to a parent.

It's Automatic!

Adding auto-save feature or canceling after clicking out of the input field cell.

Finalizing Information Architecture

An overview of Construction Check's mental model & task flow

Edit item task flow





Add item feature task flow


The Results

Automatic calculations!

When a user inputs an entry under QTY and UNIT PRICE, the TOTAL COST is auto-calcutated and appears under TOTAL COST automatically. Try for yourself!
LEVEL
 
DESCRIPTION
   QTY
UNIT OF MEASUREMENT
UNIT PRICE   
TOTAL COST   
 
 

02 00 00
Demolition and Structure Moving
Unit Per

Predictive Search!

Add new nested items. Often times construction projects require a lot of items to purchase and with an abundance of different construction items to search for, we implemented a predictive search bar to help our users easily search and add items.

Use the search bar to find the following items:

Procurement and Contracting
General Requirements
Exisitng Conditions
Demolition and Structure Moving
Demolition
Masonry
Metals
Metal Fabrications
Formed Metal Fabrications
Finishes
Plaster and Gypsum Board
Plaster and Gypsum Board Assembles
Tiling
Ceilings
Acoustical Ceilings
Acoustical Ceiling and Suspension Assembles
Flooring
Terrazzo Flooring

The Predictive Search Bar

Next Steps

Add a sticky header!

If a user is scrolled deep down into a page, they will not be able to reference labels that are located on the top of the list.

Seperate edit item and add item states

Edit item, add item, and other actions need to have a clear distinction from one another to avoid user confusion.

Develop a more robust system for adding new items

Users need to be able to search and add one or multiple items while also being able to edit them before finally adding them to their parent table.

Content

Collaborative project
User Interface Design
Illustration
User Research
Animation
Storyboarding
User Flow
Wireframing
Protyping

Duration

4 weeks, March 23, 2020 - April 16, 2020

Client

Alexa Seol (UX Manager)
Leanda Thomas (CEO)

Team

Gary Li
Rich Hyung
Monica Huang
Louise Tang
Sarah Saka

My Role

Prototyping
User Testing
Microinteractions
Design System
Iconography

Tools

Figma, Sketch, Photoshop, Illustrator, Google Slides
Overview
Pre-launch
Post-launch
Conclusion
• • •


Toast Monster


In 2010, I saw a rise in popularity of food trucks, so I decided to start a food truck business of my own. My goal for this project was explicit and sincere: to put my artistic pursuits to the test, and to create a franchisable business.

The Problem

As an unseasoned business owner with only a handful of fast food experience under my belt, I had to apply all that I have learned from working in the fast food industry to build a food business from the ground up. Within an oversaturated market, starting a food business would be no easy feat. I had to establish my presence by creating something truly unique.

The Objective

To conceive and incept a scalable food business idea and leverage expansion opportunities.

Pre-launch

How I turned a simple business plan into a company named Toast Monster

Develop a business plan

My first step was creating a business plan, nothing crazy, nothing out of the ordinary, just a simple business plan outlining the steps I would take to launch a food cart in New York City and how much money it would require to do it.

Create a brand

After acquiring funding for my business, I created a brand which consisted of a name, logo, and identity.

Develop recipes

Next I developed menu items that paired well with the identity of the business.

Mac & Cheese Sloppy Joe

Chicken Pizzaiola

Steak & Potatoes

Lobster Crabbie

Spinach Artichoke

Taco Guaco

Maple Syrup

PB&J
To view recipe instructions manual, click here.

Develop Marketing Website

And finally, I developed a marketing website to showcase Toast Monster's staple sammiches. To view the latest version of the Toast Monster website, click here.

Post-launch

Researching locations

Once I had a food cart, I was ready to hit the streets. I traipsed all over New York City looking for locations with the most foot traffic to station my food cart. I jotted down different spots and assessed the value of each by counting the number of people waiting in line for food at nearby food trucks or food carts. Eventually, I settled on a comfty spot on 50th street between 6th Avenue (also known as Avenue of the Americas) and 7th Avenue. The location is home to many famous attractions such as Radio City Music Hall, NBC Studios, Rockefeller Center, and the famous Hallal Guys food cart.

Build an online presence

Rumors began to spread about our food cart Toast Monster hitting the streets of New York City. We had made a reputation for being as elusive as the legendary Bigfoot so when bloggers and reporters caught sight of Toast Monster, an article would surface on the internet shortly after.


"How can you pass up a peanut butter & jelly sandwich on French toast? We certainly can’t, especially when it costs only $3!"


"Mac & Cheese on toast??!! What God fearing suburbanite could turn that down? It’s ethnic food for WASPS."


"We never would have thought of putting mac & cheese on bread and toasting it, but it was surprisingly good."


"There’s a new kid on the New York street food scene – Toast Monster. We had a First Look recently, and decided to go back for an encore."


"How can you not stop at a cart called Toast Monster?!"


"French toast “Sammiches” (try the peanut butter and jelly with banana) or “Texas Size Sammies” come griddled golden brown and stuffed with a heaping helping of fillings."

Expanding awareness

For a limited time, I made Toast Monster less elusive and brought it to places where people have never seen Toast Monster before.

Outdoors

Toast Monster is spotted in Urban Space, an immersive public market where communities gather and share in local culture and cuisine.



Indoors

Toast Monster is spotted indoors for catering events where we introduced our brand and food to the less outdoorsy types. The following are companies Toast Monster has visited: Starret-Lehigh, IAC, Martha Stewart, Horizon Media, Two Sigma, David Yurman, Havas Media, Associated Press, FCB New York, and 360i Media.




Home base operation

From Monday - Friday Toast Monster could be spotted on 57th and 7th Avenue.


The Conclusion

Toast Monster expanded to Seoul in South Korea!

Under Construction

Home
2007-2011
2012-2015
2016-2020
• • •

Paintings

Click tabs on top to view paintings
athanasia
Athanasia 22"x28" Oil on canvas
agirlfromthestreets
A Girl From the Streets 24"x36" Oil on canvas
waveringfrenchleave
Wavering French Leave 24"x30" Oil on canvas
levels
Levels 30"x24" Oil on canvas
hennypenny
Henny Penny 24"x36" Oil on Canvas" Oil on canvas board
hallelujah
Hallelujah 24"x30" Oil on canvas
lululand
Lulu Land 24"x30" Oil on canvas
sunandmoon
Sun and Moon 18"x24" Oil on canvas
sniggle
Sniggle 16"x20" Oil on canvas
bluemoon
Blue Moon 24"x30" Oil on canvas
siddhartha
Siddhartha 20"x16"" Oil on Canvas" Oil on canvas board
blastoff
Blast Off 16"x20" Oil on canvas
catalley
Cat Alley 30"x24" Oil on canvas
catchingfishatdawn
Catching Fish at Dawn 18"x24" Oil on canvas
fireflies
Fireflies 24"x30" Oil on canvas
lyric
Lyric 20"x16" Oil on canvas
paris
Paris 20"x26" Oil on canvas
thelongjourneyhome
The Long Journey Home 60"x36" Oil on canvas
At Artexpo [SOLO] New York For more information about Artexpo [SOLO] New York, click here. 2018. For more information about my 2018 Artexpo [SOLO] New York exhibition, click here. Photographed by Tinx Chan, To view other work by Tinx Chan, click here. a cinematographer from Brooklyn, New York.
LOADING