LFP_CPB Site
September 2021
Web Design
+ Development
Lake Forest Park Community Birding Site
I was hired by Professor Douglas Wacker at the University of Washington Bothell in the role of User Experience and Web Designer. My main purpose of designing and developing a responsive and mobile friendly website to engage members of the local community in a newly created citizen science project.
In Context_
Domain:
Our first session together was spent setting the scope and project definition. As we were funded though grant money, with an extremely low budget, fifty total paid hours, and a short timeline, we knew we would have to make sacrifices.
We set three weeks aside for researching, performing market and trend analyses, generating ideas of the content that would live on our site, identifying the core pages we would need, and defining our target audience along with their core needs and motivations.
We set aside the next month for creating our information architecture, wireframes, and the development of our core brand so that we could maximize our outreach while the scientists were working in the field.
Setting Scope:
At the end of our first month we had defined our primary and secondary target audiences respectively as:
• Individuals aged 30 - 60 who are from historically uninterested communities.
• Individuals aged 20 - 30 who have never birded before and are new to the ideas of conservation and stewardship.
In defining the size of our site, we wanted to create simple and easy to understand user experiences. We wanted to avoid scope creep so we agreed to under 15 pages for our static content, and set aside future time to reassess once we had created our site map.
Project Goals_
Create and develop a resource that facilitates awareness, engagement in citizen science.
Educate local citizens and push them to think critically about their role in the ecosystems they inhabit
Engage historically uninterested communities and younger demographics in birdwatching
Scenarios_
Graham Robinson - Retired Programmer:
On his morning walk around Eagle Scout Park in Lake Forest Park, Graham Robinson sees a group of people standing in the park with binoculars, clipboards, compasses, and bird identification guides. He approaches them and asks what they are doing? He has seen birders before, but never this many with so much equipment. The birders tell him they are from the University of Washington Bothell running a longitudinal study of bird biodiversity and behavior in communities within and on the outskirts of the Seattle area – informing him that he can find out more on their website, lfpcbp.com. At home, Graham visits the Lake Forest Park Community Birding Project website and learns about environmental stewardship and how he can get involved.
Talia Roche - Undergraduate University Student:
Talia is talking with friend on campus who mentions they heard about an ongoing citizen science project about birding. Talia is interested in biology in general, but has no prior knowledge or experience with birding. Her friend directs her to the website, lfpcbp.com, where she sees guides, tutorials, and recommendations for first time birders. She decides she will text her friend and visit one of the survey locations the coming weekend.
Information Architecture_
Site Map:
After many discussions where I explained what information architecture is, the role it plays in creating the desired user experience, and why creating a a site map before wireframing would be a good idea—I was able to get time set aside in order to develop a site map with our 12 core pages and their connections to each other displayed.
Prototyping_
Wireframing:
I created the wireframes in Figma where, building directly off of the site map, I was able to cut three of our planned pages to a total of nine static pages we would need to develop.
Creating a working component library was a huge time saver, as I was able to use Figma's variants and interactive components to prototype interactions, and new ideas on the fly, saving much needed time and effort.
Before getting the "okay" to develop the site, I created a set of high fidelity wireframes within Figma in order to refine the visual look and feel of the site.
On this iteration, there were many alterations to our home page, due to the transition to using photos of birds donated by Lake Forest Park community members. This meant we were not able to create the graphics we had planned due to a lack in uniformity, size, and other varying factors.
As a consequence our home page went through many iterations, and ultimately we landed on the final layout shown here which highlights the latest updates for returning members and is followed by an overview of the project, leadership, and goals, and a final CTA for perspective users.
Development_
In building out the site, we tried a variety of site builders, as Wordpress was removed as a choice by Professor Wacker, due to past negative experiences with the editor and CMS plug-ins. We ultimately landed on Webflow, as it allowed for the needed customization, and allowed me to build out an integrated CMS System for Professor Wacker's quarterly news updates, and the numerous survey locations.
