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.

Stars Alined

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.

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.

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.

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.

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 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. We combined the emblem with a typeface thats shape echoes the ripples in the sand left by the recently receded tide.

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

Design

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.

Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Outcomes

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.