Private Organizations
Moving2Canada
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
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,
Development
Project Mandate
Redesign, Rebrand
Industry
Charity
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.
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.
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.
Supportive
The shape is held together by the arrangement of the individual parts in the classic 5-fold symmetry of a star.
Tilt
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.
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.
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.
Explore More Projects
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