A website that leads to a home sold.
Jason Shutt is a Windermere Real Estate broker on Bainbridge Island, Washington. I designed his website as a guide to the island itself, covering its lifestyle, its waterfront and its ten neighborhoods, with his listings and a way to reach him on every page.
My goal was to make the site the guide a buyer reads before choosing Bainbridge Island, so that every page about the island also led to a conversation with Jason.
From visitor questions to eight page templates.
I planned the site around the questions a buyer brings to an agent’s website, then designed it as eight page templates at desktop and mobile width. The process below follows the homepage and the island pages from outline to high fidelity.
01Discover
Planning the homepage around visitor questions.
I outlined the homepage before drawing any layout, and assigned each section the question it answers for a visitor arriving at an agent’s site: who Jason is, where the homes are, what the island offers, how to start a search and why to choose him.
I kept the questions in a column beside the wireframes, so I could check the order of the page against them at mobile and desktop width.
Question 01
The hero and the footer carry his name, his brokerage, his phone number and his email address, so his contact details are on screen at the top and bottom of every page.
Jason and how to reach him
Question 02
The hero, the expertise figures and the resource center place his work on the island before anything else is shown.
Bainbridge Island
Question 03
The welcome video, the lifestyle and waterfront sections and recently sold homes show the island a buyer is choosing.
What the island offers
Question 04
Featured listings sit directly above an email field, so a visitor can ask about a home from the first listing they see.
How to start a search
Question 05
His figures, the case for working with him and client testimonials give the reasons to choose him over another agent.
Why work with Jason
02Define
Structuring the island as its own section.
I set the navigation to five items: Bainbridge Island, Buy, Sell, Resources and About. I gave Bainbridge Island its own section with three chapters, the lifestyle, the waterfront and the neighborhoods, so a buyer new to the island can read it in order.
I gave each of the ten waterfront neighborhoods its own page and listed the same ten in the footer of every page as a neighborhood directory.
- The Lifestyle
- The Waterfront
- The Neighborhoods
- Eagle Harbor
- Rockaway Beach
- Blakely Harbor | Country Club
- South End
- Fletcher Bay | Battle Point
- Manzanita Bay
- Agate Passage | Agate Point
- Port Madison
- The Spit
- Sunrise
- Listings
- Listing detail
- Seller strategy session
- Market report
- Buyer’s guide
- Seller’s guide
- Waterfront guide
- Seller presentation
03Define
Giving every page a way to reach Jason.
I gave every template at least one way to start a conversation, worded for the page it sits on. A buyer reading an island page is asked if they are ready to buy a lifestyle, and a homeowner is offered a personalized seller strategy session.
Email band
One email field in a navy band, headed for the page it sits on: Ready to talk with Jason on the homepage, Ready to buy a lifestyle on the island pages and How can I help you on the neighborhood pages.
Seller strategy session
A photo card that offers a personalized seller strategy session and a guide to selling a home on Bainbridge Island, opened with an email address.
Market report
Jason’s latest market report, offered as Bainbridge insight and analysis in 99 seconds or less.
Resource center
Buyer’s, seller’s and waterfront guides and the seller presentation, offered as free downloads.
Buy or sell
Two photo cards near the end of the homepage, one for buying a home and one for selling, each with its own next step.
Footer contact form
Name, email, phone and a message field in the footer of every page, beside the neighborhood directory.
04Develop
Drafting low fidelity wireframes.
I drafted low fidelity wireframes at mobile and desktop width before setting any photography or color, and drew two desktop hero directions side by side: one split the visitor into selling and buying from the first screen, and the other led with an email field. The final hero kept the split from the first direction and turned it into three questions: why buy with Jason, why sell with Jason and why Bainbridge.
I wireframed the Bainbridge Island page as three numbered chapters, with Jason’s figures, featured listings and the resource center below them.
The homepage and the Bainbridge Island page at low fidelity.
05Develop
Designing the island chapters.
The lifestyle page sets out daily life on the island under six tabs: overview, food and retail, education, healthcare, outdoors and sports, and culture and arts. Six tiles cover retiring on the island, from safety and investment to healthcare, climate, location and culture.
The waterfront page maps nearly 100 public beach access points on a curated Google Map, with directions, parking details and park links for each. The neighborhoods page sets out the ten waterfront neighborhoods as photo cards, each leading to its own page.
The three chapters of the Bainbridge Island section.
06Develop
Turning each neighborhood page into a search.
Each neighborhood page tells the neighborhood’s story first: its location, its lifestyle, its public beach access, a timeline of its history and its price trends.
The lower half of the page is a search of that neighborhood’s waterfront property, with listings, open homes and the market report as tabs, a for sale and recently sold toggle, and a map. A buyer researching a neighborhood reaches its listings without starting a new search.
07Develop
Building a shared component set.
I assembled the pages from one set of components, so the island chapters, the neighborhood pages and the listing search read as one site, and designed each component at desktop and mobile width.
The set starts from the brand: the logo lockup, a palette of navy, slate, charcoal, black and light grey, and a type scale for labels, headings and body copy. I then built buttons, the email band, listing cards, the retirement tiles, testimonials and the resource guides on top of it.
Listing portfolio
A carousel of Jason’s listings with the active listing enlarged at the center, its address, beds, baths and square footage set over the photo.
Island statistics
Average, highest and lowest price, total listings, days on market and price per square foot, beside a donut chart of property types.
Expertise figures
Jason’s results in a single band: career sales volume, his ranking as a producing broker and his years of experience.
Client testimonials
A carousel of client quotes with the active quote at the center and the neighboring quotes faded at either side.
Aerial video gallery
Aerial videos of each waterfront neighborhood, opened from a row of thumbnails.
Footer
The core pages, the ten neighborhoods and a contact form, the same on every page.
08Deliver
Designing the listing search.
The listings page groups homes into six price bands, from $2,000,000 and above down to under $500,000. Each band is its own row, so a buyer can go straight to their price range from the top of the page.
A map with a for sale and recently sold toggle sits above the bands. Each listing opens to a detail page that leads with the address and its status, with schedule a tour, request information, share and save as the first actions. I delivered all eight templates as high fidelity designs at desktop and mobile width.
Eight templates, at desktop and mobile width.
Each page below was assembled from the same component set. Each walkthrough scrolls the full page and stops on the parts of the template a visitor uses, on a laptop and on a phone.
Introducing Jason and the island on one page.
The homepage opens on an aerial view of the island with the three questions a visitor arrives with: why buy with Jason, why sell with Jason and why Bainbridge. His figures, his listing portfolio, the island’s statistics and client testimonials follow, and the page ends on a choice between buying and selling. An email entered in the Ready to talk with Jason band is confirmed on the page, and the footer contact form is sent from the same screen.
Opening the island in three chapters.
The Bainbridge Island page introduces the island and divides it into three numbered chapters: the lifestyle, the waterfront and the neighborhoods. On desktop the Bainbridge Island menu item opens a dropdown of the same three chapters. Jason’s figures, his listing portfolio, the resource center and the seller strategy offer follow, and the seller’s guide is requested with an email address.
Describing daily life on the island.
An aerial tour opens the page. Six tabs cover the island’s food and retail, education, healthcare, outdoors and culture, and each tab opens its own content in place. Six tiles set out the case for retiring on Bainbridge, and each tile opens to a short explanation.
Mapping the island’s public shoreline.
Each photo in the collage reveals its caption on hover or tap. A curated Google Map plots nearly 100 public beach access points, and each pin opens a card with the beach name, parking details, directions and a park link. The island statistics and the aerial video gallery follow.
Comparing ten waterfront neighborhoods.
The ten waterfront neighborhoods are set out as photo cards, each leading to its own page, and on a phone the cards become a swipeable carousel. Each card expands to show the median price, active listings and days on market. The beach access map and the island statistics follow.
Pairing a neighborhood’s story with its listings.
Each neighborhood page covers the location, the lifestyle, the public beach access, a timeline of the neighborhood’s history and its price trends. The timeline draws in era by era, and each price trend chart breaks down sales on hover. The page then searches that neighborhood’s waterfront property, with a for sale and recently sold toggle.
Browsing listings by price band.
Listings are grouped into six price bands below a map with a for sale and recently sold toggle. A sort menu orders the results, each map pin opens a listing preview, and each price band row slides to its next listings with its own arrows.
Acting on a single listing.
The listing page leads with the address and its status, then schedule a tour, request information, share and save. Each action completes on the page, and a tour is booked from a panel that ends on a confirmation with an add to calendar button. The listings in the same neighborhood follow below.