The Schinzel-Giedion Syndrome Foundation

Project Type:
Web Design (UX/UI) & Branding

Industry:
Healthcare, childcare

Duration:
10 months (part-time/voluntary)

Project Overview

The Client:
A new UK registered charity patient organisation who aim to support children affected by Schinzel-Giedion Syndrome (SGS), a rare genetic disease that causes severe mental and physical disabilities whereby the typical life expectancy is only 4 years.

Brief:
To brand and design a website to represent the international SGS community, as nothing currently exists for this disease. This design is for the initial launch.

Main goals:

  • Encourage parents to enrol their children in the registry to help advance understanding of this rare genetic disorder and gather medical data
  • Spread awareness, research and knowledge of SGS
  • Provide communal support for families of children who suffer from SGS
  • Create medical and scientific partnerships

Target Audience:

  • Families affected by SGS
  • Medical professionals
  • General public willing to volunteer or donate

The Team:

  • Board of Trustees (6 mothers of children with SGS)
  • Amanda McGowen (web developer)

Software Used:
Figma, Photoshop, Illustrator, Zeplin

What I Did:

  • Analysis of similar charities
  • User Personas & Interviews
  • Sketches & Wireframes
  • Information Architecture (IA)
  • Branding , logo & icons
  • Creation of Design system
  • Web Design
  • Interactive Prototyping

Technical Limitations:
The site was built from a Bespoke Wordpress theme, which required limited page templates for quick dev turnaround. My knowledge of HTML + CSS allowed me to design simple layouts that were feasible with the framework structure.

Research & Planning

Analysis of Similar Charities

Key takeaways: For content aimed towards parents, we should be supportive, warm and welcoming. This includes being empathetic by making users feel like they can be part of a community and share real-life stories to raise awareness of SGS. For medical professionals, we should speak their language and be more concise and scientific, relying more on data visualisation and documented research. With all users, it is essential to always consider accessibility and usability, including legibility, clean layouts and clear navigation.

Identifying Target Audience with User Personas

Information Architecture (IA)

Online Card Sorting

I conducted this exercise with all members of the Board of Trustees as they represent the biggest segment of the target audience. Conducted online due to convenience of participants.

Sitemap

Understanding the differences and requirements of each user persona was essential to organising the overall structure of the website.

Wireframes

A small selection of low fidelity samples designed with a mobile-first approach for prototyping. The example below illustrates how an SGS Parent can read case studies of other parents and take further action by joining the registry or donating. Software used: Figma.

Step 1. Homepage

Step 2. Stories

Step 3. Selected Story

Step 4. Call to action

Step 4A. Join Registry

Step 4B. Donate

Branding & Design System

Logo & Design Process

I was asked to design an emotional logo that represents hope, positivity, support, growth and love. It shows a strong bond between a parent and baby, with the baby’s head looking upwards to show strength and positivity. A simple font was modified to be more rounded and sophisticated, adding a friendly and scientific feel.

Icon Designs

Consistently used thin and smooth strokes with rounded corners for a clean, modern and friendly approach. A minimalistic approach is used to make the icons easily recognisable.

Parent/carer

Medical Prof.

Enquiries

Donate

404/410

Join Registry

Privacy

Child's Birthday

Open

Close

Style of Imagery

I used real-life (non-stock) photography to show real symptoms of SGS children to give a true representation of the disease. SGS families let me use photos of their children. To show empathy to SGS families and the general public, I aimed to depict:

  1. Brightness and colour for a positive and uplifting mood
  2. Medical procedures to show the severity of SGS
  3. Medical equipment for medical professional users
  4. Family members supporting their SGS child, showing strength and hope
  5. Connections with other parents and children to show togetherness
  6. Trustees with their children to show how the organisation was formed by mother’s with children suffering from SGS coming together to help support the community

Design System

Colour Palette

Multiple variations of blue and purples are used across the site to create a comforting, uplifting and empathetic feel, whilst also representing both genders of children.

Purple: used for headings, text links and hero sections

Blue: used sparingly for primary CTA’s i.e.donations and registering

