Request a project consultation Skip to project introduction
The first scene in Proposal A, an orange ribbon passing over Seoul during blue hour.
ATHE RIGHT CONNECTION
First scene in B, brass key approaching the door
BYOUR NEXT KEY

CEO MESSAGEIn the representative greeting of the original site, there is a promise: "We will be your Next Key"

If you add Your in front of Y · N · K, the initials will be the same as company name

#F16022The orange used in the buttons and highlighted letters on the original site,
the two design proposals started with this color

TWO DIRECTIONSWhen you open the door, there are
two paths

YNK ASSOCIATES · WEBSITE RENEWAL PROPOSAL

The door where talent and companies meet,Open in two ways

YNK Associates homepage renewal proposal
THE RIGHT CONNECTION · YOUR NEXT KEY two directions

Start search
STEP 01 / CLIENT ORDERRequest

A company that searches for talent and joins the company,
The first screen that shows the work

YNK Associates is an Executive Search Firm located in Seoul. We focus on headhunting to find and recommend key talent that companies are looking for, as well as reputation checks to check the job performance and attitude of applicants before hiring, and HR consulting to enhance the organization's capabilities.

BlueCanvas proposed two directions for redesigning the company's website. THE RIGHT CONNECTION, which shows the connection with the orange ribbon that connects people and possibilities, and YOUR NEXT KEY, which tells the story of the company with the key that opens the door. This page organizes the process of coming up with two design proposals according to the seven stages in which YNK searches for talent.

CLIENT
YNK Associates
YNK Associates Co., Ltd.
SECTOR
Executive Search · Reputation Search
HR Consulting
OUR ROLE
Research, brand interpretation, information structure,
UI design, motion graphics, image direction
DELIVERABLE
2 main design proposals, mobile screen,
common GNB, footer, reception window, 3D motion part 2
  • 3Headhunting · Reputation inquiry · HR consulting
  • 7Search stage from recruitment request to follow-up management
  • 2Two visitors to the homepage, a company and a candidate
  • 0wonService costs borne by the candidate

SEVEN STEPS

This page follows YNK's search steps

The order in which a headhunter searches for talent and the order in which a website is renewed are more similar than you might think. We receive requests, select talent, search for them, recommend them, verify them, and then make suggestions.

  1. 01CLIENT ORDER
    In YNK
    Recruitment requests and position sharing
    In this project
    I looked at the company and its current website.
  2. 02JOB DESCRIPTION
    In YNK
    Definition of job and talent
    In this project
    I first wrote down what the new website should do.
  3. 03SEARCH
    In YNK
    Search with data and networks
    In this project
    I found the company's words and colors on the original site.
  4. 04PRESENTATION
    In YNK
    Recommend suitable candidates
    In this project
    We created two design proposals and recommended them.
  5. 05INTERVIEW
    In YNK
    Schedule management and information provision
    In this project
    I asked why key scenes move the way they do.
  6. 06OFFER
    In YNK
    Negotiating Treatment and Working Conditions
    In this project
    We have summarized the differences between the two directions and the confirmed items.
  7. 07FOLLOW-UP
    In YNK
    Post-employment management and career consulting
    In this project
    We'll guide you through the next steps we'll take together.
STEP 02 / JOB DESCRIPTIONImage of Talent

Composition of the existing main screen
  1. 1There are six menus from ABOUT US to CONTACT US.
  2. 2There is the phrase CREATING VALUE on the left side of the first screen, and three photos that change sequentially on the right side.
  3. 3For job postings and columns, the title is truncated and only a few lines are visible.
  4. 4Next to the quick menu is a small key icon.

JOB DESCRIPTION

I wrote the
job description for the new website first.

Just as a headhunter writes a job description before finding a talent, I first wrote down what the new website should do before starting design. Both designs were created based on this technical document.

JOB DESCRIPTIONNo. YNK-WEB-01
position
YNK Associates website
working environment
PC · Tablet · Mobile phone
people you meet
Corporate recruiters, candidates looking for their next position

Main tasks

  1. We welcome companies and candidates with equal weight.

    From the first screen, both visitors can enter their respective consultations directly.

  2. Take out the text in the image.

    All introductions, services, and guidance sentences are converted into text so that they can be searched and read on mobile phones.

  3. It starts from the words and colors used by the company.

    Words from the original site, such as Next Key, Moon, and Success Partner, and the color orange are used as design materials.

  4. I bring the accumulated writings to the front.

    You can see job postings and the column “Conversation over a Cup of Tea” right on the main screen.

preferential treatment

  1. Even in the motion reduction setting, everything is shown in order.

    Turn off static scenes and videos, allowing the same content to be read from top to bottom.

