The Starfish Canada — Responsive Web Design
For the past three weeks, I worked as a UX designer with a small team to redesign the current website of The Starfish Canada.
The Starfish Canada
What is the organization all about?
The Starfish Canada is a volunteer run organization working to celebrate and amplify the Canadian youth conservation movement.
Their mission is to celebrate and showcase initiatives undertaken by young environmentalists through providing them with a platform and mentorship to help them amplify their impact.
They want to celebrate youth taking leadership roles in their communities, those who are helping make a positive difference to Canada’s natural environment and contributing to the environmentalism movement.
The Starfish Story
(adapted from The Star Thrower, by Loren Eisley)
On a dark, windy night, a great storm blew across the ocean. Gigantic waves crashed against the shores as the waters showed their rage.
In the morning, a young boy decided to walk along the shoreline. As he approached the sandy beach, he saw something completely unique — tons of starfish that had washed up onto the shore from the night’s weather. The starfish were drying out in the air, desperately wanting to go back into the ocean.
The boy walked up to the first starfish. He picked it up, looked out into the ocean, and threw the starfish as far into the blue as he could.
He saw another starfish right beside the one he just picked up. Again, he picked it up, looked out, and threw the starfish back into the ocean.
He kept doing this as an old man saw what the boy was doing from afar. The old man approached the boy, who was smiling, laughing, and dancing around with the starfish. He asked, “Boy, what are you doing? Can’t you see? There are hundreds of starfish washed up on shore — there’s no way you can make a difference!”
The boy looked down for a second, and then picked up another starfish. He looked out into the ocean, and threw it back into its home. He replied, “I made a difference to that one.”
This story was the inspiration behind the Starfish Canada’s name.
The organization believes that every small act counts towards the big picture and hopes to instil this in future generations. This is why they are focusing specifically on youth, as these young environmentalists will become the leaders of tomorrow.
Preliminary Research
Two Different Domains
Currently the Starfish has two separate websites.
Their primary website is thestarfish.ca, however their ‘Top 25 Environmentalists Under 25' program is hosted under the second domain listed above.
During our first client meeting with CEO and founder Kyle Empringham, we quickly understood that the ‘Top 25 Environmentalists Under 25’ program is The Starfish Canada’s defining and most well known program. I asked Kyle whether the decision to have two different domains was based on any data, he said no.
We followed up by asking him to give us access to the analytics for both websites, so we could better understand how this decision was affecting the users.
You can also see how the aesthetic and layout of the two websites are pretty different below.
Website Analytics
We learned two things after looking at the web analytics for both websites.
- Visits by Source — canadastop25.ca only gets 9% of its traffic from the main website. This is problematic as it is the organizations most well known program, yet not many people are coming from the main website. In fact, there is no link back to the main starfish website from the top 25 site, and the only indication that it is a Starfish Canada program is the small logo at the very top. We want people to know that the Top 25 program is run by the Starfish and to make sure that all who are interested also know about the other programs and what the organization stands for.
- Device Type — On both sites, desktop and mobile devices were used 95% of the time and tablet only stood for 5%. Therefore, we decided to design for web and mobile due to the scope of this 3 week project.
Partial Content Audit
After looking at the web analytics, we did a partial content audit, where we sifted through the information on both websites and created the current site map.
The current navigation bar consists of 5 tabs — This is shown in the second row of the site map above.
- Home — showcases recent blog posts and a little blurb about the organization.
- Blog — This is where people can post articles, but the last tab on the navigation is called ‘Submit a Story’. These two were a big source of confusion for users and I will touch on this in more detail when I speak about the customer journey maps below.
- Programs — This is a drop down menu which shows you the two programs that the Starfish Canada has. One being the ‘Top 25 Environmentalist Under 25’ and the second being the workshops that they offer. However, as I discussed earlier, clicking the Top 25 redirects you to the second domain.
- About — This section includes various content that doesn’t necessarily fit well together. Such as the story behind the starfish name, values of the organization, team members, a volunteer and finally, a membership page.
- Submit a Story
Below you can see the re-designed site map. I will explain the decisions leading to this flow in the usability testing section.
Re-designed Site Map
Current Site Map
Customer Journey Maps
First Task
- Go to thestarfish.ca
- Submit an article to their blog
Main Insights :
- Wording is very important in making sure the user has a good experience → Users were clicking on the “Contribute Now” button on the sidebar and “Add your Voice” button on the blog page to contribute to the blog, however both times they are redirected to the donation page.
- Page hierarchy is important → This was causing extra confusion for the user as the sidebar contribution button is in line with blog posts on the home page, therefore making the user believe that they are related.
- Forms need to be clear → The form on the ‘Submit a Story’ page requires users to provide a website link — this confused the user as to wether they have to post an article previously written or their own personal story/ experience and idea, and if so why is a link mandatory to provide.
- Confirmation feedback is crucial for good user experience → It was not clear once the user clicked on submit in ‘submit a story’→ user thought the page was loading when nothing had changed but they had to manually scroll up to see the ‘thank you for your submission’ message.
Second Task
- Go to thestarfish.ca
- Nominate someone under 25 to be showcased for their sustainable work
Main Insights :
- Most of our users had trouble finding the ‘Top 25 Environmentalists Under 25’ program to nominate someone — This is the feature program of the Starfish Canada yet it is hidden under the programs tab in the navigation with no mention of it on the home page.
- The user is redirected to a different website with no way of getting back to the main starfish website.
- White text on the Top 25 landing page made it hard for users to see that nominations were currently closed.
User Flows
We explored three of the main flows that a user might navigate, and tested all three of these tasks.
- Nominating youth to be showcased for their sustainable work
- Submitting a blog entry
- Donating to the organization
Re-designed User Flow
Current User Flow
We made 3 major changes to the highlighted areas in red, yellow and green.
- First we combined the Canadastop25 site with the main Starfish Canada website. Top 25 was added under programs, alongside workshops.
- We’ve taken out the marketplace link used to sponsor a specific nominee, just keeping one payment page for all donations.
- Made sure that the ‘Donate’ Button stayed consistent throughout the website.
User Research
Interviews
We conducted 7 user interviews.
One of these interviews was with Tesicca Truong. She was named as a Top 25 Under 25 Environmentalist twice. She then became a judge for the program and is currently a board member for the organization. We asked her about the nomination process and whether there could be any changes made to the program.
“Being named on the Top 25 twice has really catapulted my career and I was able to leverage it for other jobs, opportunities and applications.” — Tesicca Truong
We also wanted to learn about the platforms that she uses most to learn and stay updated about sustainability and environmental issues. She replied with Facebook and Twitter. This was also consistent with what we saw with our survey results, which I will touch upon below.
Tesicca went on to be featured on Corporate Knights Top 30 Sustainability Leaders under 30 in 2016, and her latest work is with CityHive engaging young people in the planning, design, and shaping of their cities.
Another interview we conducted was with 22 year old environmentalist Annie Fang. She had a lot to say about why she engages in environmental initiatives and why people should care about sustainability and conservation.
“You have to cultivate a culture where sustainable living comes naturally and easily, in addition to making it something people want to do.” — Annie Fang
Throughout all our interviews we asked people:
- Why they like to engage in conservation and environmentalism
- What platforms do they use most to learn/stay updated about sustainability and environmental issues?
- How they would decide what organization they were going to support / and what concerns they have with making a donation.
A big thing with donations was transparency and knowing exactly where the money is going and what it is doing. Is it going to pay the employees or are 100% of the funds going to the cause. People want to know. It will encourage users to donate more.
Another key factor for donations was word of mouth — many of our interviewees said that they donated to a cause just because they were told to do so by friends. Therefore, it is important to get more people to be aware of the Starfish Canada and how they are fostering the next generation of Canadian change makers.
Survey
We got 15 results in our survey and here are some of the key findings we took away from it.
We found out which environmental organizations people were active on, we used those responses to do some domain research on how the websites of these organizations approached the problems of gaining more donations and delivering information in an engaging manner.
We noticed that most of them had very bright, noticeable donation buttons, with either the text or the box highlighted. Majority had the button in the navigation for high visibility.
On the more journalistic sites such as National geographic, Greenpeace, and Pacific wild we looked at how they arranged their information. We saw that the layout of National geographic was the most engaging and in line with the Starfish Canada’s brand aesthetics. They balanced pictures and content to bring engagement while still delivering information.
Secondly, we wanted to find out which platforms people used most often to engage with environmental movements.
Some of the key findings with this graph is that most people used various Facebook functions to learn about sustainability movements, followed by Instagram and print.
And finally, we asked our survey participants how they like to promote sustainability themselves.
Again the combined Facebook functions win out, but with a very close second for in-person and workshops
Therefore, it is important to have a strong social presence to increase engagement. However also important to provide opportunity for people to be able to engage in person.
Business Goals
After our two client meeting with Starfish CEO, Kyle Empringham, doing the preliminary research, user research and looking at web analytics we were able to do an affinity diagram. We placed all the insights we got from our different research methods into categories, came up with our business goals and were able to prioritize our features.
Our Business Goals are :
- Increase brand awareness → increase traffic of website and bring people in due to usability / good functionality
- Increase involvement → get people to stay on website and join the movement (get involved with the environment)
- Connect youth across Canada
MVP
Although very challenging, we identified our MVP to be the following.
- Nominating someone to be showcased
- Getting donations
- Submitting a story to the blog
UI Research
Now I will talk a little bit about the research process that the UI team went through.
Gut Test
One of the most important elements of their research process was doing a 10 second gut test with our client at the first kick-off meeting.
They showed our client a series of 20 images for intervals of 10 seconds each, and asked him to write down his initial “gut” reaction to each image on a scale of 1 to 6. The images were screenshots taken from different websites. This process helped the UI designers form a better understanding of Kyle’s vision and expectations.
The image on the left (H) scored the highest in the gut test. It has a big hero image in the header with a bold tag line to quickly grab the users attention once they land on the website. It also has a modern feeling to it.
The image on the right (I) scored the lowest among all the pictures. Kyle didn’t like the illustrations as they gave a very junior feel to the website. He also didn’t like the colour palette.
Gut test Findings
The results of the gut test were quite clear.
- Visually oriented website — Showcasing everyday young Canadians doing environmental work in Canada / pictures of relatable outdoor activities
- Tone — bold yet soft / visually oriented yet informative
The Why
For their design inception, what really stood out to them was the story behind the starfish name (I spoke about this in the introduction of the case study). This lead the UI designers to their “Why” — How one person can make a difference no matter how small. From there, they came up with their two separate art directions.
Chosen Art Direction — Personal growth & Leadership
UI Elements
- Impactful
- Driven
- Leadership
Now, I am going to switch back to describing the UX planning process. Once we had done our user research, we were able to came up with our primary persona.
Persona
This is Ariel Erikson, the user persona we molded through our research.
Her Motivations are that she :
- Wants to educate people on sustainability
- Wants to be engaged in the local community
- Wants to raise awareness about her projects
Her Goals are :
- To have a positive impact on the environment
- To participate in environmental initiatives
- To learn about current events
- To learn from peers and their projects
- To get mentorship form others in the field
Her Frustrations are:
- To find a platform to amplify her projects
- To find mentorship within her community
- To find support/ peers working on similar issues
Storyboard
This is a storyboard of how Ariel would go about doing her environmental initiatives without the Starfish Canada’s programs.
And below is if Ariel had access to the Starfish Canada.
Project Goals
Once we had our user goals and business goals, we defined our project goals based on our time limitations and the MVPs.
- Improve user experience by making it a more intuitive website
- Visually oriented yet showcase articles in a clear way
- Make it clear for people who want to join the movement
Design Studio
Design studio is a method to start rapid prototyping very efficiently. At this point we had our persona, Ariel Erikson and research based data. We started by conducting 2 minute sketches for each of our main pages. Each member then presented their sketching decisions to the team, and eventually we had a consensus to create our master design.
For the main landing page, we had different ideas and versions of how we wanted to present the information. Therefore, we decided to do an open card sort.
Card Sorting
Card sorting is a participatory, user-centered technique. We gave our participants the different sections that we wanted on our landing page and asked them to categorize the items according to any criteria that made the most sense to them. Once they had organized the cards, we asked them why they decided on that particular hierarchy.
We used it to understand what is most important to our users and how they would prioritize and organize the information presented on our landing page.
Results
- The results were largely consistent, with About us and Programs at the top. Followed by volunteer and membership or blog.
- The participants moved donate lower down on the page, because they wanted to understand what the organization was about first before seeing the donate button.
- The Starfish background story was moved to a separate page because the participants felt that it wasn’t essential — just something that was nice to have.
After doing the card sorting, we started paper prototyping and testing those prototypes. We tested 8 people with the initial paper prototypes.
Iterations made through User Testing
Landing Page Iterations
- We followed the hierarchy outlined in the card sorting by our participants. However, through user testing we decided to add in a large hero image to go with the Kyle’s vision.
- We also showcase the featured program, The ‘Top 25 Environmentalist Under 25’ on the landing page. We have the information presented in a carousel format, so that it is presented in chunks and the user can easily digest it.
- As you scroll down you can see appropriate and timely call to action buttons to allow the users a smooth narrative.
- Our navigation bar also follows the order of the sections we have laid out on the landing page → top to bottom translated to left to right.
Navigation Bar Iterations
- About → This was initially just one page describing what the organization is about and introducing the team members. However, through testing we split this into two pages, as there are a lot of team members and the user was getting overwhelmed with information. Now the About section has a drop down, giving the user the option to click into ‘about us’ and learn more about the organization or to click on ‘meet the team’.
- Top 25 → Initially, we gave the Top 25 its own spot on the navigation bar. Through testing we decided to move it under a Programs tab with the workshops that are offered. This is another drop down where the user can either click into the Top 25 Environmentalists Under 25 or the Workshops, and will be able to read a little bit of text before making that decision.
- Get Involved → Initially we had a Get Involved tab which included a workshops page, a volunteer page and a membership page. However, as I mentioned above, through testing we decided to put the programs offered under a Programs tab.
- Therefore we pulled workshops from the Get involved tab and placed it under Programs with the Top 25 program .
- The Top25 program will no longer jump to a different domain, it will stay on the main website with its own page.
- Take Action → We changed the wording of Get involved to Take Action and kept the volunteer and membership pages under that tab. The initial wording was confusing for the user, so we included a more action oriented word showing that these are the means by which you can take action and get involved. This is another drop down menu with a text box giving a little bit more information to the user before they decide to click into the page.
- Blog → We changed the name of the blog to journal so that people would understand that it was a collaborative effort and not just a single person’s blog.
Workshop page Iterations
Initially we had all workshops listed with a single contact button at the top of the page, since it would redirect the user to the same contact page. We found that users felt bombarded with information so we changed the presentation of the information through a carousel, where you can swipe through the different workshops that are offered and can click contact us right there and then. The carousel element is also present in other pages of the website.
Footer Iterations
We went through many iterations for our fixed footer. We knew that we wanted to present the Donate button at the bottom of every page as this was an MVP. Initially we had the button as “Yes, I want to support youth!” to give the users that push that they are indeed helping youth by donating to this organization. Through testing we decided to move that as a text above the donate button and keep the button wording consistent with what is seen in the navigation bar at the top of the page.
Benefits to Persona
We can now see how our nature loving environmentalist persona, Ariel Erikson can easily go to the Starfish Canada website and
- Find a platform to amplify her projects
- Find mentorship within her community
- Find support & peers working on similar issues
Future Considerations
- We currently have paypal set up as the payment plugin, but in the future if the Starfish Canada has resources available, we do have the payment and donation pages laid out → a progress bar allowing the user to visually see what step of the process they are at and having a single task per page so the user is not overwhelmed.
- As well, it would be very valuable if the nominees had a way to get together through the Starfish Canada website. To perhaps set up talks, events or presentations where they can meet each other and discuss their projects. This would help raise more awareness for the youth conservation movement and drive more traffic to the Starfish Canada website.
- French — currently most things on the website are written in english and french yet there is a lot of inconsistency. It is also confusing for the user to see both english and french side by side on the same screen. Therefore we have placed a ‘French’ hyperlink above the nav bar → clicking it would change everything in the page to french.
