Project
The Orca Project.
Duration
June 2020 - On Going
Role
UX/UI Designer & Developer.
Project Overview.
The Orca Project was born out of the need to educate and inspire people to take action and save the dwindling Southern Resident Orca population. These beautiful and iconic West Coast mammals deserve our attention and compassion since the root cause of their decline can almost exclusively be traced back to human activity.

We felt the pathway to educate and inform was to first start with a responsive website that would serve as the basis for the community we would be building.
Goals.
  1. Create an emotional connection with users through the use of visual design.
  2. Educate, empower, and inspire users to find their voice and take action.
  3. Place special emphasis on building trust with users through compelling content & design.
  4. Build a fully responsive website using HTML, CSS, and JavaScript.
Tools.
Desktop Prototype ⮕Tablet Prototype ⮕Mobile Prototype ⮕Tablet Prototype ⮕Mobile Prototype ⮕
*Please note, this project is still a work in progress and may contain inaccurate imagery of the Southern Resident Orcas.
The Team.
UX / UI Designer | Web Developer.
Project Manager | Copywriter | Subject Expert.
The team for this project consisted of Kyra and myself. I spearheaded the UX, UI, and Web Development components of the project. Kyra, a naturally gifted writer and passionate orca advocate, wrote the copy and provided guidance in all areas of the project.
Research
Research Plan.
We decided to focus our efforts on a select few research methods that we felt would bring the most benefit. Like any project, we faced time and resource limitations. Ultimately it was decided that extensive domain research, comparative analysis, and interviews would provide the direction we needed for the project to move forward in its initial stages.
Research
Domain & Comparative Analysis.
To start, Kyra and I spent the first week brushing up on our knowledge of the Southern Resident Orca population and getting a feel for other organizations that already existed. To our surprise, there weren't many organizations solely dedicated to educating people around the Resident Orcas. There was, however, several well-known organizations advocating and accepting donations that would aid in critical research around these mammals.

For the comparative analysis, I explored and drew inspiration from several high profile and lesser-known non-profits. This helped us understand the different strategies these organizations utilized to pushed users to care about the initiatives they were promoting.
Design Inspiration.
Research
Interviews: Let's talk to our users.
We took it upon ourselves to reach out to people that we believed would most closely align to our target market. In total, we conducted 3 in-depth interviews that ranged from 25 - 40 minutes. From our conversations, we learned what drivers would allow us to form a community and what motivates them to stick around.
Interview Insights.
  1. There was a baseline understanding of orca in general but no specifics about the Southern Resident Orca population. Interviewees mentioned they would be interested learning more.
  2. Interviewees preferred video and audio content but were not averse to reading.
  3. Interviewees would like to know how they could get involved beyond donating.
  4. The feeling that they would actually being making an impact would be an important trigger to building a sustainable community.
  5. Showcasing the intelligence of orcas and how they live in similar societies as humans would be an important way to create a connection between the two.
Planning
Data organization & brainstorming session.
Taking all that we learned from our research, we compiled and organized the data points into an Affinity Diagram. At the same time, we sat down and did an intensive 1-hour brainstorming session where we discussed different site objectives, user pain points, features, and design language.
Brainstorming Session Learnings.
  1. Trust elements, such as other non-profit affiliations, will need to be included in the final design.
  2. Instead of capturing donations, we want to link to other trusted organizations to handle the transactions; at least in the initial stages.
  3. Newsletter, social media, and other off-site channels would be highly beneficial mediums to build a sustainable and trusted community.
  4. Cutting through all the "noise" would be a challenge as many of our target market already seemed to be vested in several other similar types of non-profit. To accommodate, a unique story and website experience would help retrain users.
