Salesforce Trailblazer Credentials

Sam St Michael

Sam St MichaelSam St MichaelSam St Michael
  • Home
  • Projects
    • Brands & Visual Design
    • UI Interactive Prototype
    • Wireframes / Prod Design
    • Design 4 Good!
    • Dashboard / SAAS / App
    • E-Commerce
    • Web Redesign / SEO
    • Case Study/Presentations
    • Managing Social Media
    • Salesforce Portfolio
  • My Process
  • Contact Me
  • More
    • Home
    • Projects
      • Brands & Visual Design
      • UI Interactive Prototype
      • Wireframes / Prod Design
      • Design 4 Good!
      • Dashboard / SAAS / App
      • E-Commerce
      • Web Redesign / SEO
      • Case Study/Presentations
      • Managing Social Media
      • Salesforce Portfolio
    • My Process
    • Contact Me

Sam St Michael

Sam St MichaelSam St MichaelSam St Michael
  • Home
  • Projects
    • Brands & Visual Design
    • UI Interactive Prototype
    • Wireframes / Prod Design
    • Design 4 Good!
    • Dashboard / SAAS / App
    • E-Commerce
    • Web Redesign / SEO
    • Case Study/Presentations
    • Managing Social Media
    • Salesforce Portfolio
  • My Process
  • Contact Me

Orcasound - Continued

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

See Presentation

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


MAP UI Design Review

This includes the Usability Study

Go Back to list view.

user-centered design - Logo case study

Promo video/journey map - learn about Orcasound

My main focus is on visual strategy & branding, including the persona, "Citizen Scientist."  This is one of the videos I have created as a journey map to promote the Version 3.0 Launch.

***This is the latest updated version.


I Designed this Animated logo intro

I created this short animated intro embedded with SRKW chatter audio.  Designed this media logo, I will be updating all branding.   


My focus is on Brand Equity & Identity.  I am launching Version 3.0 Mid 2022!

  

If You 𝐖𝐚𝐧𝐭 𝐭𝐨 S𝐞𝐞 M𝐨𝐫𝐞 Videos 𝐥𝐢𝐤𝐞 𝐭𝐡𝐢𝐬 👍 Like the video (it would help)  

💬 Comment at the end of the video!  

🔗 Share the video with anyone you think would enjoy this.  

***BE SURE TO SUBSCRIBE!***

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

Created custom letterhead & footer

Design custom letterhead with footer

Design of Onboarding email message/flyer.

Design Onboarding email message for new team members.

Design of Award Certification of Recognition.

Design Awards / Certificates for volunteers & members.

2nd design option for Award/Certification

Design alternative for Awards/Certificates.

Visit Website
FacebookInstagramLinkedInPinterestTwitterYouTube
FacebookInstagramLinkedInPinterestTwitterYouTube
FacebookInstagramLinkedInPinterestTwitterYouTube
FacebookInstagramLinkedInPinterestTwitterYouTube
FacebookInstagramLinkedInPinterestTwitterYouTube
FacebookInstagramLinkedInPinterestTwitterYouTube

Copyright © 2000 - 2023 Sam St Michael UX PORTFOLIO- All Rights Reserved.

Powered by GoDaddy Website Builder

This website uses cookies.

We use cookies to analyze website traffic and optimize your website experience. By accepting our use of cookies, your data will be aggregated with all other user data.

Accept