PURME FOUNDATION · WEBSITE RENEWAL PROPOSAL
Purme Foundation homepage renewal proposal
Brand interpretation, information structure, UI design, accessibility
Purme Foundation is a non-profit foundation that has been helping people with disabilities achieve rehabilitation and independence since 2005. As the number of places managed by the foundation has increased, including children's rehabilitation hospitals, developmental rehabilitation centers, welfare centers, and social farms, the stories that the website has to tell have also increased.
While BlueCanvas was creating and operating the Purme Foundation website, we thought about the direction of renewal and what the next website should look like. This page is a record of the proposal and process.
Purme Foundation homepage in operationIt started from the numbers the foundation had built up.
The year the foundation was founded with permission from the Ministry of Health and Welfare.
Persons with disabilities and their families who gained the strength to live a normal life
Sponsors who share for the disabled and their families
Korea Guide Star public interest corporation evaluation
Highest grade
Number source: Purme Foundation website public data
people Purme Foundation On the website what to do Shall we come? first Sponsorship determined person, the receipt necessary long time sponsor, and To the child fit support looking for family there is. same first on the screen count person each of their own the road as soon as find number Must be I did it.
Six institutions and four business areas, including hospitals, centers, welfare centers, social farms, sports centers, and libraries, were being introduced in their own languages. It was difficult for a first-time visitor to say in one sentence what this foundation does.
Tying into one story from a tree to a forestThere were many entrances, including regular and one-time donations, different pages for each campaign, corporate social contribution, small donations, and anniversary donations. First-time sponsors may be confused about where to start.
One entrance, three choicesThe foundation's mission is to lead social change so that people with disabilities can enjoy normal lives. Although the screen depicting a sad story could move one's heart, it was far from the ordinary life that the foundation describes.
Not as a pitiful protagonist, but as a person living each day.Instead of dividing visitors by age or gender, we divided them by reason for coming to the website. Because if the reasons are different, what you should look at first is also different.
Can this foundation be trusted?
In Design Find the sponsorship that’s right for you
Where did my support reach?
In the design, My donation details/receipt
Is there any support my child can receive?
In the design, Distribution notification and application information
“It symbolizes a young sprout growing into a strong tree and forming a green forest.”Purme Foundation CI Introduction
Every day spent in the treatment room grows sprouts.
You spend your day doing your part at work and learning.
A neighborhood where the barrier between disabled and non-disabled people is lowered becomes a forest.
Instead of asking for help, say
Let’s grow together.
Call “child” before “disabled child.” Disability is just one of many facts that describe a person.
Instead of vague hope, it shows in detail how support can change things, like continuing treatment or going to work every day.
There is no division into those who help and those who are helped. We also call our sponsors neighbors who grow the forest together.
The website photo first shows the foundation's attitude. Instead of putting the faces of the child and family first, we set the standard for telling the story through hands, steps, and a day in the sunlight.
Purme Foundation's blue symbolizes health and hope. Instead of changing the blue, I added a color to the bud to mark the moment it grows.
CI blue is used for symbols, major buttons, and links. I inherited it without changing it.
Background for body text and dark scenes. It connects with blue more softly than black.
I only write in places where participation is encouraged. Text is always posted in navy.
Write on a wide background and card to give the screen room to breathe.
I use very little in places where I express my feelings, such as campaigns and thank-you notes.
It is a basic base that is easier on the eyes than pure white. Photos and cards are placed on top of it.
The background and text take up most of the screen, blue is placed only in places that promote the brand, and lime is only placed in places that encourage action. If you set the ratio, the overall impression of the website will not change even if the campaign increases.
We simulated what the screen would look like to someone with color blindness. Blue and lime have a large difference in brightness, so they can be distinguished under any condition, and important information, such as application status, is written in letters with color.
A typical
day
The CI introduction states, “The straight, smooth font signifies an honest and transparent donation culture.” On the web, the Pretendard family has been organized from title to text with the same impression.
At the top of the design, there is a button to change the font size to three levels. All sizes are calculated based on the same standard, so as the text gets bigger, the line spacing and buttons also get bigger.
We provide financial support to purchase necessary assistive devices. Please check your eligibility and prepare the documents.
See how to apply →The circle represents people and hearts, and the stem represents the time of growth. By creating a photo frame, numbers, icons, and patterns using just two shapes, we made Purme Foundation recognizable on any screen.
Even if you start with the same facts and the same palette, the personality of the website varies greatly depending on what you show first. I drew the main page to the end in four directions: the language of symbols, a person's day, the number of trust, and the energy of participation.
The screen below is the actual design draft. When you scroll down, the main page in each design moves from top to bottom.
The three trees of the symbol have been expanded to include the language of the entire website. The circle becomes a frame to hold photos and numbers, and the stem becomes a line that connects the story.
The goal is to follow the day-to-day lives of people with disabilities and their families, as if reading a magazine. The big Myeongjo title and documentary photos tell the story first.
The reason for deciding to sponsor started with trust. Like an annual report, numbers and the flow of time are placed on the first screen.
We transferred the energy of Purme Run to the entire website. The curves of the track and large letters invite the viewer to participate.
The four design proposals were evaluated together based on six criteria. The most important criterion was whether families needing support could find their way through the first screen. This is because among the people who visit the foundation's website, they are the most urgent.
Photography standards and story cards
Transparent management area that puts numbers first
Campaign Page Energy
The advantages of the design proposal that were not adopted were not discarded and were transplanted into A.
We have gathered all the scattered sponsorships into one and organized them so that you can proceed to the application form by simply selecting the method, amount, and place to donate your heart. You can view it by pressing it directly on the right screen.
The menu name was changed to more closely reflect the purpose of the visitor rather than the organization chart of the institution. 「Data Center」 was changed to 「Story」, a collection of people's stories, and 「Participation」 was changed to 「Together」, meaning to be together.
Distribution notification · Application guide · Easy article guide
Any foundation that talks about the ordinary lives of people with disabilities must be able to use its website, starting from the website. Before starting design, we first set accessibility standards and checked all design proposals against those standards.
The text and background must be 4.5:1 or higher.
You can even apply for sponsorship without a mouse, and you can clearly see your current location.
For each photo, a text is written to describe the scene, and the story is told through a screen reader.
Even if you increase it to three levels, the lines will not overflow or the buttons will not overlap.
Turning on Reduce Motion on your device will stop the decoration animation.
Application notices are also provided in sentences that are easy for people with developmental disabilities and their families to read.
We provide support for the purchase of assistive devices necessary for the rehabilitation of disabled children and adolescents. After checking the application qualifications and documents to be submitted, please submit the application form and supporting documents within the designated period. The selection results will be announced in the distribution notice.
This is an example phrase. Easy writing is based on the principles of short sentences, one piece of information per sentence, and picture numbers.
Buttons and tags, cards and even number trees. We organized it into parts so that the same screen can be created even if the person in charge of the campaign changes.
A campaign name, a representative scene in a circle, a one-sentence promise, and a participation button. As long as the four positions are maintained, it can be read as a campaign from one foundation even if the colors and pictures are different.
So that children do not stop receiving rehabilitation treatment.
Join us for 10,000 won every monthEvery day you go to work, you become independent.
Support Good JobA small piggy bank nurtures a child's dreams.
Start with 5,000 won per monthThe day when my anniversary becomes someone's miracle.
Share your anniversaryEven if you run differently,
to the same finish line.
In many cases, the first place you open a website is your mobile phone. On small screens, the three paths are placed directly below the first screen, and the sponsorship button is placed at the bottom right, where the thumb can reach.
The Purme Foundation website continues to operate in its current structure, and BlueCanvas continues to manage campaigns, announcements, and sponsorship pages.
The questions raised during the proposal process still serve as operational standards. Start by asking who comes to this screen, what needs to be shown first, and what you need to make sure no one gets lost.
Campaign banners, distribution notices, and even transparent management numbers. News from the foundation is constantly updated here.
Visit purme.orgThe homepages of foundations, public institutions, and non-profit organizations are used by all sponsors, users, and employees.
Let's start with who is coming.
Architecture · Interior
ZIUMN
The build process of an architecture brand website, from the brand’s attitude to its olive color and typefaces, four proposals and scroll interactions.
Medical · Brand
UVDRK
The design process of a medical aesthetics brand website, from reading the name to color and motion rules and three proposals.
Public institution
Korea Drug Development Fund
The build and renewal process of a public institution’s website, from user analysis and CI interpretation to nine main-page proposals and pipeline visualization.
Contact
Tell us where you are and what you want to achieve. We’ll outline a practical scope, process, and estimated budget.
DIRECT
Your inquiry has been received. We will reply within one business day with a scope and an estimate.