This is a mock website and apparel design concept for a fictional collaboration between Sriracha and Gunter's Honey
It sounds utterly delicious and I'm angry this isn't an actual thing. I wanted to create a quick mockup of what it would potentially look like
I created the prototype in Figma and the product images are a mix of AI generated products and Photoshop. I also sourced images of food and some apparel from the web
Daybreak Outdoor Furniture is the premier destination for outdoor furniture that exudes sleek elegance and unbeatable durability.
They were having a debut showcase at Casual Market Atlanta for their newest line of luxury outdoor furniture. They needed a landing page that detailed their offerings and an email marketing campaign to drive up attendance
I was contracted through Artifex Marketing to create a website that could attract attendees to their showroom and matched their newly designed website. I was also tasked to create a series of email templates that they could use during the event as well as the marketing campaign structure
“We had a very tight time frame and Richard was amazing to work with and made the process go extremely smoothly even with the very tight time frames!“
The Battery and Energy Supply and Storage Technology Frontier ( B|ESSTf ) is the forefront of the renewable energy economy.
They gather, list, and track significant research and development in the battery and energy supply sector and organize them based on Market, Industry Application, Location and Sector
I was contracted through Buddy Web Development & Design to create a website that encompasses their ethos and distills these complex concepts and research into a digestible and marketable product that is highly optimized for search engines
Casual Gaming is a gaming merchandise company that specializes in console skins and gaming cases
I was tasked with creating their logo and brand from the ground up for their upcoming Animal Crossing case launch and this project was a 1 month endeavor that wrapped up in December 2020
The client wanted a logo that looked friendly and approachable for their initial product launch for their line of Animal Crossing switch cases. The launch was to coincide with a social media campaign that was targeting Animal Crossing micro influencers
After our initial consult of business goals, brand values and aesthetics, I began the research process
I conducted an initial market and competition research into the console skin and gaming merchandise niche.
San serifs and futuristic fonts were common themes. The market design language was very similar to PC gaming aesthetics
Because the entire initial run of product was envisioned as an Animal Crossing accompaniment line, I wanted to do a market assessment for that area as well to key in on their audience
According to Iwata, 56% of Animal Crossing players are female with some versions such as Pocket Camp reaching as high as 80% female. The age demographic of the game is solidly in the 18-35 age bracket
Because of this difference from the general gaming populace, I wanted to cater to the demographic while still being fairly universal. I deep dove into the animal crossing communities and studied cottage core references
I wanted to explore some serif fonts as it would make them stand out in the marketplace and the general market trend back in 2020 was leaning more into serifs especially for female led brands.
I developed 3 logomarks that hit upon their core values with the last being hyperfocused on Animal Crossing. The core business plan was still in flux whether they would develop beyond the niche, so I wanted to provide different options and flexibility if they decided to focus on the niche
Next, I wanted to do explorations on the gaming market at large. I wanted the logo to be reminiscent of the current logos out there but still distinct and friendly.
The first option is an exploration into a brand that would be flexible enough to be on PC gaming accesories like logitech.
The second option is a play on the iconic button pad. I wanted to pick apart the iconography and play into the nostalgia while being immediately identifiable.
The client immedietely signed off on the button concept and after several round of iteration and finessing, we got our finished logo and brand guidelines
The Office of Neighborhood Safety (ONS) combines the efforts of the
Mayor’s Action Plan for Neighborhood Safety (MAP), the Office to Prevent Gun Violence (OPGV), and Atlas to empower New Yorkers and work with them to pursue community-driven solutions to public safety.
This project was in deep collaboration with Christiana Zafiriadis under her mentorship and Colby Hamilton for guidance. I was tasked with building the website from the ground up and designing the visual language of the web property
This website was extremely challenging for 3 main reasons:
The first being our website was slated to launch in less than a month. This was to coincide with the change in mayors.
The second was that this department was completely new and was the combination of 3 different organizations & departments. As it was in its infancy, there was a lot of discussion as to what the new form of the organization would actually be and approval would be difficult
The third is that this project was meant as a companion piece to several documentary shorts that were not yet completed. As such, the content for the website was also not completed which made design and content needs a very fast moving target
I am extremely grateful for my mentor, Christiana, whose guidance and prior engagement with the departments heavily influenced the direction for the entire project. Her initial design document for their logo development defined tone and direction that cut through the approval process.
As the time for execution was very short, my process cycle was fast paced. I limited my data collection to our existing properties and consultation with ONS.
I created several modular designs and components on Figma that could get approval before content was made. As there was a large amount of content needed, I collated copy for snippets from pre-existing pages and isolated quotes from advanced screenings of the documentary
Tonally, the ask was to be more energetic and fresh than the rest of our web properties. This gave me a bit more freedom to inject more recent web trends into the project but I kept typography and general sections clean and consistent with WCAG standards and web patterns.
Once Figma prototypes got approval, I switched over to our staging website to cut down on iteration time. I created the base templates for the theme. I pre-loaded, cached and optimized images and video
The entire process took 1 month, culminating in the launch of the new website in December 2021.
Currently, phase 2 is being worked on for deployment
The Mayor’s Office of Criminal Justice (MOCJ) advises the Mayor on all matters relating to the maintenance and improvement of a fair and equitable justice system. Recognizing that public safety cannot be achieved by law enforcement alone, MOCJ brings together community and institutional stakeholders to address the systemic issues that undermine the safety and stability of our neighborhoods.
This project was in deep collaboration with Christiana Zafiriadis under her mentorship. I was tasked with freshening up the website, improving engagement, and improving the backend to match department workflow
The original website served the department well. It was originally meant to establish the mission statement and the context of the department in the overall vision for criminal justice.
However, after growth and establishment, the homepage was no longer servicing their needs
After conducting thorough consultations and meetings with department heads and regular maintainers of the website, I commenced the research process to understand user usage patterns. My objective was to align stakeholder needs with the needs and behaviors of both current and potential users of the website.
To achieve this, I relied on six primary sources of data for my analysis: Google Analytics, Search Console, SEMRush, AnswerThePublic, news articles, and user interviews. My primary focus was on identifying common user pathways, pain points, and attrition areas.
For current users, I collated data on common user pathways through universal analytics tools such as entrance traffic, user flow, and drop-off points. I also analyzed common search queries from sources such as Search Console, SEMRush, and AnswerThePublic, to identify user intent and language usage related to the project.
To further enhance my understanding of user needs, I collated common questions from public meetings, AnswerThePublic, autocomplete form information, and news articles to identify information that was not readily accessible on the website or information that was creating confusion to the average person.
Based on my research, I crafted three distinct user profiles:
These were individuals who had low levels of knowledge about MOCJ. They were concerned about crime statistics in their local neighborhoods. Heavily mobile device reliant
Regularly interfaces with government agencies and MOCJ. These people had high levels of knowledge of crime and statistics and were looking for data streams or our research releases
They were primarily interested in the people behind the scenes. They wanted access to linkable resources and contact resources
For technical issues, I did an assessment through pagespeed insights and waterfall rendering. The website was fairly robust already with just image servicing issues and the aforementioned 3rd party graph tool
With a comprehensive understanding of user needs, I chose to optimize for user engagement, retention and search profile. I commenced the redesign process to align with the overall goals of the project and satisfy the needs of all three user profiles.
With deep collaboration with Christiana Zafiriadis and Colby Hamilton, I created mockups using Figma and Photoshop of websites that would match the tone of the existing webpages. I focused my efforts on the most commonly visited pages, the homepage, programs page and about us page.
For the homepage, I created a more compact and news focused above the fold section. For the navigation, I optimized for common user pathways or desire paths.
For the statistics section, I completely took it away and replacd it. These indicators were doing a poor job of communicating our office’s impact while having technical burden and also not servicing our core user groups.
I replaced it with graphical summary sections that highlighted key takeaways from data to make it more easily scannable and link directly to data sources or the programs that are impacting these figures. Using these modular sections also allowed us to explain the nuance behind the numbers or explain the current situation in a context neutral way
The entire process took five months, culminating in the launch of the new website in October 2022.
Average page load speed reduction: From 6.8s to 3.8s
7,393 vs 6,574 new users year over year
The time spent on the homepage increased 1:27 vs 0:58
8,893 vs 8,543 total sessions year over year
After growing up in the Philippines and leaving, one of the things I miss the most is the food. A couple of quick watercolors to quiet the homesickness for a bit
The Office of Crime Victim Supports (OCVS) is the first stand-alone municipal office of its kind in the country. Embedded in the Mayor’s Office of Criminal Justice, OCVS takes a holistic approach to victim services, coordinating existing services to support New York City residents impacted by crime.
I was tasked with creating their logo and brand identity using the NYC design system but incorporating their own design language and core values
The Office of Crime Victim Supports (OCVS) needed a logo that showed they were a combination of 3 offices & initiatives: The Mayor’s Office to Combat Domestic Violence, The Mayor’s Office to End Domestic and Gender-Based Violence and The Mayor’s Office of Criminal Justice. It was decided early on in the process that they wanted to use the colors, purple, orange and blue to showcase that.
After conducting thorough consultations with OCVS, I commenced the research process. My main objectives were to understand the current landscape and design language. I gathered logos and marketing materials for organizations related to intimate partner violence and domestic violence. I wanted to make sure I was being thorough and to avoid any biases
Contextually, all NYC logos follow the design document set forth by NYC & Company– the official marketing & tourism organization for the City of New York. I wanted to understand the likely context that the logo would appear next to official government organizations
After research, I decided to iterate several versions to decide on color scheme and get approval. Crucially, I needed to make sure I provided enough options so that the logo and its colors could convey the tone that they envisioned their department to be.
For phase 1, I iterated several options based on their chosen color palette. The first 4 had their palette but in different levels of energy and gradient configurations. The last 2 were different palette versions to be simpler or more inclusive.
Typically, I don’t like presenting so many options but this was helpful for 2 main reasons.
Initially, they signed off on the first option immediately. The color scheme matched what they were looking for and the jewel and earth tones conveyed the tone they wanted.
However, due to the newly launched Office of Neighborhood Safety, they were concerned the logo was too similar.
Phase 2 is mostly a rethink on how to still remain true to the color palette but distinct enough from the Office of Neighborhood Safety
I played around with different configurations but the concept I honed in the most on was the first one.
My thought process was that gradients seemed too impersonal so I wanted to add a human touch to it by painting their palette in watercolors. The extra painted texture and the soft brush strokes gave it an extra layer of compassion that I believe is vital to support services. It would also further make their department stand out amongst the other offices and initiatives
They loved the painted version so for the final phase and final approval, I wanted to provide extra context to see it in action. The 3 versions are mostly slight adjustments to saturation to either make it more saturated, jewel-toned or earth-toned
They loved and approved the last version. The final step was to vectorize textures, perpare different versions for print, web and socials and prepare brand guidelines
As a Fire Rabbit, I wanted to showcase 2023 by painting a couple of rabbits. The White Rabbit is an iconic piece of asian confectionary. I can remember that sweet condensed milk flavor encased in delicate rice paper that melts on your tongue. It always takes me back so I wanted to paint the candy and its box art
This piece is inspired by "The Story of Piña", a Filipino myth on the origin of the pineapple. Growing up, this story deeply bothered me. I wanted to create a painting that could be simultaneously beautiful but unnerving to match the origin myth. I painted this inspired by the work of Bao Pham
Once upon a time, there was a woman who lived with her daughter Pina in a tiny hut in the village. They were poor, and the mother worked day and night to make both ends meet. No matter how hard she worked, though, she never got any help from her daughter.
Pina was a lazy, spoiled kid who liked to play in the backyard all day. Whenever her mother asked for help around the house or tried to send her on an errand, she would always find an excuse by saying she can’t find the object that was needed to complete that task. If her mother asked her to sweep the house, for example, she would say she cannot find the broom, even if it was right there in front of her. Needless to say, her mother always ended up doing the work herself.
One day, her mother became very ill. She called out to Pina, who as usual was playing in the backyard.
“Pina! Pina! Come over here, anak. I am very sick. Can you cook some porridge for me please? I am too weak to get up.”
Pina ignored her mother and continued to play.
“Pina, come over here this very instant, or else!” Pina’s mother mustered all her strength just to say this, but it worked. Pina grudgingly stopped playing and went inside the house. She poked her head inside her mother’s room.
“What do you want, Nanay (mother)? You really expect me to cook for you? That’s too hard,” protested Pina, pouting and stomping her feet.
“Pina, it is very simple. Just put some rice in a pot and add water. Once the water boils, let it simmer for awhile. Stir it occasionally with a ladle. Everything you need should be right there in the kitchen.”
Pina reluctantly left and went to the kitchen. Her mother could hear her banging the drawers and cabinets. Then her mother heard her open the back door and sneak out into the backyard. Her mother waited and waited. Finally, she called out to Pina again.
“Pina, did you cook like I told you to?”
“No,” was the defiant response.
“And why not?” was her mom’s exasperated response.
“Because I could not find the ladle,” was her flippant reply.
“Oh, you lazy child! You probably did not even bother to look for it! What am I going to do with you? Here I am, sick, and I cannot even count on you!”
Her mother wept bitterly. In her anger, she shouted, “I wish you would grow a thousand eyes all over your head! Then you can find what you’re looking for. Maybe then you won’t have any more excuses.”
As soon as she said this, there was complete silence. Her mother thought, “She is trying to be quiet so I will forget about asking her again.” She sighed.
She waited a little bit to see if Pina would come back. Realizing the wait was futile, she wearily got up to do the cooking herself. When she looked out into the backyard, Pina was nowhere to be found. She sighed again and said to herself, “That lazy kid probably went to a friend’s house so she did not have to do any more errands for me.”
Exhausted from the exertion, she soon went back to her room for a much-needed rest. Weak as she was, she just tried to do everything by herself, having given up on any help from Pina.
Hours passed by, and then days. Still no sign of her wayward daughter. With a heavy heart, she thought that Pina had ran away for sure.
When she finally recovered from her illness, the first thing she did was look for Pina. No one had seen or heard from her. It was like she disappeared into thin air.
Months passed and still no sign of her. The mother felt bad for her angry outburst, and she feared that she might probably never see her daughter again.
One day, she was sweeping the backyard where Pina used to play. For months now, she had noticed this strange plant growing on the very spot where she last saw Pina. By this time, the leaves of the plant had fully opened. Inside, she saw this strange yellow fruit that resembled a child’s head with a thousand eyes. A thousand eyes…
She suddenly remembered the spiteful words she used that fateful day. With horror, she realized that in the same way her mother’s love had spoiled her daughter, so did her anger unwittingly curse her. Somehow, her daughter had been turned into this plant.
To honor the memory of her beloved daughter, she named the fruit Pina. She took such loving care of it like it was her own daughter. The fruit flourished so well that it bore more and more fruits, and became popular among the village and the entire country. Its name later evolved to pinya, or pineapple in English.
And that’s how the pineapple came to be, according to folklore, named after a spoiled child who was cursed with a thousand eyes…
