Problem #1
One of the many issues that need to be addressed before designing is that Orcasound does not have a style guide or shared library and lacks a uniform design on all sites.
The Solution
I proposed that we create a simple style guide. As a consultant in 2020, I gave direction and helped due to being new to the Figma application. I contributed to areas I felt confident in, such as typography, and the color palette was designed using the logo I had already developed by this point. The buttons and various icons were a collaborative effort working with UX designers Carina and Catherine. We began this project in July of 2020.
- The Style Guide is a growing live document, and currently, I am creating the Library with components/assets as a sole contributor.
Methodologies
- I am currently using Material Design 2 and 3. I've created the Responsive Grid Layouts for desktop, large tablet, small tablet, and mobile designs.
- I've added instructions - 'how to use' these grids for future teammates to understand once they on board with Orcasound.
- I've created the Text Style Library.
Map UI - Discovering the Pain Points
We're gathering all the data from the usability studies that have been going on in the background.
- One of the main pain points is, "I expect to see an interactive map."
- The second pain point is, "it takes too many clicks to start listening." It currently takes three clicks for the users to be able to start listening.
The Usability presentation we created for the Stakeholder and Team is displayed below.
Team: Carina, Myself & Catherine - Map UI
Usability Testing: Brendan
User Stories: Usability Elena
Sketching Original Map UI
This project has been going on since July of 2020. Version 3.0 will include both mobile and desktop design, for the first time!
Shown is an older sketch. We've had many iterations since this was created. I hand sketch before creating any wireframes. I also designed a new logo that will be used for version 3.0 update.
- I led a team of 3 to design a better logo with User-Centered Design as the core basis. (Read more about that, below, in Brand Equity & Identity.)
My Site Map for Version 3.0
- Collaborate on our page flow.
- We each submitted our Site Maps / Information Architecture for the weekly stand-up team meeting. Everyone shared feedback.
- Using Google Docs
Map UI - Changes to Come
Shown is the current one-page site & map UI. Given the user feedback from usability tests we have decided to update the Header / Nav Bar with the new branding/logo I designed for Version 3.0. Other elements: Entirely new & improved interactive map. Clicking on various features, searches, hearing live hydrophones streaming, submit report/findings, click the button for notifications.
- Sketching & Wireframes
- Worked on several design sprints during this time.
- This is ongoing
Tools: Figma, Canva, Marvel, Miro, Milanote, AirTable, Google Suites, Trello, Slack, Go to Meeting & Zoom
Prototyping - Map UI - Using Figma
- Left blank intentionally.
- During this time, we are going thru many iterations.
Tools: Figma, Canva, Marvel, Trello, Slack, Google Drive
(On Hold) The Learning Interface - In Discovery Stage
Problem Statement:
Concerned citizen scientists and school-aged children need an easily accessible way to use their free time to participate in Southern Resident Killer Whale conservation to pursue their goal of improving the marine ecosystem.
Hypothesis:
By designing a teaching interface - allowing concerned citizen scientists and school-aged children to learn how to identify orca vocalizations of the Southern Resident Killer Whales. Orcasound will provide the needed training that contributes to marine conservation. Orcasound will know this to be true when; collected data by concerned citizen scientists and school-aged children - who have been trained using the learning interface, and is used in academic papers, reports to legislative bodies, marine management policymakers, and public education media.
Collaboration: What is it we want for our learning interface page? Who is going to use it? My focus is on teachers & school kids k-10 *The Citizen Scientists*
My Contributions:
- Research / comparative analysis.
- Wireframe / design sprints / hack-a-thons.
- I designed animations that can be used in the future version.
- Currently is in the discovery stage.
- To be released later 2022-2023
Tools: Canva, Figma, Marvel, Trello, Slack, Google Drive
The Style Guide Breakdown
- I suggested we start by designing the Style Guide before we move on to redesigning the map UI - in July 2020.
- Collaborate on discover / research
- Typography
- The color palette is based on the V2 logo I have already designed at this point. (2020)
My Contributions:
- Logo & Branding
- Assets & Components
- Add Mission Statement
- Infographic & Templates
- Letter Head
- Onboarding Packet
- Welcome Letter
- Welcome Email
- Awards & Certificates (Editable Templates)
- REVAMPING ENTIRE STYLE GUIDE - 2022
Team 2022:
Myself - Lead Creative Director/UI - Product Designer
Contributors:
Zarema Ross - UX/UI Designer
Dale Husband - Intern
*Carina Cheng & Catherine Zeng - In July 2020
Version 3.0 - Map UI - My Contributions
Plan to Launch Mid 2022
- I contributed to the choice of Typography, color palette, and placement of the photo carousel. (2020)
- I directed how the map layout should look, IA. (2020)
- I designed the Footer with icons. (2020)
- I designed the Responsive layout. (2022)
- Improved design of Nav Bar Icons & Logo. (2022)
- Improved design of Footer & all icons. (2022)
- 2022 - I am updating the entire design before we launch.
Team 2020;
Myself - UX /UI - Product Designers
Carina Cheng & Catherine Zeng
Team 2022:
Myself - Lead Creative Director/UI - Product Designer
Zarema Ross - UX/UI Designer
Dale Husband - Assistant
Tools: Figma, Canva, Marvel, Trello, Slack, Google Drive
Infographic - Stages of Design
Listening to comments from users, I decided to do a side project. I took the initiative to design this infographic. The facts are from other orca sites and help tell a story of WHY orcas are essential.
This infographic may eventually be incorporated into the Learning Page that I am facilitating. I will include the updated logo that I designed for the header.
Continue learning is what I enjoy doing.
Tools: Canva, Figma, Google Drive, Slack, Trello
**This is the 1st iteration - Version 2.0 Logo
Brand Equity & Identity
- I led a team of 3 to design a better logo with User-Centered Design as the core basis.
- The methods I decided to use were; a user survey, A/B testing, and questions with images.
- After analyzing the data, I created a presentation deck and shared findings with Stakeholders and Teammates. (Shown Below)
- The team voted on the best design, given two choices.
- I redesigned Version 3.0 logo.
- Created Social Media Channels and managed all content.
- Designed all banners and visuals. (Shown below)
- Design Infographics. (Shown below)
- Created a video for our YouTube Channel. (Shown below)
- Created an Animated Video Intro that can be used in future videos. (Shown below - I need to update the logo in that one.)
- Designed Editable Templates. (Shown below)
- Designed the OnBoarding PDF and email. (Shown below)
- Designed Letterhead. (Shown below)
- Ran a 14-day Trial with Zapier and Automated our Social Media Feeds.
- (Case Study in Progress.)
Tools: Canva, Figma, Adobe Premiere Pro, Adobe Fresco, Doodly, Marvel, Trello, Slack, Google Drive, PowerPoint
Managing Social Media Content & sites
Orcasound - Facebook
Orcasound - Facebook
Orcasound - Facebook
I designed the banner and managed all the content, stories, and updates.
Come visit the site, "Like," comment, and share relevant stories. Feedback is always encouraged, but sharing one of our posts would help spread awareness.
LinkedIn Page
Orcasound - Facebook
Orcasound - Facebook
The LinkedIn banner and icon that I have designed for Orcasound.
I am managing the content here as well. Visit the page, follow, share posts, and include hashtags #Orcasound #SRKW in your posts.
YouTube Channel
Orcasound - Facebook
YouTube Channel
Orcasound has a YouTube Channel!
Is the banner starting to reflect cohesive branding for Orcasound? I created this channel and am managing the content.
Visit the page, follow, share our videos, and include hashtags #Orcasound #SRKW when you do.
Editable templates & other visuals
Design custom letterhead with footer
Design Onboarding email message for new team members.
Design Awards / Certificates for volunteers & members.
Design alternative for Awards/Certificates.