Check requirements0 / 5
STEP 03 / SEARCH · SCENESMood Board

I took a picture of the clue as a scene
first

We selected words such as connection, key, door, and conversation from the five clues, and created images of scenes that fit each word. This is to convey the atmosphere of a company that connects people and companies even without actual portraits. The scenes used in the two designs and the scenes created during the exploration stage were placed together.

  1. A strand of orange thread is pulled taut between two pins. The connections between people and businesses are drawn in the simplest shapes.
    01CONNECTIONConnectionExploration phase
  2. An orange ribbon passes over Seoul during blue hour. This is a scene where one connection extends across the entire city.
    02PERSPECTIVEViewProposal A · First screen
  3. It is a 3D ribbon that continues uninterrupted. It scrolls along showing the three stages of the connection.
    03MOTIONMotionProposal A · Connection scene
  4. Two people talk in a sunny office. Good connections start with listening well.
    04CONVERSATIONDialogueProposal A · Dialogue scene
  5. Of the seven keys of different shapes, only one receives light. It was about finding the right person.
    05SEARCHSearchSearch phase
  6. It is a brass key with a clover-shaped head. In the first scene, it gets stuck in a door and turns around.
    06KEYKeyProposal B · First scene
  7. A person stands in front of a bronze door through which light leaks. This is the moment right before entering the next stage.
    07THRESHOLDThresholdProposal B · Success Partner
  8. Orange light leaks through the slightly open door. This is a scene where the colors and stories of the two designs meet.
    08DOORstatementExploration phase
  9. Two chairs are placed facing each other in the consultation room facing the night view of Seoul. This is the first meeting between the company and the candidate.
    09INTERVIEWInterviewExploration Phase
  10. We talk about our careers over a teacup. The column “Conversation over a Cup of Tea” has been translated into scenes.
    10TEA TIMEA cup of teaProposal B · Column
  11. A key is placed on a table with a night view. In the final scene, you encounter the key from the first scene again.
    11ON THE TABLETableProposal B · Last scene
STEP 03 / SEARCH · COLORColor Chart

From one orange
to two temperatures

The orange #F16022 used in the buttons and highlighted text on the original site was used as the standard. If you move to the red side and increase the saturation, it becomes vermilion in A, and if you lower the brightness and saturation, it becomes Amber in B. Proposal A placed this color on top of Blue Hour Charcoal, and Proposal B placed it between brass and espresso black.

Move to red and increase saturationVermilion#FF5A36H 11° · S 100% · L 61%Proposal A · Ribbon, button, period
ReferenceYNK Orange#F16022H 18° · S 88% · L 54%Buttons and highlighted text on the original site
Reduce brightness and saturationEmber#C8501AH 19° · S 77% · L 44%B · Buttons and emphasized words

A · THE RIGHT CONNECTION

Blue Hour Charcoal and Vermilion

  • Background · 44%It is a deep charcoal like the architecture of the blue hour. I take on the darkness above the first screen, connection scene, and final consultation information.

  • Paper · 38%This is the basis for introduction, services, and recruitment information. It was made one tone lower than white to make it look like paper.

  • Connection · 9%The color of the original site is shifted from orange to red. Use only on ribbons, buttons, and periods in titles.

  • Second side · 6%This is the second side of the service card. I made it one tone lower than the paper to distinguish the background from the card.

  • Supplementary Sentence · 3%Color of auxiliary sentences and captions on a light background.

B · YOUR NEXT KEY

Espresso Black and Brass

  • Darkness · 46%This is the darkness where the key and door lie. It is the basis for the first scene, service, search process, and column scenes.

  • Paper · 30%This is the basis for the company introduction, principles, and promise card.

  • Key · 10%The key is brass colored. Use for numbers, labels, and line drawings.

  • Ember · 8%This is a color that reduces the orange of the original site to resemble an ember. Write only on buttons and highlighted words.

  • Supplementary sentence · 6%This is the color of the secondary sentence on a light background.

Clicking on a color swatch will copy the HEX value. The numbers in the sample are the contrast in brightness with the color of the text above them.

STEP 03 / SEARCH · TYPEFont

The same company
with two voices

Proposal A had both the English title and Korean text written in one pretendard. The English title, which has a thickness of 500, was narrowed down to -6.5% letter spacing and erected tightly like the title of an architecture magazine. Proposal B used Instrument Serif italics for the English title and set the Korean title to Pretendard. Italics, as if written with a pen, create a classic atmosphere for keys and doors.

Pretendard 500 · Proposal A titleSpace 0%