Planning
Personas: Who are we designing for?
Using all that we learned from our research and data organization process, we formulated our persona.
Site Map.
Our brainstorming sessions helped up conceptualize how the the website would be structured. In total, we decided on having 5 primary areas on the website (homepage, about orca, blog, what we do, and make an impact).
User Flow.
The user flow below details our "happy flow" where a user first discovers The Orca Project and moves from learning about the initiative to signing a petition and sharing it on Facebook.
Planning
Copy Development.
Similar to User Experience Design, the copy must follow a process that draws upon research to effectively communicate terms and language that resonate with our audience.  
‍
I worked with Kyra to define the sections that needed to be included while she worked on developing the copy for those sections. She utilized a professional yet urgent tone in her copy to stress organization trust but also prompting users to take action now.
Planning
Moodboard.
Using the inspiration around me I crafted the moodboard. I did this earlier in the process than expected but felt it would provide value earlier on as we started to discuss branding and general visual design language. Ultimately, we wanted to communicate feelings of power, west coast, and indigenous in the design.
The Affinity Diagram outcome. I had a lot of fun making this one.
Design
Low-Fi Paper Sketching.
With all my planning assets in place, I started to sketch different solutions for the primary webpages. This is always one of my favourite parts of the process as you start to see how the design can function and look. It really is an important milestone in any project.
The Affinity Diagram outcome. I had a lot of fun making this one.
Testing
Usability Testing: Getting the prototype into the users hands.
At this point I digitized the paper prototypes and was ready to conduct some user testing. We set off to recruit 3 different potential users. Each user was given time to explore the prototype then given a few scenarios to complete while encouraging them to talk out loud. In this process we discovered several usability issues that would need to be addressed.
Primary Task Goals/Scenarios.
  1. Goal: Determine if any part of the website, including copy or functionality, is unclear or can be improved.
    Scenario: You just learned about The Orca Project on Facebook and click on the website link to learn more.
  2. Goal: Find & sign a petition.
    Scenario: You recently signed a petition for another initiative and see this is an effective way to have your voice heard. Find a petition on the website and sign it.
  3. Goal: Determine how users will stay in touch with The Orca Project.
    Scenario: You want to stay up-to-date with latest news and information about the Southern Resident Orcas. How would you go about doing that?
‍*For the sake of effectively communicating the changes, I've updated all iterations based on what it eventually turned out to be in the Hi-Fi prototype.
Iteration Change - 01.
The Affinity Diagram outcome. I had a lot of fun making this one.
Iteration Change - 02.
The Affinity Diagram outcome. I had a lot of fun making this one.
Iteration Change - 03.
The Affinity Diagram outcome. I had a lot of fun making this one.
Prototype
Final Mid-Fi Wireframes.
After our usability testing was complete we landed on mid-fi wireframes below.
Visual Design
Colour Selection: Bringing the Mid-Fi to life with colour.
I decided to go with a selection that matched the colour of an orca while also including two blues to simulate the ocean. The orange highlight complemented the other colours while providing the contrast necessary to grab the users' attention where necessary.
Visual Design
Font Selection.
3 different typefaces with various fonts within that family would make up the typography selection. Each font was chosen for a specific purpose. The hero heading was only used in the hero section and did not span more than 5 words at a time. This was because the font became slightly unreadable when in paragraph form. Still, it embodied and looked similar to an orca which is why I decided to include it. The subheadline font was still playful but readable and Montserrat looked great in paragraph form.
Visual Design
Style Guide: Putting it all together.
Conclusion
Conclusion.
This project was an incredible experience taking an idea from scratch and working through the process from identifying the problem all the way through to the visual design. Although there is still much to be done especially on the development side, I learned a lot in the process that will make me a much more efficient designer in the future! Special thanks to my teammate, Kyra, for being a rockstar researcher and copywriter. I can't wait to see where this project takes us.
Learning Outcome.
  1. Embrace new ways of doing things if it makes you more efficient in the end even if that means putting in the work upfront.
  2. I grew as a designer since I had the chance to explore and be creative with very few restrictions.
  3. Provide clarity in everything you do and have discussions where necessary.
  4. Taking a project from concept to visual design and everything that goes on in between.
  5. My Sketch, Photoshop, and Illustrator skills levelled up immensely.