Front-End Developer & UX Consultant
Cystinosis United
Site Background &
Requirements
The Cystinosis United site is a site resource site for people that are living with cystinosis. This site provides tips, tools, and helpful advice from other people with the same condition and who can relate to the challenges of living with cystinosis every day.
This site was handed-off as a development project since the design was already created by an external agency. This project took almost 6 months to complete due to to the amount of content, customization, number of forms, and iterations of assets needed.
See notable components used on this site:
This site uses a main navigation with a different content layout between desktop and mobile. Additionally, it uses section navigations on mostly every page that turns into a dropdown on mobile for consolidation and ease of use.
Both of these navigations are fixed to the page so they can be easily accessible.
The section navigation also updates with the in-focus section for better user experience.
Navigations
This site required different colors per persona, which required high customization and strategizing. Note that the only a section on the homepage required this color breakdown unlkne the subpages where the color needed to be applied on the entire page.
Color
Four types of accordions are used on this site. Here are the dfifferences and anecdotes about each of them:
Nested accordions
Plain text within an accordion as part of a video component
Videos within an accordion that pauses videos when a different blade is opened. This accordion allows for only one blade to be opened at a time.
Plain text, links, and icons within an accordion. This accordion allows for any/all blades to be opened at the same time.
Accordions
The tab used required the layout to become accordion on mobile thus the layouts and classes had to be set up for both variations separately.
Tabs
Desktop design
Mobile design
Two very different flip cards are used on this site with different colors, number of assets, flipper positioning, and card shape.
Flip Cards
Four video layouts are used on this site with different requirements and assets. The same video component was used, but different video/section classes were applied in order to apply customized css for each video variation.
Videos
Three very distinct forms are used on this site in terms of purpose, content, layout, styling, and rules applied. This portion of the site was the most complex and the most time consuming. It required several rounds of QA to ensure proper submissions.