THE RIGHT
CONNECTION.

Instrument Serif Italic · Proposal B titleY · N · K

Your Next Key

The initials of the three words were painted in brass color so that the company name YNK was read first.

Pretendard · Proposal A Hangul500 · Letter spacing -6.5%

We see possibilities beyond the resume.

Proposal A uses the same thickness and letter spacing for the Korean title so that it can be read as one piece with the English title.

Pretendard · Proposal B Hangul700

There is a door where the best talent and the best company meet.

In Proposal B, only one word is colored in amber to point out the key word in the sentence.

Instrument Serif · Number in Btabular

0Won7 Steps5 Steps

Candidate service cost, search stage, and reputation inquiry stage are organized in serif numbers.

STEP 03 / SEARCH · SYSTEMCommon UI

Only the main screen is different,
the rest is the same

When comparing the two design proposals, so that differences in menus or application methods did not cloud the judgment, the GNB, footer, and consultation application window were created in one common file so that the two design proposals could be used together. When a menu or reception window is opened, page scrolling is locked, and in Proposal B, smooth scrolling also stops. Classes and variables in common files were prefixed with ynk- to prevent them from mixing with the styles in the design.

  • header.phpCommon GNB

    There is a logo, four menus, and a submit button. The text color changes depending on whether the scene below is dark or light.

  • A · THE RIGHT CONNECTIONmain screen

    This is the only different floor in the two designs. Only the first screen and scenes change between the same menu and the same reception window.

  • footer.php · apply.phpCommon footer and reception window

    There are two types of reception windows: a footer and a floating consultation button, career consultation and corporate recruitment consultation.

ONE FORM, TWO VISITORS

One reception window for two visitors

The reception desk is divided into two types: career counseling and corporate recruitment counseling. The design submission window does not save the design on the server, but rather checks the name, email, and consultation details and then forwards the draft to an email app. You can see how the email subject is created by putting your name on the right.

A NEW POSSIBILITY

Please tell us the next story.

Preview of email subject[YNK Career Counseling] Request for consultation from your nameRecipient: YNK Recruitment Manager Email · Not sent from this screen
STEP 04 / PRESENTATIONRecommended

After searching, I recommended
Two Directions

There is a design proposal read by connecting the five clues and a design proposal read by a key. The recording below is a screen that scrolls the main pages of the two designs from top to bottom. When you press a scene name, both your PC screen and your phone screen will move to that scene.

Proposal A

THE RIGHT CONNECTIONConnecting people. open up possibilities

It is a direction that shows the connection between people and businesses with a single orange ribbon. Starting from the first screen where a ribbon passes over Seoul at Blue Hour, the 3D ribbon that scrolls shows the three steps of understanding, connecting, and moving forward. The service is organized into three cards that are flipped horizontally.

  • Home screen with Seoul at Blue Hour and orange ribbon
  • 3D ribbon and three steps that rotate along the scroll
  • Three service cards flipped horizontally
  • Consultation information that ends in orange on the screen
Pretendard
DIRECTION NOTES

Among the scenes in Proposal A, I chose a moment that I put a lot of effort into directing. Click on the photo to see a larger view of each scene.

  1. THE RIGHT CONNECTION.

    An orange ribbon passes over Seoul during Blue Hour, and a large English title fills the left side of the screen.

  2. 01 · Possibilities beyond resume

    The first sentence containing the company's thoughts is filled with font colors in order as you scroll.

  3. 02 · UNDERSTAND

    A 3D ribbon scrolls to demonstrate understanding, the first step in connection.

  4. 02 · CONNECT

    It depicts the moment when the ribbons intersect and connect people and opportunities.

  5. 02 · MOVE FORWARD

    In the final step, the ribbon changes shape to extend forward.

  6. 03 · Your next. Our expertise.

    Vertical scrolling changes to horizontal movement, and three service cards pass one by one.

  7. HUMAN FIRST

    Introducing the attitude of “I listen to you before I look for the answer” along with pictures of the conversation.

  8. NEXT STARTS HERE.

    Career counseling and corporate recruitment counseling are provided side by side in an orange color that fills the screen.

Proposal B

Your Next KeyThe key to open your next stage

This is a direction that translates the introductory sentence of the original site, “We open the door for the best talent and the best company to meet,” into a scene. In the first screen, a brass key is inserted into the door and turned, the door opens and the screen brightens. The photo of the door opening in the shape of a keyhole, the four principles that turn like a dial, and the search process where the two paths of the company and the candidate meet in the interview follow one after another.

  • 180 frames of 3D key film that scrolls
  • Photo of a doorway that opens in the shape of a keyhole
  • Four principles that turn one step at a time like a dial
  • Main page translated from recruitment posts and column “Conversation over a Cup of Tea”
