- Frank Digital Team
CanTeen Connect is an online community designed to connect people affected by cancer and provide tailored support and resources to assist with their family’s cancer journey. The concept was developed in collaboration with CanTeen, Australia's national charity supporting young people through cancer. We were inspired by the idea of creating a community with empathy and understanding at the very centre of its design. A place where people facing some of the most challenging circumstances imaginable can come together to hang out, to laugh, to form friendships and to support one another. It's bullshit-free, by design.
Our initial wireframes underwent a thorough series of user testing and client feedback rounds, which resulted in a progressively simpler and more flexible final interface. One thing that was really interesting to watch was the ideation and development of the illustrations, which were produced by the uber-talented Niki Fisher. Hitting the right tone (given we’re discussing cancer) was incredibly challenging and we were thrilled with the eventual result.
Beside the ‘standard’ web technologies such as HTML5, CSS3 (with SASS), we used Next.JS as the base framework for the front-end web application. The UI is using a heavily customized version of Material-UI (a React library implementing Google’s Material Design). Our back-end server uses Laravel, a fantastic PHP framework perfect to build a back-end API. The blog and resources content is managed through Prismic.io, a headless CMS. To host CanTeen Connect, we decided to use AWS. Last but not least, our development team used either Atom or VS code for their code editor (yes, we’re pretty neutral in the code editor war!).
We wanted CanTeen Connect to provide an app-like experience. In order to do so, we decided to use a headless approach where we’ll build a back-end server that will communicate with a front-end web application through an API. We had previous experience with such an approach, but not to the scale and complexity required for the CanTeen Connect platform. We decided for the front-end to use an up and coming framework, at that time, called Next.JS. It was our first time using it and we got delighted with both the DX (developer experience) and how easy it was to deliver the best experience to CanTeen Connect users.
Our creative and technical teams work side by side and we take a highly collaborative approach to project research, ideation, design and development. If a designer has an idea for an interface, interaction or experience, they consult our technical leads and collaborate on the idea’s development, ensuring creative is always grounded in what’s technically feasible. This approach also ensures boundaries are constantly pushed in both design and code, while elevating the client’s brand.
It wasn’t so much the product; it was the people. Within a week, we had hundreds of young people actively participating on the platform. We’re not talking about passive browsing; they were writing blogs and engaging in discussion forums. It was just so satisfying to see these incredible people shape CanTeen Connect into something great. As product designers, we really couldn’t ask for more.
When hasn’t it been an exciting time to design? Back in the 2000s it was exciting to design in Flash, making characters jump about the screen. Then the iPhone changed everything and it was an exciting time to design across multiple devices. Now, I think we’re seeing a yearning for more personalized, niche products. People want smaller, bespoke experiences that connect them with family, friends, and like-minded peers. At Frank Digital, we thrive on design challenges like these. We keep our team close-knit and nimble to ensure we’re always on the forefront of engaging, user-centric product design. Plus it’s just more fun working that way.