Overview
Business for Good is a group of business owners running a nonprofit on a mission to unite other local business owners to drive policy that improves the San Diego community. Our CEO at Visceral has a seat on board and insisted that we take on a pro-bono project for the organization. It was also the perfect opportunity for a brand refresh! Small business helping small business, isn't that something?
Role
UX Designer
Stakeholder Research, Information Architecture, Wireframing, Branding/Messaging, Hi-fi Prototyping, Interactions, Dev Handoff coordination and collaboration, and WordPress front-end development
January 2019
About Visceral
Visceral partners with social visionaries to design brands and experiences that challenge the world to be a better place. They are a branding and digital agency located in San Diego, CA. The team, helps the world’s leading philanthropists, conservationists, educators, health pioneers, advocacy groups, and scientific innovators harness the power of creativity and technology to create brand platforms that make people sit up, take notice, and act.
Project Team
Lead UX Designer: Me 🙋🏽♀️
Project Manager: Natalia Tamburini
Developer: Misha Trombley
Project Manager: Natalia Tamburini
Developer: Misha Trombley
This is the usual team set for launching a website at Visceral. We collaborate with one another and stakeholders from initial onboarding calls, through research, content strategy, development and launch, whilst managing multiple projects at one time. At most we usually had 3 projects in different phases.
Process Recap
Here's how the team and a majority of my responsibility as a UX Designer were involved throughout the usual 4-6 month delivery of client's websites.
Phase 1: Discover
Discover questionnaire: We guided conversational questions to understand the audience, goals, objectives, and other requirements.
Phase 2: Plan
Information architecture: UX began creating sitemaps, IA strategy sessions with current content audits, mind mapping, and card sorting methods. Once an iteration of a sitemap and rough wireframe prototype, UX and PMs would conduct multiple review rounds with stakeholders on the new structure and content strategy of the website.
Visual Identity: Depending on if a new brand was being introduced this project would also be delivered in this time frame and approval for both IA and Identity would be necessary before moving on to the next phase.
Content Templates: After approval, we hand off content templates aligned with the IA for the remaining months of the project for the client to write. Either a content writer or the stakeholders take on this project but we've lent them a hand by curating content strategy and suited amount of characters for each section.
Phase 3: Produce
In this phase, we apply the new visual identity to the information architecture by sharing hi-fi design mockups of key pages. This process allows us to focus on the brand as a whole that we can later produce and build on Wordpress.
Creative Brief: In this process, we share a brief specific to the website. It recaps the audience and key goals of the website. It will also provide design direction rooted in the approved visual identity.
Content Delivery: By now, content should be completed to hand off back to us to produce in the next phase of building.
Building: UX and developers will work diligently and collaboratively to produce the hi-fi mockups and micro-interactions of the website. Once the backend and essential front-end assets of the website are complete, UX takes over to finalize the rest of the Wordpress content and layout of ALL pages.
Building: UX and developers will work diligently and collaboratively to produce the hi-fi mockups and micro-interactions of the website. Once the backend and essential front-end assets of the website are complete, UX takes over to finalize the rest of the Wordpress content and layout of ALL pages.
Phase 4: Test and Launch
Quality Assurance: UX begins performing quality assurance testing for device and browser compatibility and accessibility and collaborates with Devs with any changes.
Training: UX and PMs provide training on how to manage the website and perform common publishing tasks.
SITE APPROVAL & LAUNCH: Once final reviews of content are finished, the site gets launched!
Out with the Old 👋🏼
Discovery Questionnaire
There are many aspects to understanding the niche of foundations, for-profit, and grantmaking businesses. Of that, we generally begin with questions to understand the business' mission and how they currently operate.
General Questions:
1. What changes would you have requested when the first release of your website was launched?
2. Where do you find that the most impact is reached when speaking with other business owners?
2. Where do you find that the most impact is reached when speaking with other business owners?
3. How do you connect or further your network with other business owners in San Diego?
4. What values and policies are most important to your audience?
5. How often does the nonprofit attend events and do you market any of your own?
5. How often does the nonprofit attend events and do you market any of your own?
Audience:
1. Describe those who visit your website for information currently?
2. What specific information are your users trying to find?
2. What specific information are your users trying to find?
3. Aside from business owners, are there other users we should be made aware of?
Goals
1. How will you personally define success in delivering a new website?
2. Can you find a way to differentiate yourself from competitors in this space and location?
2. Can you find a way to differentiate yourself from competitors in this space and location?
Visual Identity
1. What, if any, parts of your current visual identity are you dissatisfied with? Satisfied with?
2. Are there any brands in your space that spark joy when you view their branding?
2. Are there any brands in your space that spark joy when you view their branding?
3. Your logo should be clearly connected to your brand and voice, it should be relevant and timeless. Are there other important aspects your logo should showcase?
And so on...
Purpose
Convey Business for Good as a passionate organization unified in its purpose, vision, and values of leveraging social responsibility and equity through clear and cohesive design.
Reinforce the idea that Business for Good aims to foster and grow lasting relationships between its core audiences. Business for Good is committed to creating access and opportunity to the small business community.
Be visually distinct amongst peer and competitor organizations by putting a visual and content focus on the policies BFG focuses on and the community that is on the ground making change!
Understanding the Audience & Goals
Through the discover questionnaire, we gripped onto the fact, that as a business a part of Business for Good, we directly could associate ourselves with the seat of being their audience. Our impact was just that, Visceral provided branding and digital for social visionaries that were out to change the world. I sat there, profound, that I have invested so much of my desires to do good in this world, that I was proud to be working on this project for others that are doing so much of the same.
Goals:
1. Impact the website with the ability to network amongst San Diego businesses who want to make a difference. Find their people and connect them with ease.
2. Passions: Display in true social impact fashion what the board and its' people are most passionate about. What are the important policies?
3. Grow membership!
4. Create space for committees and other social gatherings a part of Business for Good.
Strategizing the Key Objectives
After becoming one in understanding the audience and the impact on their community, there were other objectives the discovery research made us aware of.
Key 1: Events and communication around them were hard to relay and outdated.
Solution: Create ease for whoever was assigned to website management. Create a process and training in place to help continuously build a community of events and programs for the community, while also defining event types to drive more personal interaction.
Key 2: Current and future members have a hard time finding the resources they need to effectively communicate a policy, direct others to change they've initiated, and separation of that from insights and updates.
Solutions: Restructure the navigation to make it more aware that resources and the tools they provide are at the forefront of their business.
Key 2: Current and future members have a hard time finding the resources they need to effectively communicate a policy, direct others to change they've initiated, and separation of that from insights and updates.
Solutions: Restructure the navigation to make it more aware that resources and the tools they provide are at the forefront of their business.
Advising the Information Architecture
Our first step is to introduce the site map. Our site maps were derived from mind mapping all the information on their current website, what we learned from discovery research, and then we card sorted those items into groups, respectfully understanding the definite information to be shared from the lower level items. At times information they wanted on their website could be in the form of an insightful article.
From that point on, we can then easily understand the content strategy that will be delivered page by page. In the first review of the new website, we delivered a fully interactive wireframe prototype to review with stakeholders. This process allowed us to understand anything that may have been misguided and review the content strategy and templates we would be handing off.
Creating the visual identity and components
Visual Identity
During the time the wireframes were in the hands of BFG's CEO, we went back into discovery once more to begin forging the ideas and desires of their refreshed visuals. That began with color exploration and logo design.
In cap letters, I read BOLD IMPACT.
The color came almost immediately and was directly impacted by social and political references and understanding of Blue & Red. What made it more impactful was the Yellow addition. The boldness and impact of primary colors have on the entire system of colors.
Mark
It was communicated that there was some admiration for the current logo. The overall structure and placement of the letters formed into an abstract block type. With that feedback, I immediately saw a transition of those blocks representing less of the letter and more "structure." And by structure I mean business building in a downtown setting like, San Diego. The abstract of creating the letterface into downtown building, perfectly represented the identity that Business for Good represents in SD.
Concepts
Update
Components
While the review of the IA takes place, our next step is to begin the component system UX would use to create a handful of hi-fi mocks to present to our client. In this project, we understood that there were few primary branding elements but the rest could be expanded from that.
In with the New 🎉
In our delivery of the hi-fi mocks, we walked theme through key pages we would template and the states of interactions. After our mocks were delivered and approved by the Founder of Business for Good, we began to work diligently with a developer to form micro-interactions and work on adding the content to the Wordpress theme. Which we later trained our clients on!