Instrument Serif · Pretendard
DIRECTION NOTES

Among the scenes in Proposal B, I chose a moment that I put a lot of effort into directing. Click on the photo to see a larger view of each scene.

  1. Your Next Key

    The brass key on the first screen is drawn with 180 frames, and moves towards the door when you scroll down.

  2. 01 · The Door

    As the key approaches the door, the phrase “The door where the best talent and the best company meet” is placed.

  3. 02 · The Way

    The key turns in the keyhole, and light leaks through the crack in the door.

  4. Your Success Partner

    Words to the company and words to the candidate are placed on both sides of the keyhole-shaped window.

  5. The best talent and the best company

    When the keyhole expands to fill the screen, the back of the person standing in front of the bronze door is revealed.

  6. 02 · Our Services

    Executive Search, Reference Check, and HR Consulting cards are stacked and drawn with line drawings.

  7. 03 · The YNK Way

    The four principles are adjusted one by one, like a dial.

  8. 04 · Steps for Search

    The two paths of the company and the candidate merge into one during the interview.

STEP 05 / INTERVIEWVerification

In each key scene, we asked
why it moves like that

We decided to use movement only to convey the company's message. We selected key scenes from the two designs, asked why they moved the way they did, and organized the answers. You can move the scenes within the card directly by scrolling or tapping on this page as well.

3D ribbon inside A that rotates along the scroll01 UNDERSTAND
A · CONNECTION IN MOTION

Q.Why does the ribbon never break?

A.Contains the idea that connection has no beginning or end. The ribbon spins uninterruptedly along the torus knot curve, displaying one frame of an 8-second scene at the scroll position. Every frame is encoded as a keyframe so it responds immediately even when you scroll upside down.

3D key film in B that scrollsF 001 / 180
B · YOUR NEXT KEY FILM

Q.Why does the key open the door on the first screen?

A.There is a gold key in the middle of the introduction diagram on the original site, and next to it is the sentence, “We open the door for the best talent and the best company to meet.” These two were combined into one first scene. The key, bronze door, and door cracks where light leaks were created directly using Three.js and rendered in 180 frames. When you scroll down, the key rotates, and when you scroll up, it returns.

A · OUR EXPERTISE

Q.Why are services flipped horizontally?

A.I placed the three services side by side on cards of the same size so that none seemed less important. On a PC, vertical scrolling changes to horizontal movement to pass cards one by one, and on a mobile phone, you swipe with your finger or use the arrow buttons.

Photo of a doorway that opens in the shape of a keyhole
B · YOUR SUCCESS PARTNER

Q.Why does the photo open in the shape of a keyhole?

A.This is because it shows the inside of the open door in the first scene. When the keyhole-shaped window expands to fill the screen, the back of the person standing in front of the bronze door is revealed, and on either side of the window are words to the company and words to the candidate.

A · OUR BELIEF

Q.Why are the font colors filled in order in the first sentence?

A.This is to match the reading speed of the sentence “We see possibilities beyond the resume.” The text becomes darker as you scroll, allowing visitors to read the company's thoughts word by word.

01 / 04Thoughtful Planning

First understand the role of the position and the direction of the organization, and then develop a search strategy appropriate for it.

B · THE YNK WAY

Q.Why do the four principles turn on a dial?

A.The title of the principle scene in Proposal B is “Four principles create one result.” A keyhole was placed in the center of the dial, and the four numbers from Thoughtful Planning to Our Guarantee were rotated one by one. The left dial can be turned directly by pressing the button.

FOR EMPLOYERS

FOR CANDIDATES

  1. Client OrderRecruitment request and position sharing
  2. Job DescriptionDefinition of job and talent
  3. SearchSearch with data and network
  4. PresentationRecommend suitable candidates
  1. Register resumeSave to YNK database
  2. Career consultationExperience, desired salary and place of work
  3. InformationWorking environment, salary, prospects
  4. Write a letter of recommendationRecommend after agreeing with the candidate
  1. InterviewSchedule management and information provision
  2. Offer & ContractNegotiation of treatment and working conditions
  3. Follow-upPost-employment management and career consulting
B · STEPS FOR SEARCH

Q.Why does the search process start in two ways?

A.This is because companies and candidates start from different places. The steps that were divided in the For Employers and For Candidates guide on the original site were drawn into two lines, and the two lines met at the interview, leading to a contract and follow-up management. The seven steps followed by these pages are also taken from the upper line, the process of enterprise.

STEP 05 / INTERVIEW · MOBILEMobile