Grey: used to section content. Black: used for text

Red: used to clearly highlight form errors

Typography

Nunito (H1): a legible, friendly, rounded and web-safe font used to represent the friendliness of the SGS community as well as engage with parents with young children.

Muli (all other headings and character styles): is also a web-safe font that is a modern and minimalist to compliment Nunito.

Hero Image Modules

Includes photo captions of the child's name, to make clear that no stock photography is used and to create a sense of community, making the parents feel more involved. Photos were chosen to show real SGS symptoms.

As images are user-generated content some photos might be low res, so the hero container uses half the width for images on desktop view and simply stacks on mobile.

Buttons & Accordions

Accessibility Testing

Colour contrast

The contrast of colour combinations used with typography meet the recommended AA level standard of the Web Content Accessibility Guidelines (WCAG 2.0). This ensures legibility for those with low vision and requires a contrast score of at least 4.5 unless used for large font sizes.

In addition most colours even meet the next the challenging level standard of AAA for enhanced usability, which needs contrast with a score of at least 7.0.

Final Designs

Homepage

Introduces the user to who the organisation is and a mission statement. I lead with a hero image that instantly connects with people in the user personas: SGS families, medical professionals and parents with healthy children.

Family Stories

Dedicated to SGS Families who can read case studies on other families affected by the disease and feel like they can relate. The blue sections at the end of each page act as a call-to-action to show how these parents can either join the community or contribute and raise awareness.

Join the Registry

This page invites parents/carers to enrol and provide medical data of SGS children, allowing researchers to analyse patterns and gain a better understanding of this rare disease. A clear ‘Register My Interest’ button takes the user further down the page to a simple multi-step form (easier to navigate, especially for mobile). This form clearly divides the parent/carer details from the child details to avoid risk of human error when filling out as well as breaking down a relatively long form into smaller chunks for a positive user experience.

Donations

To build a sense of trust, it is important to inform the user about how the donations received will be spent as well as highlight the severity of SGS. This page was designed to be concise and make clear the different payment methods for great usability. All visual elements of this page are blue to follow colour semantics (blue represents donation info. and primary CTA’s)

Contact pages

A contact option is provided for each user segment. When selected, I included the name and a photo of the relevant trustee and medical member to create a more comforting, welcoming and personal experience for those who may be grieving or distressed.

What I Learned

Understand the user
Spending time creating user personas and establishing goals with trustees really helped to determine content and sitemap structure that simplified navigation.

Build trust with the user
Using real photos of children with SGS with their names captioned (non-stock photography) adds legitimacy to the site. Trust was also gained by explaining how donations work and how the work raised is spent and what future goals are.

Content is king:
Expressing importance of copy at the beginning of the process had a huge influence on overall designs, layouts and CTA’s on each page

Frequent Communication is important:
Checking with Trustees that the branding and overall look and feel is a true reflection on the message they want to convey definitely sped up the design process.

It was also important to involve the developer throughout the process to check feasibility and technical limitations

Testimonials

" Franco has done some excellent pro-bono work for our new charity. We could not be more pleased with the logo he has designed for us. He is currently working on the wireframes for the charity website which are coming together really well. He is very easy to work with, he communicates well and has been very responsive to our requests. He has clearly spent considerable time thinking about, researching and planning our design project, which shows in his execution. I would highly recommend Franco.”

- Nuala Summerfield,
Founder of The Schinzel-Giedion Syndrome Foundation

"... Franco has been an excellent communicator - from detailed messages to skype calls - making sure that we are on the same page when it comes to executing his designs for the website.

I have never worked with a designer who has planned out a website to the extent that Franco has. This makes my portion of the project go much smoother than it would otherwise. Franco found a program that we could use when he handed over the designs for the website. This program allows me to look at every detail of his designs down to the hex codes for the colors. Even though we are working on a project on two different continents, Franco has not let the time difference hinder his response time to my queries. Franco has also been receptive to changes in design when it comes down to the real-world execution.”

- Amanda McGowen,
Web Developer of The Schinzel-Giedion Syndrome Foundation