Frank Digital

Canteen
Connect

Community / Nominee

Frank Digital

Community

Nominee

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. - Frank Digital Team

Q: Can you briefly describe your project and the concept behind it?

A: 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.

Q: Talk about your initial prototypes. How did those ideas change throughout design and execution?

A: 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.

What breakthrough or “a-ha” moment did you experience when concepting or executing this project?

A huge ‘a-ha’ moment for the team was understanding that every single cancer journey is different. You can’t assume anything when designing for this audience, so don’t try to force them down a particular path. We worked really hard to keep all aspects of the experience as flexible as possible, ensuring members always have the ability to make their own choices as to what they do or don’t engage with.

Q: What web technologies, tools, or resources did you use to develop this?

A: 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!).

Q: What influenced your chosen technical approach, and how did it go beyond past methods?

A: 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.

Q: How did you balance your creative and technical capabilities with the client’s brand?

A: 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.

Q: How did the final product defy your expectations?

A: 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.

Q: Why is this an exciting time to create new digital experiences? How does your team fit into this?

A: 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.

Canteen Connect