Even in your hand
the same door opens

Checking job openings and sending resumes often starts on your phone. In both designs, the mobile phone screen was designed separately. The key film in Proposal B renders the frame for the vertical screen separately, and the service card in Proposal A and the column list in Proposal B are flipped with your fingers.

Proposal A · Home screen Mobile screen
A · Home screen
Proposal B · Home screen Mobile screen
B · Home screen
Proposal A · 3D Ribbon Mobile Screen
A · 3D Ribbon
Proposal B · Keyhole window mobile screen
B · Keyhole window
Proposal A · Service card mobile screen
A·Service Card
Proposal B · Four principles mobile screen
B · Four principles
Proposal A · Consultation Guide Mobile Screen
A · Consultation information
Proposal B · Last scene mobile screen
B · Last scene
STEP 06 / OFFERSuggestion

Two ways to introduce the same company

The two designs introduce the same company, but differ in what they say first on the first screen. We've organized the differences so you can choose based on what your company wants to say to visitors first.

SectionA · THE RIGHT CONNECTIONB · YOUR NEXT KEY
Home pageBlue hour Seoul and orange ribbon, THE RIGHT CONNECTION.Brass key turning on the door, 180 frame scrolling film
How to read the five cluesConnection: The line connecting people and possibilitiesKey: The door to the next stage
ColorCharcoal · Bone · VermillionEspresso Black · Paper · Brass · Amber
TypefacePretendardInstrument Serif Italic · Pretendard
ServiceThree cards flipped horizontallyStacked cards and line drawing
The company's attitude「Before looking for the answer, we listen to you」 conversation sceneFour principles (THE YNK WAY) and two promises
Job informationLink to job board from list by fieldPosition cards on bulletin board flow in two lines
ColumnNot coveredList that flips horizontally on “Conversation over a Cup of Tea”
Enter counselingCareer counseling · Corporate recruitment counselingRegister resume · Request recruitment
Place of weightProfessional service introduction and consultation entryThe company's story and accumulated content

REFERENCE CHECK

I checked the two designs several times, as if checking reputation.

YNK verifies the reputation of candidates before deciding to hire them. Both designs were confirmed to be identical before being sent to the customer.

  1. 01screen width

    We confirmed that the page does not spill horizontally on PC, tablet, and phone screens.

  2. 02Reduce motion

    The Reduce Motion setting turns off static scenes and videos and shows everything in order.

  3. 03keyboard

    The menu and reception window are closed with ESC, and after closing, the focus returns to the first button pressed.

  4. 04Confirm receipt

    The reception window opens the email app only after confirming your name, email address, and consultation details.

  5. 05font size

    The common GNB, footer, and auxiliary text in the reception window were all set to 14px or larger.

  6. 06Job information

    You are instructed to check the recruitment bulletin board to see if you are recruiting, and the registration date is written on the position card in Proposal B.

STEP 07 / FOLLOW-UPNext
PROJECT SHEETWEBSITE RENEWAL PROPOSAL
Client
YNK Associates
Project
website renewal proposal October 2026
Research
Company introduction, services, candidate and company information, bulletin board materials organized
Brand Reading
Representative greeting and introduction chart interpretation, five clues and mood board
Structure
Main configuration based on two visitors and search stages
Direction A
THE RIGHT CONNECTION · UI design, 3D ribbon motion
Direction B
YOUR NEXT KEY · UI design, 3D key film
Shared UI
GNB · Footer · Reception window Common files and event rules
Typefaces
Pretendard · Instrument Serif
Studio
BlueCanvas
THE NEXT DOOR

What are thekeysto your company?

The homepage is where people who work with you meet the company for the first time.
Starting from the words and colors that the company has already used, we will work together to find a screen that best conveys those words.

Talk about the project View other portfolios

other projects

    Contact

    A rough idea is a good place to start.
    Let’s shape your project together

    Tell us where you are and what you want to achieve. We’ll outline a practical scope, process, and estimated budget.

    DIRECT

    opci1004@gmail.com KakaoTalk @bluecvs

    4 questions · about 2 minutes

    Scope

    What would you like to work on together?

    Select as many as apply. If you are not sure yet, choose “Other”.

    Budget

    What budget range do you have in mind?

    Even a rough range helps us shape the proposal.

    Project details

    Tell us where you are right now.

    It does not need to be polished. Tap an item below and the outline is filled in for you.

    0

    Upload up to 2 RFPs or reference files. Supported: PDF, PPT, Word, Excel, JPG, PNG, ZIP

    Contact

    Where should we reply?

    This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

    Scope, budget, project details and contact information are required.