Cambridge Local First
Non-profit Organization Web Design
Cambridge Local First (CLF) is a non-profit organization in Cambridge, Massachusetts, committed to fostering a vibrant local economy and community by promoting and supporting local businesses and cultural initiatives.
CATEGORY
ROLE
DURATION
SKILLS
TOOLS
UI/UX
Web Design
UX Researcher
UI/UX Designer
Apr - Aug 2023
User Research
UI/UX Design
Web Prototyping
CMS Implementation
Hi-Fi Prototype
2
1
3
4
5
Homepage
We designed a dual-section navigation bar with contrasting colors: the upper section accommodates functional menus, while the lower section focuses on informational menus. The most crucial call-to-action, "Get Involved", is prominently featured.
1
Dual-Section Navigation
In addition to "Get Involved", CLF's website features two other essential CTAs, namely "Explore Local" and "Donate". We have crafted this user funnel section for these three actions, streamlining and enhancing user interaction with CLF.
2
Tri-Action Funnel
This carousel showcases CLF's key business initiatives and provides a shortcut for members or potential members seeking business support to browse through project details and introductions.
3
Initiative Showcase Carousel
For the featured News section, we've added content categorization tags and quick-access buttons for liking and sharing to each piece of preview, enhancing user engagement.
4
Quick News Engagement
To ensure the sustained growth of CLF, we strategically emphasize the significance of "Donate" once again at the end of the homepage. This serves as a compelling message underscoring its importance.
5
Strategic Emphasis: Donate
About
By combining text with images and reorganizing content, we significantly enhanced the readability of the 'Who We Are,' 'What We Do,' and 'Why We Do This' sections. This design fosters a stronger connection between viewers and CLF, encouraging resonance.
1
Resonant Layout Design
Building upon the existing content, we introduced overviews of 'Our Communities' on the About Page, serving as a user funnel to attract more participation. This addition increases the exposure of Communities on the website.
2
Communities Overview Funnel
1
2
Get Involved
We transitioned from 'Join Us' on the previous website to 'Get Involved' following user research and communication with CLF members. Additionally, this change positions 'Get Involved' as the primary call-to-action across the entire website.
1
Engage with Impact
We've tailored engagement options based on diverse audience roles: Join as Member, Intern, and Partner. At the top of the Get Involved page, we've positioned quick-access pathways to their individual pages, ensuring a seamless joining experience.
2
Diverse Engagement Paths
In addition to the quick-access pathways, we've dedicated individual preview sections below for each engagement option. This allows viewers without a specific goal to quickly grasp the essence of these three involvement modes and find the role that best suits them.
3
Intuitive Involvement Preview
1
2
3
Get Involved - Join Membership
Join Membership page can be considered the most crucial subpage of 'Get Involved.' We've crafted a brand new user flow for a seamless CLF enrollment experience, significantly enhancing the webpage's credibility. The detailed flow is shown on the far right of the wireframe section above.
1
Membership Enrollment Redefined
We've designed a card-styled Membership packages section, providing a clear display of benefits for both Business Members and Community Members. The switch button in the top left corner allows users to toggle between different duration options.
2
Intuitive Choice Display
Before enrolling in membership, users often have concerns and questions. Showcasing testimonials and FAQs helps swiftly address user inquiries. Additionally, we've included a 'Contact Us' CTA button below, enabling users to reach out to CLF promptly for further assistance.
3
User Inquiry Support
1
2
3
Donate
Donations are undeniably crucial for non-profit organizations like CLF. However, after engaging with CLF members, the feedback suggests a current emphasis on encouraging more people to 'Get Involved.' After careful consideration, we decided to position the 'Donate' option in the upper layer of the dual-navigation bar, in close proximity to the 'Get Involved' CTA.
1
Donate Emphasis Placement
This page serves as an overview for Donation. The first section features persuasive messaging and a 'Donate' CTA, followed by visually compelling data in the second section. The third part reiterates the impact of contributions of donors.
2
Persuasive Donate Overview
At the end, we've incorporated testimonials, connecting the Donate page seamlessly with 'Get Involved.' If visitors choose not to donate, they can be guided toward alternative engagement options.
3
Engagement Path Integration
1
2
3
Black Business Network
1
2
Remember the Our Communities overview funnel at the bottom of the About page? We've crafted a page for the Black Business Network as an example, featuring a 'Join In' CTA at the forefront of each community page.
1
Our Communities Join-In
We've summarized the membership benefits of the CS Black Business Network community and designed an expandable/collapsible carousel for display. As users switch benefits, corresponding images dynamically change. This design reduces default text display cleverly while enhancing user interactivity and website engagement.
2
Smart Benefit Showcase
The final section is unique, featuring pop-ups hosted by CLF during Black History Month. Each community periodically hosts events, with details displayed at the bottom of their page and synchronized with the Calendar page.
3
Community Event Hub
3
Calendar
1
2
In the UX design of the Calendar, the filter has been a top priority. First of all, events from 'Now Onward' are displayed by default. We've incorporated location, category, and tag properties for each event, facilitating user searches for their target or interest. The 'Subscribe' button is strategically placed for easy access.
1
Comprehensive Filter Design
While most websites feature a grid arrangement for calendars, considering CLF's limited events, we've designed a List View as the default layout. Additionally, a switch button between List View and Grid View accommodates users' varied preferences. Each event can be clicked to access details for further information.
2
Adaptive Event Display
Another distinctive feature is the addition of a sidebar to the calendar. At the top, CLF's contact info is displayed, followed by a scrollable month-by-month calendar download section. This design accommodates users who expressed a need for downloading calendars during our user research.
3
Functional Calendar Sidebar
3
Business Resource Directory
The Business Resource Directory is a database serving as a vast network of resources to provide CLF members opportunities to connect. On this page, users can access various company details, swiftly navigate to their official websites for more information, or directly connect with them through provided contact information.
1
Networking Resource Database
Due to the vast amount of information, the Resource Directory's filter is complex, comprising information type selectors, a search bar, and setting options. Our designed information type selector enables comprehensive and intuitive organization display, with several types available for dropdown selection; the search bar supports searching for any information within the database; and the design options help users switch perspectives and hide categories, etc.
2
Advanced Filter Options
1
2
Programs Subpage
"Networking and Resource-Sharing" refers to projects initiated or organized by CLF itself, while "ARPA Projects" encompass collaborations between CLF and external partners. As both project types share a similar content structure, we chose to showcase the design using the ARPA Projects page.
1
Programs Collection Page
We've also designed a filter for the Programs Collection pages, allowing users to efficiently search using the search bar and select their desired Program Type, Organization Type, and County. In the initial design, we received feedback about the filter being too wide, so the current design has been adjusted to allocate more space for program preview cards.
2
Refined Programs Filters
For each program preview card, alongside the project name, brief description, and a button for accessing more details, we've added colored tags at the bottom left corner of the title image to provide users with more visual information about program attributes.
3
Program Attribute Highlights
1
3
2
Clicking on the main navigation bar's 'Programs' leads us to the 'Business Support Programs' page, serving as an overview for all CLF programs, including Networking and Resource-Sharing (external programs), ARPA Projects (internal programs), and Workshops. Additionally, this page showcases our designed Default Page template.
1
Default Template Showcase
For 'Networking and Resource-Sharing' , 'ARPA Projects,' and ‘Workshops’, we've designed cards with hover state for each program showcased in the overview sections to provide program previews.
2
Program Hover Previews
The Business Resource Directory is a database we were tasked to design for CLF, serving as a vast network of resources to aid member socialization.
3
Resource Networking Program
1
2
3
Business Support Programs
(Default Page)
PROJECT OVERVIEW
Background
Cambridge Local First (CLF) is a non-profit network of over 500+ locally-owned and independent businesses. As an independent business alliance (IBA), CLF’s mission is to support and promote an equitable and thriving local economy.
The main purpose of the CLF website is to draw in individuals, educate them about CLF's activities at local, state, and national levels, and empower them to actively contribute to CLF's mission by engaging with the community.
Challenge
How might we create an interactive, visually appealing, and user-friendly website for CLF that empowers visitors, fosters engagement, and enhances mission clarity?
Design Process
User Research &
Problem Identification
Lo-Fi and Hi-Fi
Wireframing & Prototyping
Usability Test &
Wordpress Implementation
Sitemap &
Content Breakdown
RESEARCH + PROBLEM IDENTIFICATION
Uncovering of Current Website Issues
01
Content Concerns
Most of the content is not easily searchable and is outdated.
Many pages require a more compelling and concise presentation with added visuals, as it currently contains excessive text.
02
Layout and Visual Issues
The layout and overall visual effect appears outdated, lacking focus, with an excessive amount of text and inconsistent font and image sizes, making it unattractive and unengaging.
03
Disorganized Navigation and Weak Gravitation
The navigation system is disorganized and the whole site lacks proper structure.
04
Layout and Visual Issues
Limited black, white, and orange palette and little design elements hinders brand awareness.
Lack of deep brand identity constrains brand awareness and brand performance.
It also lacks prominent and engaging Calls to Action (CTA) buttons and relevant sections to attract users to engage.
Target User Analysis and Interview
Based on the goal of boosting the local economy and increasing community engagement, CLF's website target users can be divided into 2 main groups: Small Business Owners and The Public.
These two user groups have different focuses when using the CLF website.
I’m a small business owner.
I represent the public.
Small Business Owners...
Own independent businesses locally in Cambridge
The Public includes...
Residents of Cambridge and nearby cites
Students ( Mainly undergraduate and graduate)
Tourists
Local employees (especially at our large employers in Kendall, Harvard, MIT, and Mt. Auburn Hospital)
After identifying the evident issues with the CLF website and effectively categorizing the target users, our team interviewed 11 existing and potential users in the Cambridge area.
Among these participants, 6 are "The Public" users, while 5 are "Small Business Owner" users.
Our team synthesized insights gained from user interviews using affinity mapping, systematically organizing and highlighting user preferences and challenges. This process enabled us to distill complex data into actionable points, shaping our design strategies.
Insights Unleashed - Affinity Map
The Public
Gather
1.
Group
2.
Define
3.
Small Business Owners
Gather
1.
Group
2.
Define
3.
Small Business Owners
User Persona
The Public
19 | Undergraduate Student | Sales & Marketing Intern
Ben
“I feel it’s important that web design should cater to diverse groups, with a special focus on ensuring accessibility.”
Bio
Ben is a freshman student and a new Sale & Marketing Intern who has interest in participating in local activities and making new friends on weekends. But sometimes he feels frustrated where to find the local event information.
Ben wants to gather more information about Cambridge that he could constantly be notified local news, involving more in this new community.
Goals
Get more engaged in Cambridge local community
Gain professional experience
Learn about cool local events and things to do (have fun)
Connect with like-minded community members
Find local businesses
Frustrations
Fonts are too small to read well
Frustrated when seeing no event in Calendar
Some navigation boxes have dropdowns while some don’t
Newsletter is monotonous
Less search function
Motivations
Informativeness
Clear design
Functionality
Credibility
Frequently Used Tools
31 | Florist
Radha
“We can have an amazing book in here, with great content, but if the cover is shitty, then no one is gonna buy it. If the website can combine both the cover and the content, then it’s the good things.”
Bio
Radha is a highly educated and insightful woman. She owns a Cambridge-based flower shop, where her impeccable taste and patience shine through. Her refined sensibilities make her a true connoisseur of life.
However, she recognizes the challenge of not having strong local connections and resources, and is seeking reliable partnerships and collaborations with local organizations to better promote and market her shop.
Goals
Learn how CLF can help them
Improve the performance of their business
Connect with a community of other local businesses
learn about what local support resources are available to them and where they can find them
Frustrations
Pages are not appealing
Picture of the stores is confusing
Website design is not engaging enough
Content of business member page is unfocused
Content is not up to date
Audience of the page is not very focused
Motivations
Attractive
Aesthetic
Visual appealing
Frequently Used Tools
Expectations from Stakeholders
Theodora Skeadas
Executive Director of CLF
Pooja Paode
Associate Director of CLF
After completing the user research and problem identification, we reported the information gathered to CLF board members and seek requirements and expectations for designs from them, then we could determine our design goals by identifying CLF's ois pinions.
We would like to see a sustainable web design with adequate templates that can be enduringly utilized. The design should feature ample interactive and functional elements, ensuring high consistency throughout the entire site.
The website should clearly convey our mission and show what we do and what we have done. Let the public and small business owners know that we provide a wide range of resources, activities, etc. we can offer to promote community engagement.
• Get more engaged in local community
• Connect with like-minded community members
• Identify locally-minded events and activities
• Volunteer for or contribute to a good cause
The Public could...
• Find helpful resources or learn about local economy-related issues
• Access data, CLF’s research, and read up on CLF’s policy work and advocacy
• Partner with CLF to achieve policy or organizational goals
• Learn how CLF can provide help and convenience for them
Small Business Owners could...
Design Goals
Our team systematically identify the current issues and pain points within the existing website, providing a precise understanding of areas necessitating enhancement.
Also, we engage with stakeholders, including members of CLF, to collect their expectations, objectives, and prerequisites for the redesign. This process enables us to precisely define the overarching goal of our redesign project.
Elevate engagement with dynamic design elements and user-centered interactions.
Interactive
Deliver comprehensive and adequate content for clear understanding.
Informative
Incite meaningful discourse on Cambridge Local First’s mission and impact.
Thought-provoking
Sitemap and Content Breakdown
Information Architecture (IA)
For large websites like CLF, which involve vast information and numerous modules and interfaces, a comprehensive text-based sitemap along with a content breakdown for key pages and templates is crucial.
This approach, managing content prior to the actual sketching and designing, is not only beneficial for building the correct information architecture and maintaining consistency in the design of the site, but also facilitates better team design and collaboration in subsequent designing process.
&
Lo-Fi Wireframes
We have redesigned wireframes for not only crucial template pages, but also the membership joining process.
Lo-Fi and Hi-Fi Design
Style Guide
Montserrat, Regular, 32px
Lato, Regular, 32px
body, Lato, Regular, 16px
Roboto, Medium, 32px
Get Involved
Get Involved
Our Leadership →
List View
Grid View
Internal
External
News
1
The design style for the News page and Calendar filters bears resemblance, with both featuring a familiar layout. However, the News filter stands out with the addition of a search bar, offering enhanced search capabilities. Moreover, the filter bar options have been tailored to suit the content, now offering selections for Category, Source, and Popularity, providing users with more refined filtering choices.
1
Tailored Filter Design
On this preview page, each news card contains sufficient preview content for viewers. In addition to the image, title, highlights, author, and publication date, we have also added attribute tags in different colors for different types of news. Furthermore, the news featured on the CLF website are not limited to those edited by CLF itself; there are also publications from other collaborating organizations, so we have indicated Resource on the top.
2
Comprehensive News Previews
2
Usability Test
User Testing Feedback Summary
After finalizing the high-fidelity design and refining its interactive elements, we invited 5 CLF audience users to participate in User Testing to validate whether we successfully achieved our goals and identify any potential areas for improvement that may not have been previously considered.
14 years business owner
Elaine
Cambridge resident since 1986
Member of CLF for 2 years
Rarely visited CLF website before
Good job!
· Clarity and Ease of Use: Users appreciated the clear and intuitive design of the Get Involved process, making it easy to understand and navigate.
· Visual Design: The website's dynamic backgrounds, solid color schemes, and balanced layout were praised for their aesthetic appeal and readability.
· Engagement Features: Features like the carousel and interactive cards provided users with engaging and visually appealing content, enhancing their overall browsing experience.
· Content Organization: The inclusion of sections like Programs Overview and Community Pages effectively organized information, making it accessible and engaging for users.
However...
· Homepage Length: Consider streamlining the homepage by removing or condensing less relevant sections to improve user engagement and reduce scrolling.
· Filter Functionality: Enhance the functionality of filter bars, particularly on pages like Programs and News, to make them more intuitive and user-friendly.
Template w/ Interaction Implementation in WordPress
As noted in Content Breakdown, we have designed numerous page templates. To assist CLF in initiating the website development process, we implemented content and interaction for one page of each template in WordPress.
Wordpress Implementation
Valuable Lessons Learned
TakeawayS
Sustainable design involves anticipating future needs and scalability. During the initial Content Breakdown phase, we recognized the extensive nature of the CLF website, which necessitates numerous pages, with the potential for further expansion. Consequently, we categorized all existing pages to create a comprehensive set of page templates that can accommodate foreseeable future additions. Additionally, establishing a design library and reusing design elements throughout the visual design process promote sustainability. This approach enhances coherence across the website's content and familiarizes users with interaction patterns, ultimately elevating the website's user experience.
Emphasizing each team member's strengths, assigning tasks according to expertise, and fostering a positive collaborative atmosphere are conducive to project advancement. By leveraging individuals' skills and fostering open communication, teams can streamline processes, mitigate errors, and achieve project goals more efficiently.
While thorough user research and problem analysis are essential for understanding the project and devising plans, stakeholders are undoubtedly the most knowledgeable about their own business. Therefore, ongoing communication and collaboration with stakeholders are crucial before making decisions, ensuring that the solution design meets the client's requirements while also aligning with user expectations.
01 Continuous Communication with Stakeholders
02 Designing for Sustainability
03 Effective Team Collaboration
Let's Collaborate!
Copyright @ 2024 Sammi Tang
