Clowns in the Sky
Bringing smiles to children with illness and their families
I was tasked to redesign the UI of a children's charity Clowns in the Sky to reflect the brand mission and facilitate easier donation & support for affected families.
I improved information architecture and effectively conveyed the optimistic brand image through the use of bright colours, friendly typography and irregular shapes.
I finished a responsive design by utilising competitive analysis, mood board, image strategy, style guide and design system.
Concept project
Solo project
Visual design, wireframing prototyping, information architecture
Figma, Procreate
1 week
Key Screens
A Chaotically Happy Site
Clowns in the Sky is a charity supporting children with brain tumour by funding children’s entertainers, portable trolleys, financial support for families and research.
Their website clearly conveys a happy feeling through the colours and childlike images. However, The UI does not deliver a clear brand identity or mission and the information architecture fails to push their priorities and key CTAs.
A redesign is needed to effectively convey the story and purposes of the charity while keeping it close to the brand image so more smiles can be brought to sick children and their families.
Defining the Scope
Although it’s a UI project without solid user research findings, some research was still needed to form assumptions of the target audience and business needs to inform design decisions.
People wishing to donate and families seeking help
Primarily to raise funds and secondly to provide support
Optimistic & playful based on current branding & founding story. This is a USP
Getting the Mood There
How can the site feel playful while emphasising the brand images and missions? I reviewed a few competitor sites including the Brain Tumour Society and Rays of Sunshine and applied inspirations to my mood board to help me visualise key elements.
Competitive Analysis
Mood Board
Visual Design
Design strategy: empathetic& playful
Element
Irregular & geometric shapes
Rationale
The biggest visual element is the hand-drawn quality, which was inspired by the button shapes and typeface utilised by the Brain Tumour Society.
To evoke a sense of connection with the children, I incorporated the irregularity to edges of buttons, shapes and images.
The hand-drawn quality was combined with geometrical shapes, often associated with early childhood education and utilised in children’s space like hospitals. It also resonates with the use of shapes in clown face painting.
Design strategy: On brand, happy, inclusive
Element
Playful colour palette
Rationale
I chose pink, yellow, green and blue to carry the branding while adding a sense of warmness and gender neutrality.
I decided to change the brand colour as the combination of pink and purple was not coordinated or accessible if used as foreground and background.
Design strategy: Modern, distinct, empathetic
Element
Fun typography
Rationale
The two distinct sans-serif typefaces complement the highly saturated colours and shapes, which also feel modern.
The handwritten Gochi Hand is used sparingly to add an accent for the Donate buttons to be the most prominent and impactful CTA buttons.
Design strategy: Joyful, premium, impactful
Element
Happy, hi-res, hero image
Rationale
High resolution images were chosen to create a premium look.
I also chose images showing happy faces of children to bring out the positive vibes.
Additionally, I made sure impactful hero image is visible within the fold, which proves effective in competitors' sites.
Getting the Content There
The current flow of the home page does not reflect the charity’s story or priorities and is presented in an illogical order with outdated, extraneous, and heavily text-based content increasing the cognitive load.
The simplified flow on the right only contained the key business segments with truncated texts. I also included a redesigned logo and a big bright “Donate” button at the top and reorganised footer at the bottom.
Responsive Design
While transforming the design to different viewports, I adjusted the image sizes, rearranged the layouts of cards and allowed for more breathing space.
Additionally, I tweaked the information architecture to present the key features in the menu in the medium and large viewports.
If I had more time, I would reconsider the layout of the large viewport as it feels somewhat empty according to peer feedback.
Final Design
Learnings
This was the first I used mood board. It saved so much time to make visual decisions as I can tease out themes and test colour/element combinations directly.
Be wild and take risks and bear in mind it’s always a process of testing.
Feedback is invaluable. I tweaked my designs according to peer and instructor feedback throughout the process. Always good to have fresh eyes and borrow collective wisdom.