The Starfish

UX Branding Web Design Development

The Starfish is an environmental non-profit, dedicated to giving young Canadians a platform to advocate for environmental causes and actions that make a positive difference to Canada's natural spaces.

Via written pieces posted to their Journal, public speaking engagements and workshops, The Starfish enables their community of young changemakers to have their voices heard, provoking deeper discussions around the environmental issues we all face, and what the solutions could be.

Project Type

Ux, Branding,
Web design,

Project Mandate

Redesign, Rebrand



Stars Aligned

Occasionally a project comes along that just checks all the boxes; An important issue we care deeply about ✔︎, the chance to show how transformative thoughtful design can be ✔︎, a diligent and trusting client ✔︎. — No matter the kind of project or the type of client, we always strive to produce the best work we can, however there's no doubt that our intentions benefit from the enthusiasm that emerges when these factors coalesce.

Murky Water

The Starfish site suffered from a number of straightforward, but fundamentally connected issues;

Lack of Architecture Strategy
Lack of Content Strategy
Poor Mobile Experience
Weak Visual Scheme
Ill Considered Branding

These issues compounded in creating an ambiguous user flow, and perhaps more concerning, an unclear impression of who they are, and what they do. We were tasked with introducing clarity to the experience by improving the information architecture and defining the user journey. A fresh look and feel based on an updated brand language was also essential.

All Aboard

The lean budget on this project called for us to adapt our research strategies to accommodate the scope of the ask, and to align with the stakeholders, who all volunteer their time to The Starfish's cause. Instead of conducting individual interviews with stakeholders, we ran a UX workshop using a digital whiteboard space, enabling key members of the team to contribute collaboratively to questions and prompts that we had prepared. This was a big success, owing in no small way to the passion and enthusiasm of the The Starfish team, and we gained many useful insights.

A group working session on Figjam; a digital whiteboard.

Set Sail

Once we synthesized the results from our research, we first set about restructuring the architecture based on the priorities that emerged. From an experiential perspective, the site suffered due to a lack of user flow strategy and assumption of user behaviour. Despite the content being of high quality and importance, the method of organization and delivery meant it wasn’t being engaged with as meaningfully as it could be. To solve these issues, we categorized the content under two labels; Who We Are, and What We Do. This reorganization meant that all user groups could clearly and intuitively identify a starting point depending on their interest.

A sample sitemap of the Starfish website

We then turned our attention to refining more specific user flows. One example was the donation flow; a crucial process for any charitable organization, and one that, like any other digital monetary transaction, must assure security. The site relies on various third party services, one of which is used to collect donations, however an unexpected redirect as a result of clicking the 'Donate' button left room for possible doubt and skepticism in the mind of the donor. We bridged this pitfall by adding a dedicated 'Donate' page, providing an opportunity to inform the user prior to being redirected to complete their donation.

Example page mockup of new design

Mobile Issues At Bay

With a sizeable audience of younger users and contributors accessing the site on mobile, it was key to address the holes in navigation, and the accessibility concerns which made exploring the site challenging. The structural changes mentioned previously meant that the mobile navigation could be better compartmentalized. We introduced some simple, previously missing features such as page breadcrumbs and tools to share Journal posts to social channels. We also overhauled the use of filters across both device platforms to make finding specific content easier.

Example mobile mockup design
Example mobile mockup design
Example mobile mockup design
Example mobile mockup design

Turn The Tide

Prior to tackling the design of the site, we first had to address the current branding. Design aside, the overarching issue was that the marque didn't directly relate to The Starfish, its origins, values, or mission. A basic starfish icon, aimless in its rendering and unconsidered in its use of typography and colour, the logo didn't offer any meaning, or help in the organization's desire to appear more legitimate, established and influential.

The Starfish previous logo

The Starfish takes its name from a short story called “The Star Thrower” — a tale about a young boy who rescues stranded starfish from the shore, despite his action being met with cynicism — this, combined with the values and characteristics of the organization; community, youthfulness, support, dynamism, and creating space for conversation, inspired the new marque.

Bringing Folks Together

The shape is made up of separate elements, representing different folks, coming together to create the emblem.

Creating Space

The negative space in the centre created by the coming-together of folks represents a safe space reserved for important conversations.


The shape is held together by the arrangement of the individual parts in the classic 5-fold symmetry of a star.


The shape is rotated slightly to add dynamism. The emblem is geometrically based, but with a nod to the organic forms that have inspired it.

The Star Thrower

As a nod to the story that inspired the name, we added rotational influence to provide a youthful, dynamic sense of movement.

We combined the emblem with a typeface thats shape echoed the ripples in the sand left by the recently receded tide.

The Starfish logo

Throughout this part of the process we were very mindful of colour choice and legibility, with accessibility at the forefront of our decision-making.

A number of color swatches overlayed to test contrast ratios


With a more meaningful brand language in place, we could turn our attention to applying the updated styling to the site. We took a bold approach in creating componentry, choosing straight lines, sharp corners and strong colour use, to contrast the softer contours of the title typeface and to allow the photographic content to shine.

In applying a more sophisticated look and feel to the majority of the site, in line with how the organization wishes to portray itself, we wanted to also retain some whimsical flourishes as a representation of the youthful tone, which we did by deriving elements from the brand to create light embellishments where appropriate.

A collection of newly designed page components


This redesign could be characterized by a pursuit of clarity. The improvements in the structure, navigation and arrangement of content mean that visitors to the site will be under no confusion about the organization's purpose.

Eager to promote their redesigned site and begin using their new brand elements across their social channels, The Starfish team understand the importance of meaningful, user focussed design. The redesigned site will serve them well as they continue to grow and make meaningful change in the world.

An example mobile and desktop page mockup
Example mobile mockup design
Example mobile mockup design
Example mobile mockup design
Example mobile mockup design

Explore More Projects

Private Organizations


A thorough UX research project that ultimately turned into Canada's top resource for immigration support, through a complex WordPress and React build

See project

Private Organizations

Education Planner BC

Detailed User Experience Research combined with a cohesive Design System to support students across British Columbia in their post secondary selection journey

See project

Colleges & Universities

SFU Beedie

A comprehensive Craft CMS build tying together various internal systems and student driven websites

See project