Comeback Magazine
Behind the spectacle of Kpop’s BackstageTIMELINE
September 2020 to December 2020
(8 weeks)
September 2020 to December 2020
(8 weeks)
ROLES & SKILLS
Layout
Art Direction
Print Design
Layout
Art Direction
Print Design
PROJECT TYPE
Solo
Solo
OVERVIEW
K-pop has steadily been on the rise on a global scale, but only relatively recently has it seeped into mainstream conversations. With growing diverse fanbases, content has been made increasingly more accessible. Fans and non fans alike have been more curious about the overall production and creative directions behind k-pop. How might we spotlight the minds behind k-pop’s spectacle in a way that entices a spectrum of interested audiences?
APPROACH
Comeback Magazine (abbreviated as CMBK) is a 50 paged collection of curated articles centered around the individuals behind the k-pop industry’s creative direction, including idols who take charge of their own production. These are their photographers, visual designers, music directors, songwriters, and the like. Divided into three sections (Visual, Video, Music), this first issue brings to the forefront the talents of K-pop’s refreshing backstage.
What is a Comeback?
A comeback is the literal “coming back” of an artist, the equivalent of the release of new music. This is usually packaged in a special single with an accompanying music video, as well as an album. A comeback event defines a high point in the artist or group’s career. Fans around the world heavily anticipate and participate in these events, often harnessing collective effort to gather views, sales, and charting. With such meticulous planning, a comeback marks defining eras of an artist, associated with specific visuals, marketing, stages, and sound. It goes without saying— it takes countless individuals in the industry to make this happen.
TL;DR
Comeback (n) When a group or artist comes back with new music
Comeback (n) When a group or artist comes back with new music
PROCESS
I developed three personas to define the visual approach of my magazine. I intended the magazine to appeal to a fairly wide spectrum- anyone with even the slightest interest in either k-pop, visual and sound production, or both.
MOODBOARD
There are two moodboards I constantly referenced throughout my design process, one for purely layout and type treatment, and the other for overall tone. Selected photos were then arranged to populate a tonal range from pure to expressive
Third Place Books
Every story has a settingTIMELINE
January 2021 to March 2021
(10 weeks)
January 2021 to March 2021
(10 weeks)
ROLES & SKILLS
Branding
Photo Treatment
Layout
Illustration
Branding
Photo Treatment
Layout
Illustration
COLLABORATOR
Daniel Hoang
Daniel Hoang
CHALLENGE
Since its inception in the late 90’s as a local, humble and trusted bookstore, Third Place Books has experienced very little brand change. Their current collateral lacks cohesion and intentionality in fully reflecting their story.
SOLUTION
We knew what we wanted to express in our rebrand- the feeling of craft, locality, and community, however we could not pinpoint a specific execution through collateral. Prior to building our assets, we took into heavy consideration our central tagline “Every story has a setting”, an ode to Third Place Books’ inclusive spaces, and illustrated the 3 store fronts. We experimented with pushing the concept behind the storefronts further, highlighting the unique communal experiences in each branch. Not only did this approach tie our illustration assets together, it gave us an overall marketing approach that further sets Third Place Books apart from other local bookstores. We developed a consistent design system across a variety of media with a focus on Third Place Books as an inclusive space for local community building through uplifting the unique charms of their 3 distinct branches.
HISTORY
Third Place Books is an independent bookseller with three neighborhood locations in the Seattle area: Lake Forest Park, Ravenna, and Seward Park. These stores are the brainchild of the visionary Seattle developer Ron Sher, and the founding concept is described as the “deliberate and intentional creation of a community around books and the ideas inside them.”
AUDIENCE
Frequenters of Third Place Books tend to be locals nested deep inside Seattle neighborhoods due to the the branch locations. Book lovers with disposable income, usually running from youth to middle aged adults, tend to frequent the bookstore most due to independent publishing selections and live author events. A growing audience is minority-identifying young adults and teens due to inclusive author events and a close proximity to schools.
BRANDMARK
The new brandmark can be read as a book or an opening door, symbolizing Third Place’s welcoming values, beginning of a story, and dedication to craft. Its linocut-inspired pictograph is contrasted by its more friendly and delicate wordmark. This creates an approachably bookish lockup that is distinguishably hand-made. The logo will always be dark against a ligther background to emphasize the craft of linocut.
PROCESS OVERVIEW
Binder: School Portal RedesignCHALLENGE
The Seattle Public School System currently uses multiple disconnected and unintuitive portals, making it challenging for students and parents to access readily needed information and perform basic tasks.
The Seattle Public School System currently uses multiple disconnected and unintuitive portals, making it challenging for students and parents to access readily needed information and perform basic tasks.
SOLUTION
Binder is the unified, single replacement and improvement of these portals for all users to carry their respective tasks without hindrance. By doing in-depth user research and identifying specific pain points, our team was able to design a cohesive system across mobile and web that caters to parent and student responsibilities.
Binder is the unified, single replacement and improvement of these portals for all users to carry their respective tasks without hindrance. By doing in-depth user research and identifying specific pain points, our team was able to design a cohesive system across mobile and web that caters to parent and student responsibilities.
PROCESS
1. Research Overview (current design overview, user interviews, alternative app analysis)
2. Mapping Our Users (identifying pain points, creating personas)
3. Information Architecture (starting wireframes and flows)
4. Usability Testing
5. High Fidelity Implementation (adjusting according to findings, hi-fi design)
MAIN PROBLEM
How can we unify the SPS Portals so that all parents/guardians, students and teachers, have the ability to locate, share, and submit information without hindrance?
RESEARCH OVERVIEW: APP OVERVIEW
As a team we did an in-depth overview of the current interface of the website, noted inconsistencies and inefficient designs that could be improved. To futher gain a deeper understanding of it’s usability, we interviewed current users of the app to identify their specific pain points as well. With much overlap with our findings, we came noted our three largest and most common pain points:
a. “It’s hard to find what you need. There’s multiple access points and many different forms of messaging with small bits of information. I can’t keep track of everything.”
b. “There is too much visual clutter. When I really only want to do one thing, I encounter too many obstructions.”
c. “It is overall a stressful experience.”
RESEARCH OVERVIEW: ALTERNATIVE APP ANALYSIS
To get an even deeper understanding of our target market, we decided to look at school portal apps outside Seattle, to find already established working solutions. As seen on the right, we did a survey of multiple apps such as SeeSaw, which was successful in having a simpler, more enjoyable interface, as well as more accessible information. Our users generally favored the kanban board formula.
As a team we did an in-depth overview of the current interface of the website, noted inconsistencies and inefficient designs that could be improved. To futher gain a deeper understanding of it’s usability, we interviewed current users of the app to identify their specific pain points as well. With much overlap with our findings, we came noted our three largest and most common pain points:
a. “It’s hard to find what you need. There’s multiple access points and many different forms of messaging with small bits of information. I can’t keep track of everything.”
b. “There is too much visual clutter. When I really only want to do one thing, I encounter too many obstructions.”
c. “It is overall a stressful experience.”
RESEARCH OVERVIEW: ALTERNATIVE APP ANALYSIS
To get an even deeper understanding of our target market, we decided to look at school portal apps outside Seattle, to find already established working solutions. As seen on the right, we did a survey of multiple apps such as SeeSaw, which was successful in having a simpler, more enjoyable interface, as well as more accessible information. Our users generally favored the kanban board formula.
MAPPING OUR USERS
After collating our research, we generated two user personas, Jacob and Stephanie, a mother and son pair.
INFORMATION ARCHITECTURE AND STARTING FLOWS
We then solidified our goals and from there determined corressponding specific flows to build and showcase. Our goals were the following: to a. Centralize all information and incorporate predictable UI design patterns for a better user experience. b. Create a customizable dashboard and notification system where parents and students can decide what to prioritize. The features should tailor to the needs of the user to reduce stress and frustration. and c. Create an enjoyable interface and experience for both the student, parent and teacher.
With our goals in mind, we designed our rough starting user interface, and later the low-fi prototype of our 3 flows.
USABILITY TESTING AND HIGH-FI PROTOTYPES
After multiple usability testings, we tweaked our prototypes according to feedback. Users indicated our use for calendars was limited and suggested more effective ways to utilize both personald and school events. Users also suggested relevant mental models for already established flows in school such as sending attachments, pinning messages, and utilizing third person apps (such as zoom, or google drive). When presenting our starting homepage, feedback regarding font, color contrast, mood, and visibility was also taken into account.
︎︎︎
Building for Health and Well-Being
A conference on the intersection of the built environment and general wellnessTIMELINE
January 2021 to March 2021
(10 weeks)
January 2021 to March 2021
(10 weeks)
ROLES &SKILLS
Branding
Layout
Branding
Layout
PROJECT TYPE
Solo
Solo
CHALLENGE
The 2016 ACSA/ASPPH Fall Conference, "Building for Health and Well-Being" is an architecture conference that aims to present issues at the intersection of design, the built environment and public health at all scales— from materials to buildings to landscapes to urban and social systems. However, current marketing collateral does not span multiple platforms, nor does the visual design fully resonate with the target audience. How might we rebrand the conference to not only reflect the essence of their advocacies but to increase engagement, legibility, and cohesion?
SOLUTION
By taking note of the original design's intent, a flexible design system was created based on the concepts of "well-being" and "structure." Original collateral's type treatment conformed to an obvious grid ("structure"), while being balanced by friendly ("well-being") gradients and topography-inspired graphics. These three elements were further improved upon to create a welcoming rebrand across print, wayfinding, and social media materials. The tone of the rebrand is refreshingly pleasant and friendly.
BACKGROUND
The Association of Collegiate Schools of Architecture (ACSA) is an international association of architecture schools advocating for accessible education for future designers and architects. With an overarching goal of engaging students with the realities of a dynamic world, ACSA offers a multitude of conferences covering architecture’s intersection with sustainability, accessibility, mental health, education, community, social change, climate change, and adjacent design disciplines.
AUDIENCE
ACSA’s conferences are generally targeted towards, but not limited to, students, prospective students, and new graduates in architecture and various design and public health disciplines. Majority of their conferences have been branded to be lively and eye-catching for a younger and more tech-savvy demographic.
PROCESS
Broken into five steps enumerated above, I was guided by original collateral while later developing my individual moodboards.
CONCEPT
The underlying idea is to portray a visual metaphor of the conference’s essence: the intersection of the built environment with well-being. I interpreted build environment as stability and structure, mirrored by a grid-based type treatment, and well-being as a sense of openness and lightness, as shown by the use of gradients and vibrant colors. A central graphic that is reminiscent of a topography map is used to tie all the elements together, to give a sense of connection as well as an ode to architectural site plans. This visual metaphor, whether intentionally or unintentionally, seems vaguely present in their current branding as well.
︎︎︎
Kagubatan.phTIMELINE
September 2021 to November 2021
(8 weeks)
September 2021 to November 2021
(8 weeks)
ROLES & SKILLS
Art Direction
Web Design
Illustration
HTML/CSS
Art Direction
Web Design
Illustration
HTML/CSS
PROJECT TYPE
Client (Gab Mejia)
Client (Gab Mejia)
COLLABORATER
Justin Leung
Justin Leung
KAGUBATAN OVERVIEW
Kagubatan is a youth-led forest conservation multimedia art exhibit that aims to culminate and empower local storytellers, artists, and conservationists in the Philippines through a series of online educational webinar programs named ‘Conservation Conversation’ an inclusive and immersive virtual reality forest exhibit.
This project integrates both technology and art to immerse, educate, and bring forth support to stop the deforestation, to reforest, and to conserve the major Marikina Ipo watershed that provides water, biodiversity, and life to millions of Filipinos living in Metro Manila, Philippines. This project consists of a shop, instagram, virtual reality experience, and gallery website. Visit the live gallery website here.
GOALS
To design and develop a unique gallery experience that guides the viewer into an immersive journey through the Philippine forests, while integrating showcased artworks.
Alongside this, to design multiple pages (working within the client’s established branding) that showcase the individual artists.
CONCEPT
The landing page of the website serves as the full gallery, and is intended to bring the viewer through 3 distinct Philippine forest ecosystems: Wetland Forests, Agroforests, Montane Forest. Colors are specific to morning, sunset, and evening to give the illusion of time passing.
The landing page of the website serves as the full gallery, and is intended to bring the viewer through 3 distinct Philippine forest ecosystems: Wetland Forests, Agroforests, Montane Forest. Colors are specific to morning, sunset, and evening to give the illusion of time passing.
PROCESS
As a team, we met with our client throughout the entire process to lay down expectations and limitations. The client had a specific goal which was to showcase 3 distinct forests integrated in one gallery experience. The method was up to us as a design team to bring his vision tangibly and effectively to life on the 2D screen. We primarily used a combination of detailed illustrations and slow parallax to give the intended sense of wonder and mystical whim. Intial pre-production process made use of concept boards inspired by already established parallax websites, storyboarding, and rough wireframing.
As a team, we met with our client throughout the entire process to lay down expectations and limitations. The client had a specific goal which was to showcase 3 distinct forests integrated in one gallery experience. The method was up to us as a design team to bring his vision tangibly and effectively to life on the 2D screen. We primarily used a combination of detailed illustrations and slow parallax to give the intended sense of wonder and mystical whim. Intial pre-production process made use of concept boards inspired by already established parallax websites, storyboarding, and rough wireframing.